一、環境配置

首先，製作微信小程式需要到官網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當中，

  onLoad: function (options) {
        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則不會冒泡到父元素上。