前書き

これは、テキストのメモを記録するだけの小さなプログラムの比較的単純なデモです。2 か月前に書きました。試験が終わって間もなく、試験で忙しかったのです。小さなプログラムを書き終えるまでに 1 日もかかりませんでした。サーバーは私自身のクラウドサーバーです (あまりいじらないでください)。デモを見に行ってください~

github

mycloudnoteクライアント
mycloudnoteサーバー側

注: appidの取得を申請していないため、ユーザーのWeChatアカウントIDを取得できません。ユーザーのWeChatニックネームをプライマリとして使用します。また、appid がないので実機でのテストはしていません...

スクリーンショット

簡単な小さなプログラムのデモを共有する

ミニプログラムについての個人的な感想

これはhtml+css+jsです。フロントエンドに慣れていれば、すぐに始めることができます...
mini プログラムは、.wxml .json .js .wxss の 4 つのファイルで構成されます

簡単な小さなプログラムのデモを共有する

wxml ファイルは HTML に非常に似ており、XML に似た言語でもあります。wxml は HTML に適応したものであると言うべきです。小さなプログラムの場合は、いくつかの html タグを削除し、いくつかの新しいタグを追加します。HTML を理解していれば、マスターするのは非常に簡単です。公式の api を参照してください。次のページに対応します

簡単な小さなプログラムのデモを共有する
wxssファイルはcssのミニプログラムバージョンで、これも非常に簡単です。公式ドキュメントを読むだけです〜次のようになります（上記のwxmlと組み合わせる）:

<!--addNote.wxml-->
<form bindsubmit="save">
<label class="label">题目</label>
<view class="log-list">
<input name="title" type="text" value="{{title}}" placeholder="题目"/>
</view>
<label class="label">正文</label>
<view class="log-list">
<textarea name="context" value="{{context}}" auto-height placeholder="输入记录的内容" maxlength="-1"/>
<view class="submit"><button form-type="submit">添加</button></view>
</view>
</form>

ログイン後にコピー

js ファイルは、ビジネスロジックとデータを処理するために使用される通常の
javascript

/*addNote.wxss*/
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.submit
{
padding: 20rpx;
}
.hide
{
display: none;
}
.label
{
margin-left: 20px;
}

ログイン後にコピー

```
//addNote.js
var app = getApp()
Page({
  data: {
    title:&#39;&#39;,
    context:&#39;&#39;,
    noteID:&#39;&#39;,
  }
  ,
  save: function(e)
  {
    app.getUserInfo(function(userInfo){
      wx.request({
      url: &#39;http://139.199.74.155/myCloudNote/addNote.php&#39;,
      data: {
        userid:userInfo.nickName,
        title:e.detail.value.title,
        context:e.detail.value.context
      },
      header: {&#39;content-type&#39;:&#39;application/x-www-form-urlencoded&#39;},
      method: &#39;POST&#39;, 
      success: function(res){
        wx.redirectTo({
          url:&#39;../list/list&#39;
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  })
  },
  onLoad: function(options)
  {

  }
})
```
ログイン後にコピー
小さなプログラムについて個人的な意見をいくつか
どう評価していいのかわかりません... まだ完璧ではなく、多くのバグがありますが、開発は必要な API は基本的に揃っているので、とても便利です。これで世界を変えることができるかどうかはわかりませんが、複数のテクノロジーを学ぶ時間があれば悪くありません。【関連する推奨事項】
1. WeChat ミニプログラムの完全なソースコードのダウンロード

2. WeChat ミニプログラムのデモ: Kaka Auto

3. 同様のアンカー機能を実装します
以上が簡単な小さなプログラムのデモを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。