多項(xiàng)技能，好像也不錯(cuò)。學(xué)習(xí)一下微信小程序。

　　教程：https://mp.weixin.qq.com/debug/wxadoc/dev/

　　簡(jiǎn)介：一套用來(lái)開發(fā)在手機(jī)微信上運(yùn)行的app框架，不用安裝

　　組成：結(jié)構(gòu)文件wxml、樣式文件wxss、js文件

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

　　說(shuō)明：支持雙向數(shù)據(jù)綁定、ES6語(yǔ)法，遵循commonjs規(guī)范管理模塊

　　首先在教程（https://mp.weixin.qq.com/debug/wxadoc/dev/）中找到工具，然后從“微信開發(fā)者工具”鏈接進(jìn)入，下載開發(fā)者工具，之后安裝。安裝好后，用手機(jī)微信確定登錄后，就可以創(chuàng)建項(xiàng)目了。如何創(chuàng)建可參照簡(jiǎn)易教程。

　　簡(jiǎn)易記事本 - 主要功能：

　　1. 列表展示

　　2. 新增/編輯

　　數(shù)據(jù)存儲(chǔ)在storage中

 

簡(jiǎn)易記事本：

目錄結(jié)構(gòu) 列表 新增/編輯

　　在目錄結(jié)構(gòu)中的app.json中配置路由及導(dǎo)航條的基本設(shè)置，其中pages數(shù)組中的第一個(gè)就是入口的路由頁(yè)面：

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

　　下面展示主要代碼：

　　list.wxml中的內(nèi)容如下，add.wxml同理，就不展示了。至于wxss和css一樣，也不展示了。

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'>創(chuàng)建時(shí)間：{{item.time}}
9.  
10.  
11.  
12.  
13. class='add' bindtap='add'>
14. src='../../img/edit.png'>
15.  
16.  

　　設(shè)置storage使用：wx.setStorageSync(key, data), 獲取storage數(shù)據(jù)使用的是wx.getStorageSync(key)。

　　備注：還有一個(gè)wx.getStorageInfoSync()，這個(gè)是獲取storage的信息，而不包含設(shè)置的key的具體內(nèi)容。我第一次就用錯(cuò)了。

1. // list.js 初始化列表數(shù)據(jù)
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 獲取根據(jù)url中的id獲取編輯信息
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. // 設(shè)置填寫的信息，分編輯、新增
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. }

　　小小的展示了以下，^_^

　　git項(xiàng)目地址是：https://github.com/ESnail/wx.git