多項技能,好像也不錯。學習一下微信小程序。css
教程:https://mp.weixin.qq.com/debug/wxadoc/dev/html
簡介:一套用來開發在手機微信上運行的app框架,不用安裝git
組成:結構文件wxml、樣式文件wxss、js文件github
備註:wxml 和html是同樣的,除了部分便籤不一致;wxss和css是同樣的;js同理json
說明:支持雙向數據綁定、ES6語法,遵循commonjs規範管理模塊小程序
首先在教程(https://mp.weixin.qq.com/debug/wxadoc/dev/)中找到工具,而後從「微信開發者工具」連接進入,下載開發者工具,以後安裝。安裝好後,用手機微信肯定登陸後,就能夠建立項目了。如何建立可參照簡易教程。微信小程序
簡易記事本 - 主要功能:數組
1. 列表展現微信
2. 新增/編輯微信開發
數據存儲在storage中
簡易記事本:
目錄結構 | 列表 | 新增/編輯 |
![]() |
![]() |
![]() |
在目錄結構中的app.json中配置路由及導航條的基本設置,其中pages數組中的第一個就是入口的路由頁面:
{ "pages": [ "pages/list/list", // 入口路由頁面 "pages/add/add" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "skyblue", "navigationBarTitleText": "簡易記事本", "navigationBarTextStyle": "#fff" } }
下面展現主要代碼:
list.wxml中的內容以下,add.wxml同理,就不展現了。至於wxss和css同樣,也不展現了。
<!--pages/list/list.wxml--> <view class='page'> <!-- 每一條文字 --> <scroll-view scroll-y='true' class='lists'> <block wx:for="{{lists}}" wx:key="*this.id"> <view class="list-i" bindtap="edit" data-id="{{item.id}}"> <view class="content">{{item.content}}</view> <view class='time'>建立時間:{{item.time}}</view> </view> </block> </scroll-view> <!-- 添加一條文字的按鈕 --> <view class='add' bindtap='add'> <image src='../../img/edit.png'></image> </view> </view>
設置storage使用:wx.setStorageSync(key, data), 獲取storage數據使用的是wx.getStorageSync(key)。
備註:還有一個wx.getStorageInfoSync(),這個是獲取storage的信息,而不包含設置的key的具體內容。我第一次就用錯了。
// list.js 初始化列表數據 function initData (page) { var arr = wx.getStorageSync('txt'); if (arr.length) { arr.forEach((item, i) => { var t = new Date(Number(item.time)); item.time = util.dateFormate(t); }) page.setData({ lists: arr }) } }
// add.js 獲取根據url中的id獲取編輯信息 function getData(id, page) { var arr = wx.getStorageSync('txt'); if (arr.length) { arr.forEach((item) => { if (item.id == id) { page.setData({ id: item.id, content: item.content }) } }) } } // 設置填寫的信息,分編輯、新增 function setValue(page) { var arr = wx.getStorageSync('txt'); var data = [], flag = true; if(arr.length) { arr.forEach(item => { if(item.id == page.data.id) { item.time = Date.now(); item.content = page.data.content; flag = false; } data.push(item); }) } if (flag) { data.push(page.data); } wx.setStorageSync('txt', data); }
小小的展現瞭如下,^_^
git項目地址是:https://github.com/ESnail/wx.git