微信小程序開發(fā)——學習筆記（三）

微信小程序云開發(fā)——云函數(shù)

云函數(shù)介紹

云函數(shù)定義：運行在（騰訊云）上的程序辱匿，將需要的函數(shù)部署在云開發(fā)平臺上遂黍，即可實現(xiàn)隨處使用的特點

云函數(shù)特性：

操作權(quán)限高（一次可刪除多條記錄）
突破網(wǎng)絡(luò)限制（icp/http）

云函數(shù)的使用步驟

第一步：使用小程序開發(fā)工具創(chuàng)建云函數(shù)（cloudfunctions文件夾右鍵點擊選擇新建node.js云函數(shù)）
第二步：在新建好的文件夾中的index.js中寫入函數(shù)的具體實現(xiàn)豹爹，完成后保存
第三步：右鍵點擊該文件夾選擇（上傳并部署：云端安裝依賴）
第四步：在云函數(shù)控制面板中對云函數(shù)進行測試
第五步：在小程序中調(diào)用云函數(shù)

云函數(shù)的具體使用

注意：云函數(shù)要求本地的node.js版本在8.0以上

示例：部署求兩個整數(shù)和的云函數(shù)

依據(jù)上述步驟創(chuàng)建sum文件夾赘艳，在該文件夾下的index.js中寫入如下代碼：

// 云函數(shù)入口函數(shù)
/**
exports.main 創(chuàng)建主函數(shù)并且向外導(dǎo)出
async       異步執(zhí)行
event       事件對象,接收參數(shù)
context      上下對象:當前微信用戶信息
 */
// i+j需要兩個參數(shù)，這兩個參數(shù)保存在event中
exports.main = async (event, context) => {
  return{
    "sum":event.i+event.j 
  }
}

這里的index.js中會自動生成函數(shù)模板吼拥，這里根據(jù)需要刪除自動生成的代碼，添加自己的函數(shù)實現(xiàn)即可线衫。

依據(jù)步驟在云端部署函數(shù)后凿可，在界面組件中使用該函數(shù)，代碼如下：

add: function () {
    wx.cloud.callFunction({//js界面中調(diào)用云函數(shù)的接口
        name: "sum",//云函數(shù)的名稱
        data: {//向云函數(shù)sum中傳遞的值
          i: 1,
          j: 2
        }
      })
        .then(res => {//調(diào)用成功的回調(diào)函數(shù)
        console.log(res);
    })
        .catch(err => {//調(diào)用失敗的回調(diào)函數(shù)
        console.log(err);
    })
},

通過云函數(shù)操作數(shù)據(jù)庫

根據(jù)步驟創(chuàng)建函數(shù)授账，在函數(shù)的index.js下寫入函數(shù)實現(xiàn)：

index.js代碼如下：（示例數(shù)據(jù)庫刪除操作枯跑，其他操作類似）

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')

cloud.init()
//創(chuàng)建數(shù)據(jù)庫對象
const db=cloud.database();
// 云函數(shù)入口函數(shù)
/**
async ES7 語法(異步)
await ES7 語法(等待)
*/
exports.main = async (event, context) => {
  try{
    return await db.collection("test")//指定操作數(shù)據(jù)庫的名稱
     //這里是固定刪除age=33的記錄，也可將其寫活
    .where({age:33}).remove();
  }catch(e){
    console.log(e)
  }
}

微信小程序云開發(fā)——云存儲

云存儲功能：存儲本地文件到網(wǎng)絡(luò)磁盤

可以根據(jù)需求修改文件名和后綴

操作步驟

第一步：在組件中綁定上傳圖片的事件
第二步：事件的具體實現(xiàn)
第三步：點擊按鈕上傳圖片

只上傳一張圖片的實現(xiàn)代碼如下：

uploadimg: function () {
    //選擇圖片
    wx.chooseImage({
      count: 1, //選中一張圖片白热，一次選擇上傳幾張圖片默認為9張
      sizeType: ['original', 'compressed'], //圖片類型 原圖/壓縮圖
      sourceType: ['album', 'camera'], //圖片來源 相冊/相機
      success: result => { //選中圖片成功
        // tempFilePath可以作為img標簽的src屬性顯示圖片
        // console.log(res.tempFilePaths["0"])
        // const tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({//上傳圖片
          cloudPath: new Date().getTime() + ".jpg",//新文件名稱敛助，采用時間戳命名文件
          filePath: result.tempFilePaths[0],//選中文件名稱
          success: (res => {
            console.log('上傳成功', res)
            db.collection("myImg")//利用數(shù)據(jù)庫保存圖片
              .add({//向數(shù)據(jù)庫中插入圖片的云存儲路徑
                data: {
                  imgID: res.fileID//保存上傳圖片的云存儲路徑
                }
              })
              .then(res => {
                console.log(res)
              })
              .catch(err => {
                console.log(err)
              })
          })
        })
      }
    })
},

上述操作可以實現(xiàn)圖片的上傳并將圖片的唯一標識保存在數(shù)據(jù)庫中，同時后期可利用數(shù)據(jù)庫的查詢功能將圖片顯示在小程序界面中棘捣。

