程序员计算机学习

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

2020-11-03  本文已影响0人  JCLightZZ

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

云函数介绍

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

云函数特性：

云函数的使用步骤

云函数的具体使用

注意：云函数要求本地的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

使用第三方组件库的步骤

第三方样式库(组件库)

Vant Weapp：有赞团队开发的组件库（小程序/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/

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

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

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

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

云函数安装第三方库

实现完成后，在新建的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文件即可。

布局：电影图片、输入框、用户评论内容、打分、获取用户评分值 0~5、上传按钮（利用第三方组件库编写）

拓展：

上一篇 下一篇

猜你喜欢

热点阅读