微信小程序记事本实战开发教程
本次要在微信小程序上实战开发一款简易笔记本。首先中找到工具,然后从“微信开发者工具”链接进入,下载开发者工具,之后安装。安装好后,用手机微信确定登录后,就可以创建项目了。如何创建可参照简易教程。 简易记事本 - 主要功能: 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一样,也不展示了。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);} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |