Zhihu を模倣した WeChat ミニ プログラムを含め、これまでに WeChat ミニ プログラムに関する多くの記事を共有してきました。今日は引き続きミニ プログラムの実装について共有します。気に入っていただければ幸いです。
注: データはローカル キャッシュで操作され、バックエンドのない純粋なフロントエンドで、情報漏洩を心配する必要はありません。
まず実装インターフェイス図を見てみましょう:
実装手順 (個人版):
1. WeChat アプレットを登録し、appid を取得します
登録 URL: https: //mp.weixin.qq.com
2. 新しいバージョンの WeChat 開発者ツールをダウンロードし、新しいメモ プロジェクトを作成し、確認後に初期化コードを自動的に生成します
開発者ツールのダウンロード: https:/ /mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
3. ディレクトリ構造
+-- assets //静态文件夹 | +-- font //字体文件 | +-- iconfont.eot | +-- iconfont.svg | +-- iconfont.ttf | +-- iconfont.woff | +-- images | +-- share.jpg +-- pages //页面 | +-- add //添加备忘录 | +-- add.js | +-- add.json | +-- add.wxml | +-- add.wxss | +-- edit //编辑备忘录 | +-- edit.js | +-- edit.json | +-- edit.wxml | +-- edit.wxss | +-- index //首页 | +-- index.js | +-- index.json | +-- index.wxml | +-- index.wxss | +-- logs //日志 | +-- logs.js | +-- logs.json | +-- logs.wxml | +-- logs.wxss +-- utils //公用js | +-- shareData.js //分享短句 | +-- util.js +-- app.js +-- app.json +-- app.wxss +-- project.config.json
4. 機能モジュール
メモ追加
//保存标题、内容和编辑时间到storage中 saveMemo: function(){ var that = this; var stamp = +new Date(); //获取时间戳 var time = util.format(stamp); // 转换成标准时间格式 var title = that.data.title; var memo_value = that.data.value; if (title == ''){ wx.showToast({ title: '请输入标题', icon: 'none', duration: 1000 }) } // else if (memo_value == '' ){ // wx.showToast({ // title: '请输入内容', // icon: 'none', // duration: 1000 // }) // } else{ //后编辑的放在前面 that.data.memoLists.unshift({ "title": title, "text": memo_value, "time": time }); //异步保存到storage中 try { wx.setStorageSync('memoLists', that.data.memoLists) } catch (e) { wx.showToast({ title: '保存失败', icon: 'error', duration: 2000 }) } wx.redirectTo({ url: '/pages/index/index' }) } },
データ取得
var that = this; //异步获取storage中保存的数组 try { var value = wx.getStorageSync('memoLists'); if (value) { that.data.memoLists.push(value) that.setData({ memoLists: that.data.memoLists, allLength: util.count(that.data.memoLists[0]), isNull: false }) } } catch (e) { wx.showToast({ title: '获取数据失败', icon: 'none', duration: 1500 }) };
データ削除
//编辑备忘录后重新保存 saveMemo: function () { var that = this; var stamp = +new Date(); //获取时间戳 var time = util.format(stamp); // 转换成标准时间格式 var title = that.data.title; var memo_value = that.data.value; var editMemo = that.data.memoLists[that.data.id]; //标题不能为空 if (title == '') { wx.showToast({ title: '请输入标题', icon: 'none', duration: 800 }) } // else if (memo_value == '') { // wx.showToast({ // title: '请输入内容', // icon: 'none', // duration: 800 // }) // } else { //如果标题和内容都没改,编辑时间不变,否则时间更改 if(editMemo.title != title || editMemo.text != memo_value){ editMemo.time = time; }else{ editMemo.time = that.data.time; } //更新标题和内容 editMemo.title = title; editMemo.text = memo_value; //异步更新数组 try { wx.setStorageSync('memoLists', that.data.memoLists); wx.redirectTo({ url: '/pages/index/index' }) } catch (e) { wx.showToast({ title: '保存失败', icon: 'error', duration: 2000 }) } } },
共有機能
// 删除单条备忘记录 delMemoLists: function(e) { var that = this; try { wx.showModal({ title: '', content: '确认删除这' + that.data.checkboxLength+'条吗?', success: function (res) { if (res.confirm) { try { var delValue = wx.getStorageSync('delLists'); // 数组从大到小排序 delValue.sort(function (a, b) { return a < b; }) if (delValue) { if (that.data.allLength == that.data.checkboxLength) { //直接清空缓存 wx.removeStorage({ key: 'memoLists' }); }else{ for(var i=0; i<delValue.length; i++){ try { that.data.memoLists[0].splice(delValue[i] - 1, 1); //删除指定下标的值 wx.setStorageSync('memoLists', that.data.memoLists[0]); //异步更新列表缓存 wx.showToast({ title: '删除成功', icon: 'success', duration: 500 }); } catch (e) { } } } // 删除后刷新页面 setTimeout(function () { wx.redirectTo({ url: '/pages/index/index' }); }, 500); } else { wx.showToast({ title: '获取数据失败', icon: 'none', duration: 1000 }); } } catch (e) { wx.showToast({ title: '删除失败', icon: 'none', duration: 1500 }) } } } }) } catch (e) { wx.showToast({ title: '删除失败', icon: 'none', duration: 1500 }) } }
関連おすすめ:
テキストで遊ぶWeChatミニプログラム(弾幕)Zhihuの共有例のWeChatミニプログラム版WeChatで発生した問題のまとめミニプログラム開発以上が会話メモアプレットの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。