微信小程序记事本实战开发教程

2018-06-01 16:05

摘要:本次要在微信小程序上实战开发一款简易笔记本。首先中找到工具，然后从“微信开发者工具”链接进入，下载

本次要在微信小程序上实战开发一款简易笔记本。首先中找到工具，然后从“微信开发者工具”链接进入，下载开发者工具，之后安装。安装好后，用手机微信确定登录后，就可以创建项目了。如何创建可参照简易教程。

简易记事本 - 主要功能：

1. 列表展示

2. 新增/编辑

数据存储在storage中

width=555

目录结构列表新增/编辑
在目录结构中的app.json中配置路由及导航条的基本设置，其中pages数组中的第一个就是入口的路由页面：

{
pages: [
pages/list/list, // 入口路由页面
pages/add/add

],
window: {
backgroundTextStyle: light,
navigationBarBackgroundColor: skyblue,
navigationBarTitleText: 简易记事本,
navigationBarTextStyle: #fff
}
}
下面展示主要代码：
list.wxml中的内容如下，add.wxml同理，就不展示了。至于wxss和css一样，也不展示了。
class=\'page\'>
scroll-y=\'true\' class=\'lists\'>
wx:for={{lists}} wx:key=*this.id>
class=list-i bindtap=edit data-id={{item.id}}>
class=content>{{item.content}}
class=\'time\'>创建时间：{{item.time}}

class=\'add\' bindtap=\'add\'>
src=\'../../img/edit.png\'>
设置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);
}