七天学习微信小程序开发（二）—— 学习笔记（三）

微信小程序云开发——云函数

云函数介绍

云函数定义：运行在（腾讯云）上的程序，将需要的函数部署在云开发平台上，即可实现随处使用的特点

云函数特性：

• 操作权限高（一次可删除多条记录）

• 突破网络限制（icp/http）

云函数的使用步骤

• 第一步：使用小程序开发工具创建云函数（cloudfunctions文件夹右键点击选择新建node.js云函数）
• 第二步：在新建好的文件夹中的index.js中写入函数的具体实现，完成后保存
• 第三步：右键点击该文件夹选择（上传并部署：云端安装依赖）
• 第四步：在云函数控制面板中对云函数进行测试
• 第五步：在小程序中调用云函数

云函数的具体使用

注意：云函数要求本地的node.js版本在8.0以上

示例：部署求两个整数和的云函数

依据上述步骤创建sum文件夹，在该文件夹下的index.js中写入如下代码：

// 云函数入口函数
/**
exports.main 创建主函数并且向外导出
async       异步执行
event       事件对象,接收参数
context      上下对象:当前微信用户信息
 */
// i+j需要两个参数，这两个参数保存在event中
exports.main = async (event, context) => {
  return{
    "sum":event.i+event.j 
  }
}

这里的index.js中会自动生成函数模板，这里根据需要删除自动生成的代码，添加自己的函数实现即可。

依据步骤在云端部署函数后，在界面组件中使用该函数，代码如下：

add: function () {
    wx.cloud.callFunction({//js界面中调用云函数的接口
        name: "sum",//云函数的名称
        data: {//向云函数sum中传递的值
          i: 1,
          j: 2
        }
      })
        .then(res => {//调用成功的回调函数
        console.log(res);
    })
        .catch(err => {//调用失败的回调函数
        console.log(err);
    })
},

通过云函数操作数据库

根据步骤创建函数，在函数的index.js下写入函数实现：

index.js代码如下：（示例数据库删除操作，其他操作类似）

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

cloud.init()
//创建数据库对象
const db=cloud.database();
// 云函数入口函数
/**
async ES7 语法(异步)
await ES7 语法(等待)
*/
exports.main = async (event, context) => {
  try{
    return await db.collection("test")//指定操作数据库的名称
     //这里是固定删除age=33的记录，也可将其写活
    .where({age:33}).remove();
  }catch(e){
    console.log(e)
  }
}

微信小程序云开发——云存储

云存储功能：存储本地文件到网络磁盘

可以根据需求修改文件名和后缀

操作步骤

• 第一步：在组件中绑定上传图片的事件
• 第二步：事件的具体实现
• 第三步：点击按钮上传图片

只上传一张图片的实现代码如下：

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")//利用数据库保存图片
              .add({//向数据库中插入图片的云存储路径
                data: {
                  imgID: res.fileID//保存上传图片的云存储路径
                }
              })
              .then(res => {
                console.log(res)
              })
              .catch(err => {
                console.log(err)
              })
          })
        })
      }
    })
},

上述操作可以实现图片的上传并将图片的唯一标识保存在数据库中，同时后期可利用数据库的查询功能将图片显示在小程序界面中。

上传多张图片的实现代码如下：

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)})
            })
          })
        }       
      }
    })
},

微信小程序云开发——第三方组件vant

使用第三方组件库的步骤

• 第一步：创建项目描述文件package.json

  • 右键点击miniprogram目录选择"在终端中打开"

  • 在终端界面输入命令npm init（一直按回车键直到结束）

    注意：npm init 命令生项目描述文件 package.json

• 第二步：安装第三方UI库

  • 右键点击miniprogram 目录选择"在终端中打开"
  • 在终端界面输入命令npm i vant-weapp -S --production下载第三方模块vant-weapp

• 第三步：在微信开发工具的菜单栏点击工具菜单选择构键npm（将下载的模块内容复制文件miniprogram_npm）

• 第四步：在微信开发工具的菜单栏点击设置菜单选择项目设置，在本地设置标签下勾选使用npm模块

• 第五步：选择需要的组件，复制配置信息到当前组件下的.json文件下，如"van-button": "path/to/vant-weapp/dist/button/index"该行代码还需修改部分才可引入第三方组件

  具体实现如下代码所示：

  {
    "usingComponents": {
      "van-button": "vant-weapp/button/index"
    }
  }
  

