微信小程序学习记录——记事本Demo

Demo框架

使用微信开发者工具打开项目后，可以看到小程序的大概框架，项目文件架下由Pages，utils，app.*等文件夹及文件组成。

其中，app.json文件用于配置整个小程序的页面路径，窗口风格，导航和全局属性。utils文件夹 下用于存放通用组件。Pages文件夹下的每个子文件夹代表一个页面。list文件夹为Demo的主页，用于呈现记录的事件列表，在app.json文件配置时需要把这个路径写在第一个。add文件为记录事件时的编辑页面。

功能实现

这个记事本Demo实现的功能如下：

1. 点击按钮增加文本

2. 点击文本列表中的文本进行更改

3. 长按文件列表中的文本进行删除

4. 可以进行本地存储

   list.wxml是文件的视图层，list.js是文件的逻辑层。在逻辑层中，Page.data可以注册数据，然后视图层就可以通过{{属性名}}进行调用，视图层中各个组件的事件也在Page中进行注册。Demo用到的组件为view的列表呈现，在wx:for使用时，{{index}},{{item}}都是默认的，代表循环时的下标和元素。

<!--pages/list.wxml-->
<block wx:for="{{mylist}}">
  <view>
    <view bindtap="change" data-id="{{index}}" bindlongtap="remove" id="{{item.time}}" data-content="{{item.content}}">{{item.content}}</view>
  </view>
</block>
<button bindtap="add">添加事件</button>

事件绑定

blindtap为绑定的点击事件。bindlongtap为绑定的长按事件。在选定功能中，还需要每个文本对应的id和值。当视图层触发事件时，逻辑层对应的事件函数会收到一个事件对象，事件对象的currentTarget属性为当前组件的属性值集合，所以通过这个属性就可以拿到组件的id和值。组件属性data-*的值就对应currentTarget.dataset中对应的值。

增删改对应add,change,remove函数。

add:function(){
    wx.navigateTo({
      url: '../add/index',
    })
  },

  remove:function(e){
    let that = this
    wx.showModal({
      title: 'en~?',
      content:'确定要删除吗？',
      success:function(res){
        if(res.confirm){
          var arr = wx.getStorageSync('txt')
           arr.splice(e.currentTarget.dataset.id,1)
          wx.setStorageSync('txt', arr)
          that.onLoad()
        }else if(res.cancel) {
        } 
      }
    })
  },

  change:function(event){
  //console.log(event);  
  console.log(event.currentTarget.dataset.content); 
  wx.navigateTo({
    url: '../add/index?id=' + event.currentTarget.id + '&content=' +event.currentTarget.dataset.content,
  }) 
  },

数据传递

增和改函数都涉及到小程序页面间的数据传递，通过wx.navigateTo( )函数可以进行页面跳转和带参数跳转。在涉及跳转、刷新、数据初始化等操作时，都将使用到onload函数。带参数跳转时，在跳转页面的onLoad函数可通过一个options参数接到上一个页面传递过来的参数，属性名与传递时相同。
在刷新时，需要注意onLoad函数的作用域，不能直接用，需要引用指向

add页面注册onLoad函数如下

 onLoad: function (options) {
   console.log(this.data)
  this.setData({
    time:options.id,
    content:options.content
  });
  console.log(this.data)
},

add页面为编辑页面

<view><text>{{time}}</text></view
><view>
<input type="text" placeholder="请输入内容" bindinput="change" confirm-type="done" value="{{content}}"></input>
</view>
<view><button bindtap="additem">提交</button><button bindtap="cancel">取消</button></view>

逻辑页面注册的事件函数如下

 change:function(e){
      this.setData({content:e.detail.value})
 },
 additem:function(){
      var input =[];
      var flag = true;
      var arr = wx.getStorageSync('txt');
      //判断是否是新增数据
      if(!this.data.time){
        this.setData({
          time:(new Date()).valueOf()
        })
      }
      if(arr){
        var curtime = this.data.time
        var content = this.data.content
        arr.forEach(function(item){
          console.log('debug')
          console.log(item)
          //console.log(item.time+"===="+curtime)
          if(item.time == curtime){
            item.content = content
            flag = false
            wx.setStorageSync('txt', arr)
          } 
        })
        ;
        if(flag){
         arr.push(this.data)
         wx.setStorageSync('txt', arr)} 
      }else{
         input.push(this.data)
         wx.setStorageSync('txt', input) 
      }
      wx.navigateBack()
    },
 cancel:function(){
   wx.navigateBack({
     complete: (res) => {},
   })
 },