一、环境配置

首先，制作微信小程序需要到官网注册账号并且下载微信开发者工具。
在官网完善小程序的信息，即可得到小程序AppID。在使用小程序·云开发需要使用此AppID。

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

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

二、实例演示

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

1.跳转页面

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

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

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

上传图片

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

        // 上传图片doUpload: function () {// 选择图片({count: 1,//一次性上传的图片的数量sizeType: ['compressed'],//指定是原图还是缩略图，这里是缩略图，默认两者都有sourceType: ['album', 'camera'],//从相机或者图库获取图片，默认两者都有success: function (res) {//接口调用成功执行的函数//显示加载提示框({title: '上传中',})//const filePath = [0]//获取上传的图片路径，这里是选择图片返回的临时地址// 上传图片const cloudPath = 'my-image' + (/\.[^.]+?$/)[0]//正则表达式获取文件扩展名({cloudPath,//云服务器路径filePath,//图片路径success: res => {('[上传文件] 成功：', res)//在控制台返回文件上传成功的信息，可以用于后期在调试器的Console中调试//获取图片的文件ID和云文件路径app.globalData.fileID = res.fileIDapp.globalData.cloudPath = cloudPathapp.globalData.imagePath = filePath({//跳转到页面，用于图片预览等等url: '../storageConsole/storageConsole'})},fail: e => {//在控制台返回上传失败的信息('[上传文件] 失败：', e)({icon: 'none',title: '上传失败',})},complete: () => {()//(Object object)用于隐藏 loading 提示框}      })},fail: e => {(e)//向调试面板中打印 error 日志}})},

图片预览

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

.js

  //.jspreviewImage: function(e){({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"><!--点击触发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() 方法向/从数组中添加/删除项目，然后返回被删除的项目。({files: files//替换改变后的图片组});},

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

.html

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

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