31选7开奖结果查询 www.vk1c.com.cn 31选7开奖结果查询 > 上网技巧 > 电脑小技巧 > 微信小程序记事本实战开发教程

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

时间:2018-06-12 14:10 作者:QQ地带 我要评论

本次要在微信小程序上实战开发一款简易笔记本。首先中找到工具,然后从“微信开发者工具”链接进入,下载开发者工具,之后安装。安装好后,用手机微信确定登录后,就可以创建项目了。如何创建可参照简易教程。
 
简易记事本 - 主要功能:
 
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);
}

标签: 微信
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告

132| 581| 159| 119| 999| 377| 970| 276| 236| 347|