• 第六步：直接复制代码在当前组件中显示即可

  示例代码如下(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：有赞团队开发的组件库

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/

微信小程序云开发——实例：豆瓣电影列表

豆瓣网：提供开放接口（获取网页JSON数据）

发送请求	小程序端	云函数
发送方式	wx.request({})	第三方ajax request
协议支持	只支持https	根据第三方决定
是否备案	经过ICP备案	可以不备案
域名个数限制	20个域名	无限

注意：不同云函数之间第三方库不能共享

安装依赖与第三方库

• 第一步，创建云函数（与上述相同）

• 第二步，在当前云函数安装第三方ajax库（安装方法如下）

  • 第一步：右键刚刚创建好的云函数，选择在终端打开

  • 第二步：按下面命令顺序安装依赖

    npm install -S request     #安装依赖库
    npm install -S request-promise  #ajax库
    

• 第三步，在index.js文件中实现函数

  实现代码如下：

  // 云函数入口文件
  const cloud = require('wx-server-sdk')
  cloud.init()
  //功能：利用reques-promise第三方库，发送请求获取响应结果
  const rp = require("request-promise");//引入第三方库
  // 云函数入口函数
  exports.main = async (event, context) => {
    //start表示从第几个开始，count表示有几个数据
    var url = `API`;//填写相关的API的url
    url += `?apikey=`;//网站提供的API钥匙
    url += `&${event.start}`;
    url += `&${event.count}`;
    //发送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、没有上传成功

实现完成后，在新建的pages组件中的js中引入云函数

loadMore: function () { //功能：调用云函数完成数据加载
    //调用云函数
    wx.cloud.callFunction({
        name: 'movie',
        data: {//从第1页开始，设置需要使用的条数，这里选择4条
          start: 0,
          count: 4
        }
      })
      .then(res => {
        // string转JS对象
        var rows=JSON.parse(res.result)
        this.setData({//将需要的信息放在list数组中
          list:rows.subjects
        })
        console.log(this.data.list)
      })
      .catch(err => {
        console.log(err)
      })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    this.loadMore()//当页面加载时，调用函数获取API的数据
  },

根据需求编写wxml文件和wxss文件。

根据页面显示界面，当用户点击"详情"按钮时跳转到该电影的详细信息（属性名：comment），将电影的id传递到comment组件并且接收。

首先，在wxml页面中的详情标签上添加绑定事件，设置自定义属性，代码如下。

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

其次，在js页面中实现跳转功能并将当前电影的id值传入目标组件中，实现代码如下：

jumpComment:function(event){//点击详情按钮
    console.log(event)//打印event数组的详情
    var _id=event.target.dataset.id;
    wx.navigateTo({
      url: '/pages/comment/comment?id='+_id,
    })
  },

最后，创建一个新的云函数，实现将电影的详细信息获取下来，云函数中的部分实现代码如下：

//1.引入第三方库
const rp = require('request-promise')
// 云函数入口函数
exports.main = async (event, context) => {
  var url = `http://api.douban.com/v2/movie/subject/`;
  url += `${event.id}`;//获取关键值id
  url += `?apikey=填写apikey的值`;
  //发送请求
  return rp(url).then(res => {
    return res;
  }).catch(err => {
    console.log(err)
  })
}

电影详情(评论)功能实现

首先，在当前跳转的目标组件的js文件中，调用云函数，实现获取当前电影的详情信息，实现代码如下：

oadMore: function () { //功能：调用云函数moviedetail1712
    //1.获取用户选中的id值
    var id = this.data.movieId
    //2.显示数据加载提示框
    wx.showLoading({
      title: '正在加载....'
    })
    //3.调用云函数，获取详情信息
    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)
    })
  },

然后，在小程序的生命周期函数中调用该方法，由于是利用id的不同值获取不同的信息，所以这里还需将id值保存在当前组件中，实现代码如下：

/**
* 生命周期函数--监听页面加载
*/
  onLoad: function (options) {
    // console.log(options.id)
    //将电影列表跳转到exam05时，传递过来的id放在data中
    this.setData({
      movieId: options.id
    })
    this.loadMore();
  },

最后，根据需求编写相应的wxml文件即可。

拓展：

• 用户上滑屏幕加载下一页

  onReachBottom事件：向上滑动触底事件的处理函数，在该函数中可将start/count的值改变，得到第二页的数据并选择显示几条

• onPullDownRefresh事件：监听用户下拉刷新操作，默认值禁止刷新，设置开启"enablePullDownRefresh": true

• 数据库操作中，为每条记录添加del， 当用户点击 del 删除指定元素（可利用循环判断实现）

• 响应式布局：响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，面对不同分辨率设备灵活性强

  能够快捷解决多设备显示适应问题。

  Bootstraphttps://www.bootcss.com/

• 关于API的使用：个人觉得只要学会一种API的使用方法，那么再使用其他的API就不存在问题了。

关于各种API的资料

• 这里使用的云函数其实类似于前后端结合，当然也可以使用不同的框架来进行前后端分离（如：nodejs等）