上傳多張圖片的實現(xiàn)代碼如下：

uploadimg: function () {
    //選擇圖片
    wx.chooseImage({
      count: 3, //選中一張圖片
      sizeType: ['original', 'compressed'], //圖片類型 原圖/壓縮圖
      sourceType: ['album', 'camera'], //圖片來源 相冊/相機
      success: result => { //選中圖片成功
        // tempFilePath可以作為img標簽的src屬性顯示圖片
        // console.log(res.tempFilePaths["0"])
        // const tempFilePaths = res.tempFilePaths
        for (let i = 0; i <3; i++) {
          console.log(i)          
          wx.cloud.uploadFile({
            cloudPath: new Date().getTime() + ".jpg",
            filePath: result.tempFilePaths[i],
            success: (res => {console.log('上傳成功', res)
              db.collection("myImg").add({data: {imgID: res.fileID}})
              .then(res => {console.log(res)})
              .catch(err => {console.log(err)})
            })
          })
        }       
      }
    })
},

微信小程序云開發(fā)——第三方組件vant

使用第三方組件庫的步驟

第一步：創(chuàng)建項目描述文件package.json
- 右鍵點擊miniprogram目錄選擇"在終端中打開"
- 在終端界面輸入命令npm init（一直按回車鍵直到結(jié)束）
  
  注意：npm init 命令生項目描述文件 package.json
第二步：安裝第三方UI庫
- 右鍵點擊miniprogram 目錄選擇"在終端中打開"
- 在終端界面輸入命令npm i vant-weapp -S --production下載第三方模塊vant-weapp
第三步：在微信開發(fā)工具的菜單欄點擊工具菜單選擇構(gòu)鍵npm（將下載的模塊內(nèi)容復(fù)制文件miniprogram_npm）
第四步：在微信開發(fā)工具的菜單欄點擊設(shè)置菜單選擇項目設(shè)置辜腺，在本地設(shè)置標簽下勾選使用npm模塊
第五步：選擇需要的組件，復(fù)制配置信息到當前組件下的.json文件下乍恐，如"van-button": "path/to/vant-weapp/dist/button/index"該行代碼還需修改部分才可引入第三方組件

具體實現(xiàn)如下代碼所示：
```
{
  "usingComponents": {
    "van-button": "vant-weapp/button/index"
  }
}
```

第六步：直接復(fù)制代碼在當前組件中顯示即可

示例代碼如下(exam.wxml)：

<van-button plain hairline type="primary">細邊框按鈕</van-button>
<van-button plain hairline type="info">細邊框按鈕</van-button>
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

第三方樣式庫(組件庫)

Vant Weapp：有贊團隊開發(fā)的組件庫（小程序/vue）

vue版本：https://youzan.github.io/vant/#/zh-CN/intro

小程序版本：https://youzan.github.io/vant-weapp/#/intro

其他組件庫：

iview：http://v1.iviewui.com/components/rate

weUI：https://weui.io/

微信小程序云開發(fā)——實例：豆瓣電影列表

豆瓣網(wǎng)：提供開放接口（獲取網(wǎng)頁JSON數(shù)據(jù)）

發(fā)送請求	小程序端	云函數(shù)
發(fā)送方式	wx.request({})	第三方ajax request
協(xié)議支持	只支持https	根據(jù)第三方?jīng)Q定
是否備案	經(jīng)過ICP備案	可以不備案
域名個數(shù)限制	20個域名	無限

注意：不同云函數(shù)之間第三方庫不能共享

云函數(shù)安裝第三方庫

第一步，創(chuàng)建云函數(shù)（與上述相同）
第二步测砂，在當前云函數(shù)安裝第三方ajax庫（安裝方法如下）
- 第一步：右鍵剛剛創(chuàng)建好的云函數(shù)茵烈，選擇在終端打開
- 第二步：按下面命令順序安裝依賴
```
npm install -S request     #安裝依賴庫
npm install -S request-promise  #ajax庫
```

第三步，在index.js文件中實現(xiàn)函數(shù)

實現(xiàn)代碼如下：

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//功能：利用reques-promise第三方庫砌些，發(fā)送請求獲取響應(yīng)結(jié)果
const rp = require("request-promise");//引入第三方庫
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  //start表示從第幾個開始呜投，count表示有幾個數(shù)據(jù)
  var url = `API`;//填寫相關(guān)的API的url
  url += `?apikey=`;//網(wǎng)站提供的API鑰匙
  url += `&${event.start}`;
  url += `&${event.count}`;
  //發(fā)送ajax請求，這里有兩個return語句
  return rp(url).then(res => {return res;}).catch(err=>{console.log(err)})
}

常見錯誤：

1存璃、request-promise沒有安裝成功（Cannot find module 'request - promise'）

2仑荐、url拼寫錯誤

3、沒有上傳成功

實現(xiàn)完成后纵东，在新建的pages組件中的js中引入云函數(shù)

