关于初次写微信小程序的注意事项（以简单的日历手账为实例）

一、环境配置

首先，制作微信小程序需要到官网https://mp.weixin.qq.com/注册账号并且下载微信开发者工具。

在官网完善小程序的信息，即可得到小程序AppID。在使用小程序·云开发需要使用此AppID。

打开新建的小程序，可以看到以下目录

在components文件夹下可以存放很多从github上下载的插件，比如日历插件等等。
pages下的index/index.html是我们这个小程序的默认的主页，一般初始化的小程序云开发index有获取openid和前端操作数据库的方法。

二、实例演示

以做一个手账小程序为例：

1.跳转页面

简单的手账要有主界面和一个添加事件的界面。
这两个页面的跳转需要用到wx.navigateTo(Object object)和wx.navigateBack(Object object)两个函数，实现页面的跳转和返回，这两个函数一般放在onLoad当中，

        bindViewTap: function() {
              wx.navigateTo({//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序中页面栈最多十层。
                    url: '../../..'
              })
        },
        /*
        bindViewTap: function() {
              wx.navigateBack({//关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
                    delta: 2//返回两层
              })
        },
        */

2.上传图片、图片预览、删除图片

上传图片

手账小程序当然也要有记录图片和文字的功能，这里先说一下上传图片的功能。
首先，通过小程序·云开发的index界面我们不难发现有一个上传图片的功能，为了方便写出预览和删除图片的功能，这里先对上传图片的代码做一些解释：

        // 上传图片
        doUpload: function () {
        // 选择图片
        wx.chooseImage({
              count: 1,//一次性上传的图片的数量
              sizeType: ['compressed'],//指定是原图还是缩略图，这里是缩略图，默认两者都有
              sourceType: ['album', 'camera'],//从相机或者图库获取图片，默认两者都有
              success: function (res) {//接口调用成功执行的函数
                    //显示加载提示框
                    wx.showLoading({
                    title: '上传中',
                    })
                    //
                    const filePath = res.tempFilePaths[0]//获取上传的图片路径，这里是选择图片返回的临时地址
    
                     // 上传图片
                     const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]//正则表达式获取文件扩展名
                     wx.cloud.uploadFile({
                           cloudPath,//云服务器路径
                           filePath,//图片路径
                           success: res => {
                                 console.log('[上传文件] 成功：', res)//在控制台返回文件上传成功的信息，可以用于后期在调试器的Console中调试
                                 //获取图片的文件ID和云文件路径
                                 app.globalData.fileID = res.fileID
                                 app.globalData.cloudPath = cloudPath
                                 app.globalData.imagePath = filePath
                                 

                                 wx.navigateTo({//跳转到storageConsole.html页面，用于图片预览等等
                                       url: '../storageConsole/storageConsole'
                                 })
                           },
                           fail: e => {//在控制台返回上传失败的信息
                                 console.error('[上传文件] 失败：', e)
                                 wx.showToast({
                                 icon: 'none',
                                 title: '上传失败',
                           })
                           },
                           complete: () => {
                                 wx.hideLoading()//wx.hideLoading(Object object)用于隐藏 loading 提示框
                           }      
                     })

              },
              fail: e => {
                    console.error(e)//向调试面板中打印 error 日志
              }
        })
        },

图片预览

在上传图片的当前页面进行图片预览，暂时不需要调用数据库里的图片，废话不多说，直接上代码解析吧

.js

  //.js
  previewImage: function(e){
        wx.previewImage({
              current: e.currentTarget.id, // 当前显示图片的http链接
              urls: this.data.files // 需要预览的图片http链接列表
        })
  }

.wxml

  //.wxml
  <view class="container">
        <block wx:for="{{files}}" wx:key="*this"><!--循环遍历，显示出全部的预览图片-->
              <view class="list-item" bindtap="previewImage" id="{{item}}"><!--点击触发previewImage的函数-->
                    <image class="image1" src="{{item}}"mode="aspectFill" >//
                          <icon type='cancel' class="image_remove"  catchtap="removeImage"></icon>
                    </image>
              </view>
        </block>
  </view>

删除图片

.js

  //删除
  removeImage(e) {
        var files = this.data.files;
        var index = e.currentTarget.dataset.index;
        files.splice(index, 1);//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
        this.setData({
              files: files//替换改变后的图片组
        });
  },

currentTarget是事件绑定的当前组件。
dataset在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
setData函数主要用于将逻辑层数据发送到视图层

.html

  <icon type='cancel' class="image_remove"  catchtap="removeImage"></icon>

bindtap和 catchtap都属于点击事件，绑定之后，点击组件是可以触发这个函数的。
而bindtap在子元素绑定事件后，执行的时候会触发父元素上绑定的bingtap事件，catchtap则不会冒泡到父元素上。