多(duo)項技能，好像也不錯(cuo)。學習一下微信小程序。

　　教(jiao)程：//mp.weixin.qq.com/debug/wxadoc/dev/

　　簡(jian)介(jie)：一套用(yong)來開發在手(shou)機微信上(shang)運行的app框架，不用(yong)安裝

　　組成：結(jie)構文(wen)(wen)件wxml、樣式(shi)文(wen)(wen)件wxss、js文(wen)(wen)件

 　　備注：wxml 和(he)html是一(yi)樣的，除了部(bu)分便簽不一(yi)致；wxss和(he)css是一(yi)樣的；js同(tong)理

　　說明：支持雙向數據綁定、ES6語法，遵循commonjs規范管(guan)理模塊

　　首先在教(jiao)(jiao)程(cheng)（//mp.weixin.qq.com/debug/wxadoc/dev/）中找到工(gong)具(ju)，然后(hou)從“微(wei)信(xin)開(kai)發者(zhe)工(gong)具(ju)”鏈接進入，下載開(kai)發者(zhe)工(gong)具(ju)，之(zhi)后(hou)安(an)裝。安(an)裝好后(hou)，用手(shou)機微(wei)信(xin)確定登錄后(hou)，就可(ke)以創建項(xiang)目了。如何創建可(ke)參照簡(jian)易教(jiao)(jiao)程(cheng)。

　　簡(jian)易記(ji)事(shi)本(ben) - 主要功能：

　　1. 列表展示

　　2. 新(xin)增(zeng)/編輯(ji)

　　數據存儲(chu)在storage中(zhong)

簡易記事本(ben)：

目錄結構 列表 新增/編輯

　　在目(mu)錄結構中(zhong)(zhong)(zhong)的(de)app.json中(zhong)(zhong)(zhong)配置(zhi)路(lu)由及導航(hang)條(tiao)的(de)基本設置(zhi)，其中(zhong)(zhong)(zhong)pages數組中(zhong)(zhong)(zhong)的(de)第一個(ge)就是入口的(de)路(lu)由頁(ye)面：

1. {
2. "pages": [
3. "pages/list/list", // 入(ru)口路(lu)由(you)頁面
4. "pages/add/add"
5. ],
6. "window": {
7. "backgroundTextStyle": "light",
8. "navigationBarBackgroundColor": "skyblue",
9. "navigationBarTitleText": "簡(jian)易記事本",
10. "navigationBarTextStyle": "#fff"
11. }
12. }

　　下面(mian)展示主要代(dai)碼：

　　list.wxml中的(de)內容如(ru)下，add.wxml同理，就不展(zhan)示了。至于wxss和(he)css一樣，也(ye)不展(zhan)示了。

1.  
2. class='page'>
3.  
4. scroll-y='true' class='lists'>
5. wx:for="{{lists}}" wx:key="*this.id">
6. class="list-i" bindtap="edit" data-id="{{item.id}}">
7. class="content">{{item.content}}
8. class='time'>創建時(shi)間(jian)：{{item.time}}
9.  
10.  
11.  
12.  
13. class='add' bindtap='add'>
14. src='../../img/edit.png'>
15.  
16.  

　　設置storage使用：wx.setStorageSync(key, data), 獲取storage數(shu)據使用的是(shi)wx.getStorageSync(key)。

　　備注：還有一(yi)個(ge)wx.getStorageInfoSync()，這個(ge)是獲取(qu)storage的(de)信息(xi)，而不(bu)包(bao)含設(she)置的(de)key的(de)具(ju)體內(nei)容(rong)。我(wo)第一(yi)次就(jiu)用錯了。

1. // list.js 初始化列表數據
2. function initData (page) {
3. var arr = wx.getStorageSync('txt');
4. if (arr.length) {
5. arr.forEach((item, i) => {
6. var t = new Date(Number(item.time));
7. item.time = util.dateFormate(t);
8. })
9. page.setData({
10. lists: arr
11. })
12. }
13. }

1. // add.js 獲(huo)取根據url中的(de)id獲(huo)取編輯信(xin)息(xi)
2. function getData(id, page) {
3. var arr = wx.getStorageSync('txt');
4. if (arr.length) {
5. arr.forEach((item) => {
6. if (item.id == id) {
7. page.setData({
8. id: item.id,
9. content: item.content
10. })
11. }
12. })
13. }
14. }
15.  
16. // 設置填寫的信息，分編(bian)輯、新增
17. function setValue(page) {
18. var arr = wx.getStorageSync('txt');
19. var data = [], flag = true;
20. if(arr.length) {
21. arr.forEach(item => {
22. if(item.id == page.data.id) {
23. item.time = Date.now();
24. item.content = page.data.content;
25. flag = false;
26. }
27. data.push(item);
28. })
29. }
30. if (flag) {
31. data.push(page.data);
32. }
33. wx.setStorageSync('txt', data);
34. }

　　小小的展(zhan)示了以下(xia)，^_^

　　git項目地(di)址是：//github.com/ESnail/wx.git