loadMore: function () { //功能：調(diào)用云函數(shù)完成數(shù)據(jù)加載
    //調(diào)用云函數(shù)
    wx.cloud.callFunction({
        name: 'movie',
        data: {//從第1頁開始，設(shè)置需要使用的條數(shù)，這里選擇4條
          start: 0,
          count: 4
        }
      })
      .then(res => {
        // string轉(zhuǎn)JS對象
        var rows=JSON.parse(res.result)
        this.setData({//將需要的信息放在list數(shù)組中
          list:rows.subjects
        })
        console.log(this.data.list)
      })
      .catch(err => {
        console.log(err)
      })
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
    this.loadMore()//當頁面加載時著瓶，調(diào)用函數(shù)獲取API的數(shù)據(jù)
  },

根據(jù)需求編寫wxml文件和wxss文件。

根據(jù)頁面顯示界面辑甜，當用戶點擊"詳情"按鈕時跳轉(zhuǎn)到該電影的詳細信息（屬性名：comment），將電影的id傳遞到comment組件并且接收袍冷。

首先磷醋，在wxml頁面中的詳情標簽上添加綁定事件，設(shè)置自定義屬性胡诗，代碼如下邓线。

<view class="movie-comment" bindtap="jumpComment" data-id="{{item.id}}">詳情</view>

其次，在js頁面中實現(xiàn)跳轉(zhuǎn)功能并將當前電影的id值傳入目標組件中煌恢，實現(xiàn)代碼如下：

jumpComment:function(event){//點擊詳情按鈕
    console.log(event)//打印event數(shù)組的詳情
    var _id=event.target.dataset.id;
    wx.navigateTo({
      url: '/pages/comment/comment?id='+_id,
    })
  },

最后褂痰，創(chuàng)建一個新的云函數(shù)，實現(xiàn)將電影的詳細信息獲取下來症虑，云函數(shù)中的部分實現(xiàn)代碼如下：

//1.引入第三方庫
const rp = require('request-promise')
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  var url = `http://api.douban.com/v2/movie/subject/`;
  url += `${event.id}`;//獲取關(guān)鍵值id
  url += `?apikey=填寫apikey的值`;
  //發(fā)送請求
  return rp(url).then(res => {
    return res;
  }).catch(err => {
    console.log(err)
  })
}

電影詳情(評論)功能實現(xiàn)

首先缩歪，在當前跳轉(zhuǎn)的目標組件的js文件中，調(diào)用云函數(shù)谍憔，實現(xiàn)獲取當前電影的詳情信息匪蝙，實現(xiàn)代碼如下：

oadMore: function () { //功能：調(diào)用云函數(shù)moviedetail1712
    //1.獲取用戶選中的id值
    var id = this.data.movieId
    //2.顯示數(shù)據(jù)加載提示框
    wx.showLoading({
      title: '正在加載....'
    })
    //3.調(diào)用云函數(shù)，獲取詳情信息
    wx.cloud.callFunction({
      name: 'moviedetail1712',
      data: {
        id: id
      }
    }).then(res => {
      console.log(res)
      var obj = JSON.parse(res.result)
      console.log(obj)
      //5.將獲取到的電影詳情信息保存到data的detail中
      this.setData({
        detail: obj
      })
      //6.隱藏加載提示框
      wx.hideLoading();
    }).catch(err => {
      console.log(err)
    })
  },

然后习贫，在小程序的生命周期函數(shù)中調(diào)用該方法逛球，由于是利用id的不同值獲取不同的信息，所以這里還需將id值保存在當前組件中苫昌，實現(xiàn)代碼如下：

/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
  onLoad: function (options) {
    // console.log(options.id)
    //將電影列表跳轉(zhuǎn)到exam05時颤绕，傳遞過來的id放在data中
    this.setData({
      movieId: options.id
    })
    this.loadMore();
  },

最后，根據(jù)需求編寫相應(yīng)的wxml文件即可祟身。

布局：電影圖片奥务、輸入框、用戶評論內(nèi)容袜硫、打分氯葬、獲取用戶評分值 0~5、上傳按鈕（利用第三方組件庫編寫）

拓展：

用戶上滑屏幕加載下一頁

onReachBottom事件：向上滑動觸底事件的處理函數(shù)婉陷，在該函數(shù)中可將start/count的值改變帚称，得到第二頁的數(shù)據(jù)并選擇顯示幾條
onPullDownRefresh事件：監(jiān)聽用戶下拉刷新操作，默認值禁止刷新秽澳，設(shè)置開啟"enablePullDownRefresh": true
數(shù)據(jù)庫操作中闯睹，為每條記錄添加<view>del</view>，當用戶點擊 del 刪除指定元素（可利用循環(huán)判斷實現(xiàn)）
響應(yīng)式布局：響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗担神，面對不同分辨率設(shè)備靈活性強

能夠快捷解決多設(shè)備顯示適應(yīng)問題楼吃。

Bootstraphttps://www.bootcss.com/
關(guān)于API的使用：個人覺得只要學會一種API的使用方法，那么再使用其他的API就不存在問題了。
這里使用的云函數(shù)其實類似于前后端結(jié)合所刀，當然也可以使用不同的框架來進行前后端分離（如：vue衙荐、nodejs等）