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

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

　　

　　簡介：一套用來開發在手機微信上運行的app框架，不用安裝

　　組成：結構文件wxml、樣式文件wxss、js文件

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

　　說明：支持雙向數據綁定、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

?

轉載于:https://www.cnblogs.com/EnSnail/p/7727842.html

總結

以上是生活随笔為你收集整理的微信小程序 - 实战小案例 - 简易记事本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。