【微信小程序云开发】笔记

获取AppID

云开发必须要有AppID,去链接(https://mp.weixin.qq.com/wxopen/waregister?action=step1)使用邮箱进行注册,注册后使用AppID在微信开发者工具进行新建。

云开发基本功能演示

新建

以下代码是新建时自动生成的样例,可:获取openid、上传图片、前端操作数据库、即时通信Demo、快速新建云函数、云调用。
在cloudfunctions/login右键,点击“创建并部署:云端安装依赖”,安装依赖后即可使用。


<view class="container">
  
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}" class="userinfo-opendata">
      <view class="userinfo-block-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl">open-data>
      view>
    block>
    <block wx:elif="{{!hasUserInfo}}">
      <button 
        wx:if="{{canIUseGetUserProfile}}" 
        bindtap="getUserProfile"
        class="userinfo-avatar"
        style="background-image: url({{avatarUrl}})"
        size="default"
      >button>
      <button
        wx:else
        open-type="getUserInfo" 
        bindgetuserinfo="onGetUserInfo"
        class="userinfo-avatar"
        style="background-image: url({{avatarUrl}})"
        size="default"
      >button>
    block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-block-avatar" src="{{avatarUrl}}" mode="cover">image>
    block>
    <view class="userinfo-nickname-wrapper">
      <button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openidbutton>
    view>
  view>
  
  <view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上传图片text>
    view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg">image>
    view>
  view>
  
  <view class="uploader">
    <navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
      <text>前端操作数据库text>
    navigator>
  view>
  
  <view class="uploader">
    <navigator url="../im/im" open-type="navigate" class="uploader-text">
      <text>即时通信 Demotext>
    navigator>
  view>
  
  <view class="uploader">
    <navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text">
      <text>快速新建云函数text>
    navigator>
  view>
  
  <view class="uploader">
    <navigator url="../openapi/openapi" open-type="navigate" class="uploader-text">
      <text>云调用text>
    navigator>
  view>
view>

注:

  • 每次更改代码都需要保存才能运行此处的更改。
  • 在每个请求中,都包含了用户的openid。
  • 上传的图片在云开发控制台->存储管理中。
  • 前端操作数据库:云开发控制台->数据库->添加集合->输入集合名。以下代码为提供的样例:
// pages/databaseGuide/databaseGuide.js
const app = getApp()
Page({
  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },
  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },
  //新增
  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
       // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })
  },

  //查询
  onQuery: function() {
    const db = wx.cloud.database()
    // 查询当前用户所有的 counters
    db.collection('counters').where({
      _openid: this.data.openid
    }).get({
      success: res => {
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2)
        })
        console.log('[数据库] [查询记录] 成功: ', res)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败:', err)
      }
    })
  },
//计数器+
  onCounterInc: function() {
    const db = wx.cloud.database()
    const newCount = this.data.count + 1
    db.collection('counters').doc(this.data.counterId).update({
      data: {
        count: newCount
      },
      success: res => {
        this.setData({
          count: newCount
        })
      },
      fail: err => {
        icon: 'none',
        console.error('[数据库] [更新记录] 失败:', err)
      }
    })
  },
  //计数器-
  onCounterDec: function() {
    const db = wx.cloud.database()
    const newCount = this.data.count - 1
    db.collection('counters').doc(this.data.counterId).update({
      data: {
        count: newCount
      },
      success: res => {
        this.setData({
          count: newCount
        })
      },
      fail: err => {
        icon: 'none',
        console.error('[数据库] [更新记录] 失败:', err)
      }
    })
  },
//删除计数器
  onRemove: function() {
    if (this.data.counterId) {
      const db = wx.cloud.database()
      db.collection('counters').doc(this.data.counterId).remove({
        success: res => {
          wx.showToast({
            title: '删除成功',
          })
          this.setData({
            counterId: '',
            count: null,
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '删除失败',
          })
          console.error('[数据库] [删除记录] 失败:', err)
        }
      })
    } else {
      wx.showToast({
        title: '无记录可删,请见创建一个记录',
      })
    }
  },

  nextStep: function () {
    // 在第一步,需检查是否有 openid,如无需获取
    if (this.data.step === 1 && !this.data.openid) {
      wx.cloud.callFunction({
        name: 'login',
        data: {},
        success: res => {
          app.globalData.openid = res.result.openid
          this.setData({
            step: 2,
            openid: res.result.openid
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '获取 openid 失败,请检查是否有部署 login 云函数',
          })
          console.log('[云函数] [login] 获取 openid 失败,请检查是否有部署云函数,错误信息:', err)
        }
      })
    } else {
      const callback = this.data.step !== 6 ? function() {} : function() {
        console.group('数据库文档')
        console.log('https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html')
        console.groupEnd()
      }

      this.setData({
        step: this.data.step + 1
      }, callback)
    }
  },

  prevStep: function () {
    this.setData({
      step: this.data.step - 1
    })
  },

  goHome: function() {
    const pages = getCurrentPages()
    if (pages.length === 2) {
      wx.navigateBack()
    } else if (pages.length === 1) {
      wx.redirectTo({
        url: '../index/index',
      })
    } else {
      wx.reLaunch({
        url: '../index/index',
      })
    }
  }
})
  • 新增云函数:在云函数根目录cloudfunctions右键选择新建云函数,命名,在sum/index.js中添加以下代码。保存后再sum目录右键选择上传并部署。调用云函数后可在云开发控制台->云函数->日志中查看调用详情;在云开发控制台->云函数->云函数列表中查看云函数列表。
// 云函数入口函数
exports.main = async (event, context) => {
  console.log(event)
  console.log(context)
  return {
    sum: event.a + event.b
  }
}

云开发API简介

API分类

按端分类:小程序端API+服务端API
按类型分类:数据存储API+文件存储API+云函数API

API初始化-小程序端

在首页的app.js中调用cloud.init。
env:环境id,traceUser:是否在控制台查看用户信息

wx.cloud.init({
env:'test-x1dzi',
traceUser:true
})

API初始化-服务端

需要先安装SDK:

npm install --save wx-server-sdk

安装完成后调用以下代码。其中,初始化选项env支持传入一个object,指定各个服务使用的默认环境。

const cloud = require('wx-server-sdk')
cloud.init({
  env: 'test-x1dzi'
 // env:{
 //  database:'xxx',
 //  storage:'xxx',
 //  functions:'xxx',
//}
})

API使用注意事项

  • 云开发API同时支持callback风格和promise风格,但只能选择一种
  • 云开发API初始化时如果没有设置ID,默认使用先创建的那个
  • 在服务端可以借助云开发SDK内置的getWXContext来获取到用户的身份信息

基础能力-数组查询

在wxml中写一个按钮,其操作需要写在js里:

<button bindtap="query">数组查询button>

为了测试,新建一个集合(取名data)和其中的几条记录(名为count)。
注意: 集合默认情况是仅管理员可读写,如果想要让用户可操作,需要在"数据权限"中进行更改。
初始化数据库实例:在js中写如下代码

const db=wx.cloud.database();
const _=db.command

编写button的js,如此点击按钮后会查询data集合中count记录in[1,3]的数据:

Page({
query:function(){
    console.log("Query")
    db.collection("data")
    .where({
      count:_.in([1,3])
    })
    .field({
      count:true,   //查询出来的数据只显示count这个字段
    })
    .get().then(console.log)    //根据条件查询数据,并打印出来
  },
  )}

正则表达式

db.RegExp对象
db.RegExp({
regexp:‘miniprogram’,
options:‘i’,
})
例子:

db.collection("data")
    .where({
      note: new db.RegExp({
      //如果是regexp:'测试',则找的是name的值含有'测试'的数据        
      	regexp:'测试[1-9]',   //找的是测试1,测试2....测试9
        options:'i',
      })
    .get().then(console.log)   
    })

基础能力-地理位置查询

写两个按钮,分别完成新增地点和地点查询:

<button bindtap="locationAdd">新增地点</button>
<button bindtap="locationQuery">地点查询</button>

在对应的js里写以下两个方法:

//查询位置
locationQuery:function(){
    console.log("locationQuery")
    db.collection('location').get().then(res=>{
      console.log(res.data[0].location.latitude)})   //查询纬度,可以查询res.data[0]看里面具体有什么
  },
//新增位置数据
   locationAdd(){
     db.collection('location').add({   //对location这个集合添加数据
       data:{
         location:db.Geo.Point(100.0012,10.0022)  //注意格式
       }
     }).then(res=>{
         console.log(res)
       })
     })
   },

基础能力-数据库权限管理-使用场景

  • 仅创建者可写,所有人可读:文章、评论、公开相册
  • 仅创建者可读写:私密相册、私密文章、重要账户信息
  • 仅管理端可写,所有人可读:系统公告、系统消息、商品
  • 仅管理端可读写:管理员信息、后台任务

基础能力-文件存储

**分为:**小程序直传、免费5G存储、免费5G加速、在线管理控制台、组件支持、权限控制
**位置:**在云开发控制台->存储里可查看。
使用:
上传图片后,在存储中复制其代码,使用即可显示图片:

<image src="cloud://xxxxx.png"></image>

基础能力-生成临时链接

在js的方法里写:

wx.cloud.getTempFileURL({
	fileList:['cloud://xxxxx'],  //注意是个数组
	success:res=>{
	console.log(res)}
})

基础能力-云函数定时器的使用

场景: 函数需要定时、定期执行时
使用: 在云函数目录下创建config.json文件,并设置触发器;上传触发器;
格式: 第一位到第七位分别为:秒、分钟、小时、日、月、星期、年
例子:
在云函数列表下的config.json中写以下代码,此处写的是每秒执行一次。

{
  "triggers":[
    {
    "name":"chufa",
    "type":"timer",
    "config":"* * * * * * *"   
  }
]
}

写好保存后,在云函数目录右键选择“上传触发器”。在日志中可查看调用情况。
如果不需要了,在云函数目录右键选择“删除触发器”,触发器则不会生效。

云待办-准备

需求分析: ToDo清单类型,提供任务的新增、查看、添加图片附件、查看地理位置、查看导航、消息通知题型、定时消息通知提醒等功能。
数据设计:

{
	//名称
	"title":"it is a title",  
	//状态
	"status":"done|in progress| abandon",  
	//地点(两条)
	"location":"宿舍",
	"location_gps":{
		'long':116,
		'lati':23
	},
	//图片
	"image":"url",
}

云待办-实现 添加ToDo

  • 新建一个小程序
  • 打开后删除一些多余的文件:cloudfunctions/login,miniprogram/style,miniprogram/image,
    删除app.json中所有的pages,删除miniprogram/pages的所有文件夹。
  • 在pages/下新建一个index文件夹。
  • 点击右上角的版本管理,创建git仓库
  • 引入vant ui:在miniprogram右键选择“在终端中打开”,输入npm i @vant/weapp -S --production,然后输入npm init -y。然后在右上角点击“详情”->“本地设置”,勾选“使用npm模块”。然后在左上角的“工具”中点击“构建npm”。
  • 使用vant:在app.json中加上引用,这样这个组件是全局引用的:
  "usingComponents": {
    "van-button":"@vant/weapp/button/index" //注意此处引用的路径一定要看官方文档,否则报错
  }

在index.wxml中使用:

<van-button type="primary">按鈕van-button>
  • 当代码有更改,想要更新版本时,可点击“版本控制”上传修改的代码
  • 修改title:去app.json修改"navigationBarTitleText"字段
  • 新建页面:在app.json中的“pages”添加新页面记录 “pages/addTodo/addTodo” ,保存后文件夹和文件会自动生成
  • 切换编译页面:在上面的编译模式中选择“添加编译模式”,修改编译名字和编译路径,点击确定,然后点击编译,则会切换到addTodo页面进行编译
  • 在wxml中:
<form bindsubmit="onSubmit">
<input name="title">input>
<button form-type="submit">提交button>   
form>
  • 在js中:首先初始化数据库调用,并写onSubmit方法:
const db=wx.cloud.database();
const todos = db.collection('todos')
Page({
  onSubmit:function(event){
    //用户输入的数据在event.detail.value.title中
    console.log(event)
    console.log(event.detail.value.title)
    //新增数据
    todos.add({
      data:{
        title:event.detail.value.title
      }
    }).then(res=>{
      //打印新增的数据库的数据
      console.log(res)
      //给用户提示已完成
      wx.showToast({
        title: 'Success',
        icon:'success',
      })
    })
  }
})

云待办-实现 查看所有ToDo

  • 使用cell单元格,先在app.json中引入:
"usingComponents": {
  "van-cell": "@vant/weapp/cell/index",
  "van-cell-group": "@vant/weapp/cell-group/index"
}
  • 在onLoad中编写获取数据列表的方法。
    注: onLoad是生命周期函数,会在页面加载时自动运行
 data:{
    tasks:null,
  },
  onLoad:function(options){
    this.getData();  //getData后面要加()!!!
  },
  //获取数据,把这个分离出来来方便复用
  //callback参数的作用是下拉刷新时,保证数据获取完后在停止下拉刷新
  getData:function(callback){
    if(!callback){
      callback=res=>{}
    }
    wx.showLoading({
      title: '数据加载中',
    })
    todos.skip(this.pageData.skip).get().then(res=>{
      let oldData=this.data.tasks;
      console.log(res)
      //把数据传给小程序端,tasks需要在data中定义
      this.setData({
        tasks:oldData.concat(res.data)
      })
      //下次从第20条数据开始读取
        this.pageData.skip=this.pageData.skip+20
       wx.hideLoading()
        callback();
      
    })
  },
  • 在wxml编写
<van-cell-group>

<block wx:for="{{tasks}}">
  <van-cell title="{{item.title}}"/>
block>

van-cell-group>
  • 实现下拉刷新:在json和js中分别添加:
 {
  "enablePullDownRefresh":true
}
//下拉刷新
  onPullDownRefresh:function(){
    //刷新时重置skip=0
      this.pageData.skip=0;
      this.data.tasks=[];
    //数据进行更新(数据获取完后在停止下拉刷新)
    this.getData(res=>{
      wx.stopPullDownRefresh();
    });
  },
  • 拉到页面底部时加载更多数据
//底部上拉加载更多数据
  onReachBottom:function(){
    this.getData();
  },
  • 分页,并在下拉刷新时重置skip=0、存放数据的数组为空数组[],在数据库获取数据时加上.skip(this.pageData.skip)、并在获取数据后设置skip数值+20即下次从再往后20个开始读(详见getData方法)
//不在页面中用的值就放在pageData
  pageData:{
  //从第0个数据开始读(分页)
    skip:0
  },

云待办-实现 查看ToDo详情

  • 创建新页面:在app.json中的pages加入新的一行,保存则会自动创建新页面
  • 在ToDo列表加上一层navigator,这样点击每行数据会跳转到刚刚新建的页面查看ToDo详情,跳转时会传递id:
<van-cell-group>
<!-- 使用block进行渲染 -->
<block wx:for="{{tasks}}" wx:key="key">
<navigator url="../todoInfo/todoInfo?id={{item._id}}">
  <van-cell title="{{item.title}}"/>
</navigator>
</block>
</van-cell-group>
  • 添加编译模式:因为跳转到新页面时需要传递id,所以不仅要填写名称和页面,还需要添加启动参数(点击列表数据跳转时,左下角可以选择页面参数,点击复制填入启动参数)
  • 修改js:根据id从数据库查询到值并赋值给data中的变量
const db=wx.cloud.database();
const todos = db.collection('todos')
Page({
  data: {
    task:{}
  },
  pageData:{
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //传入页面的值会在options中
    console.log(options);
    this.pageData.id = options.id
    //查询
    todos.doc(options.id).get().then(res=>{
      console.log(res);
      this.setData({
        task:res.data
      })
    })
  },
})
  • 修改wxml,显示查询的数据

<van-cell-group>
  <van-cell 
  title="{{task.title}}"
  value="{{task.status==='in-progress'?'待完成':'已完成'}}"
  />
van-cell-group>

云待办-实现 为ToDo添加图片

  • 使用icon图标:在app.json中添加引用

“van-icon”: “@vant/weapp/icon/index”

  • 设置按钮,实现点击后跳转页面
<view > 
  <navigator url="../addTodo/addTodo">
  <van-icon name="plus"/>
navigator>
view>
  • 在页面添加上传图片的按钮,并让上传的图片显示在页面上:
<block wx:if="{{image}}">
<image src="{{image}}">image>
block>
<button bindtap="selectImg">选择图片button>
<button form-type="submit">提交button>  
  • 在js中写方法
selectImg:function(e){
    wx.chooseImage({
      success:res=>{
        //res.tempFilePaths[0]为文件的临时路径
        console.log(res.tempFilePaths[0]);
        //开始上传图片
        wx.cloud.uploadFile({
          cloudPath:`${Math.floor(Math.random()*100000000)}.png`,  //注意这里的不是引号!
          filePath:res.tempFilePaths[0]
        }).then(res=>{
          console.log(res.fileID);
          //上传到表单中
          this.setData({
            image:res.fileID
          })
        })
      }
    })
  },
  onSubmit:function(event){
    todos.add({
      data:{
        title:event.detail.value.title,
        image:this.data.image
      }
    }).then(res=>{
      wx.showToast({
        title: 'Success',
        icon:'success',
        success:res2=>{
          wx.redirectTo({
            url:`../todoInfo/todoInfo?id=${res._id}`,//读取值的时候需要反引号!!
          })
        }
      })
    })
  },
  • 让跳转后的页面能显示上传的文字和图片
<image wx:if="{{task.image}}" src="{{task.image}}">image>

云待办-实现 给ToDo设置位置+查看导航

  • 获取授权,在app.json中添加:
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于任务的设定"
    }
  },
  • 在js里写方法:
pageData:{
    //从第0个数据开始读(分页)
    skip:0,
    locationObj:{}
  },
chooseLocation:function(e){
    wx.chooseLocation({
      success:res=>{
        console.log(res)
        let locationObj={
          latitude:res.latitude,
          longitude:res.longitude,
          name:res.name,
          address:res.address
        }
        this.pageData.locationObj=locationObj
      }
    })
  },
 //添加到数据库就不写了,仿照上一节图片的即可
  • 在页面中显示
<van-cell-group>
  <van-cell 
  wx:if="{{task.location}}"
  title="位置"
  icon="location"
  value="{{task.location.name}}"
  bind:click="viewLocation"
  />
van-cell-group>
  • 添加导航:给位置的< van-cell >的那里添加bind:click点击事件,js中的方法如下所示:
viewLocation:function(){
    wx.openLocation({
      latitude: this.data.task.location.latitude,
      longitude: this.data.task.location.longitude,
      name:this.data.task.location.name,
      address:this.data.task.location.address,
    })
  },

云待办-实现 消息提醒(暂不能实现)

  • 开通:在小程序网页选择小程序类目后,点击左侧的“订阅消息”,选用自己需要的,选好后得到模板ID。
  • 提交时发送模板消息:
    在wxml中添加report-submit;
    新建云函数(其名字需要与wx.cloud.callFunction中的name一致),在新建的云函数上右键点击“在终端中打开”,运行npm install wx-js-utils 。然后在云函数的index.js中添加以下信息(小程序id和密钥在小程序网页->开发管理->开发设置 中),添加完成后需要"上传并部署":
const cloud = require('wx-server-sdk')
const {
  WXMINIUser,
  WXMINIMessage
} = require('wx-js-utils');
//下面三项要去找对应的
const appId='wx4a472b47e24c0c56';
const secret='2a8abb8af684717cccbfc7eefb854937';
const template_id='3rOgGz21-_gnAj7k__X_0pvInAQNtzE761l7z19pclM'; //小程序模板ID
cloud.init()
//调用数据库
const db=wx.cloud.database();
const todos = db.collection('todos')

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
let wXMINIUser=new WXMINIUser({
  appId,
  secret
});
let access_token = await wXMINIUser.getAccessToken();
const touser='wxContext.OPENID';
const form_id=event.formId;

let task=await todos.doc(event.taskId).get();

//发送模板消息
let wXMINIMessage=new wXMINIMessage();
let result =await wXMINIMessage.sendMessage({
  access_token,
  touser,
  form_id,
  template_id,
  data:{
    //keyword是与模板消息包含的字段对应的
    keyword1:{
      value:task.data.title
    },
    keyword2:{
      value:task.data._id
    },
    keyword3:{
      value:task.data._id
    },
    keyword4:{
      value:task.data.location.address
    },
   
  },
   //点击模板消息后,跳转的页面
    page:`pages/todoInfo/todoInfo?id={{task.data._id}}`
});
return result;
}

在js中修改方法

 
wx.cloud.callFunction({
       name:'msgMe',
       data:{
         formId:event.detail.formId,
         taskId:res._id
       }
     })

云待办-实现 消息提醒(暂不能实现)

b站视频“小程序·云开发基础”视频6-10,未看

云函数应用-在云函数中查询数据

需要先对Cloud SDK进行初始化(在云函数的index.js)

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async(event,context)=>await db.collection('集合名').get()
  • 创建云函数,查询location集合中的所有数据
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('location').get();
}
  • 写个按钮和其对应的方法,在方法中调用云函数
<button bindtap="callFunction">调用云函数button>
//调用云函数
  callFunction:function(){
    wx.cloud.callFunction({
      //云函数名
      name:"queryData"
    }).then(console.log)
  },

云函数应用-在云函数中新增数据

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

exports.main = async (event, context) => {
  return await db.collection('location').add({
    data:{
      name:'func',
      description:'this is a demo'
    }
  });
}

云函数应用-在云函数中删除数据

//删除数据
exports.main = async (event, context) => {
  //doc():根据数据id来查询数据
  return await db.collection('location').doc('数据id').remove();
}

云函数应用-在云函数中编辑数据

//编辑数据
exports.main = async (event, context) => {
  return await db.collection('location').doc('数据id').update({
    data:{
      time:123,
      price:1
    }
  })
}

云函数应用-在云函数中使用存储资源

  • 上传文件:uploadFile
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  const fileStream=fs.createReadSream(path.join(__dirname,'demo.jpg'))
  return await cloud.uploadFile({
    cloudPath:'demo.jpg',
    fileContent:fileStream
  })
}
  • 下载文件downloadFile
exports.main = async (event, context) => {
const fileId='xxxx'
const res=await cloud.downloadFile({
  fileID,
})
const buffer=res.fileContent
return buffer.toString('utf8')
}
  • 获取文件临时链接getTempFileURL
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  //fileId在云开发->存储中
  const fileId=['	cloud://cloud1-1g8wfyw44e571ed5.636c-cloud1-1g8wfyw44e571ed5-1310514747/52398888.png']
  return await cloud.getTempFileURL({
    fileList:fileId
  })
}
  • 删除文件deleteFile
exports.main = async (event, context) => {
const fileIds=['xx','xxx']
const result=await cloud.deleteFile({
  fileList:fileIds,
})
return result.fileList
}

云函数应用-在云函数中通过HTTP访问第三方服务器

  • 原因:云函数中的请求不受小程序域名限制;云函数支持更多样化的请求方式
  • 新建云函数,并在云函数右击选择“在终端中打开”,执行npm install got,安装完成后可以在云函数的package.json文件中查看安装的包及其版本号。(注意:云函数更改后都需要进行上传及部署)。在云函数的index.js中编写:
const cloud = require('wx-server-sdk')
const got=require('got')
cloud.init()

exports.main = async (event, context) => {
  let response=await got('https://wechat.com')
  return response.body;
}

云函数应用-访问数据库

云函数-云开发下的用户管理

云开发提供的用户管理功能目前仅用于管理端的查看

实现用户信息的收集

<button 
open-type="getUserInfo"
bindgetuserinfo="onInfo">
获取用户信息button>
//获取用户信息
  onInfo:function(event){
    //得到用户信息
    console.log(event.detail.userInfo)
    //新增用户信息
    // db.collection('xx').add()
  },

云函数-在云函数中生成二维码

点击“生成二维码”的按钮后,二维码图片会显示出来。

<button bindtap="getQR">生成二维码button>
<image src="{{qr}}" style="width:750rpx;height:750rpx">image>
//生成二维码
  getQR:function(){
    wx.cloud.callFunction({
      name:'normalQr'
    }).then(res=>{
      console.log(res.result.fileID)
      this.setData({
        qr:res.result.fileID
      })
    })
  },

新建云函数normalQr,右键选择“在终端中打开”,运行npm install wx-js-utils ,写入:

const {
  WXMINIUser,
  WXMINIQR
} = require('wx-js-utils');

const appId = ''; // 小程序 appId,要更改
const secret = ''; // 小程序 secret
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
// 获取小程序码,A接口
let wXMINIUser = new WXMINIUser({
  appId,
  secret
});

let access_token = await wXMINIUser.getAccessToken();
let wXMINIQR = new WXMINIQR();
// 获取小程序二维码
let qrResult = await wXMINIQR.getQR({
  access_token,
  path: 'pages/index/index'
});
//return自己需要的
return await cloud.uploadFile({
  cloudPath:'normalQr.png',
  fileContent:qrResult
})
}

云函数-在云函数中生成小程序码

<button bindtap="getQR2">生成小程序码button>
//生成小程序码
  getQR2:function(){
    //该云函数会在把小程序码图片放在存储中
    wx.cloud.callFunction({
      name:'getCode'
    }).then(console.log)
  },

新建云函数getCode,右键选择“在终端中打开”,运行npm install wx-js-utils ,写入:

 const {
  WXMINIUser,
  WXMINIQR
} = require('wx-js-utils');

const appId = ''; // 小程序 appId,要更改
const secret = ''; // 小程序 secret
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  let wXMINIUser = new WXMINIUser({
    appId,
    secret
  });
  
  let access_token = await wXMINIUser.getAccessToken();
  let wXMINIQR = new WXMINIQR();

  let qrResult = await wXMINIQR.getMiniQRLimit({
    access_token,
    path: 'pages/index/index'
  });
  //return自己需要的
return await cloud.uploadFile({
  cloudPath:'qr.jpg',
  fileContent:qrResult
})
}

通用功能实现-云开发 发送短信验证码

使用前需要先申请

  • 短信账号:用来发送短信的账号
  • 短信前面:用来识别发信人的昵称
  • 短信模板:用来设定短信内容的模板
    【微信小程序云开发】笔记_第1张图片
    新建云函数,并右键点击“在终端中运行”,运行npm install qcloudsms_js,
//短信验证码
  sendSms:function(){
    wx.cloud.callFunction({
      name:'sendSms',
      data:{
        "code":123456
      }
    }).then(console.log)
  },
const cloud = require('wx-server-sdk')
cloud.init()
var QcloudSms=require('qcloudsms_js')

exports.main = async (event, context) => {
  let code=event.code
  //appid\appKey\templeteId和smsSign在腾讯云->短信中找对应的
  var appid = ''; 
  var appKey = ''; 
  //手机号
  var phone = '12345678910'
  //templeteId和smsSign在
  //短信模板id
  var templeteId=1234,
  //短信签名
  var smsSign='CCDD'
  var qcloudsms=QcloudSms(appid,appKey)
  //只给特定的一个人发
  var sender=qcloudsms.SmsSingleSender();
  sender.sendWithParam(
    86,phone,templeteId,[code],smsSign,'','',console.log
  )
  return {"msg":"ok"}
}

通用功能实现-云开发 邮件发送短信验证码

通用功能实现-云开发 微信支付下单支付

新建云函数,终端运行npm i tenpay

<button bindtap="payTest">支付button>
//微信支付
  payTest:function(){
    wx.cloud.callFunction({
      name:'ohmypayment'
    }).then(res=>{
      console.log(res)
      let result=res.result;
      wx.requestPayment({
        nonceStr: result.nonceStr,
        package: result.package,
        signType:result.signType,
        paySign: result.paySign,
        timeStamp: result.timeStamp,
        success:res=>{
          console.log("Succedd")
          //后续还需要标注订单完成
        },
        fail:error=>{
          console.error('Error')
        }
      })
    })
  },
const cloud = require('wx-server-sdk')
const tenpay=require('tenpay');
cloud.init()

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const config={
    appid:'',
    mchid:'',
    partnerKey:'',
    notify_url:''
  }
  const api=new tenpay(config);
  return await api.getPayParams({
    //商品编号
    out_trade_no:'',
    //商品描述
    body:'',
    //商品价格,单位是分
    total_fee:'1',
    openid:wxContext.OPENID
  })
}

通用功能实现-云开发 分享消息卡片

即为右上角的分享按钮(三个点)

  • 需要提前将所需数据放置在Page实例中,以确保分享时可用。
 onLoad: function() {
 //获取临时链接
    wx.cloud.getTempFileURL({
      fileList:['cloud://cloud1-1g8wfyw44e571ed5.636c-cloud1-1g8wfyw44e571ed5-1310514747/52398888.png']
    }).then(res=>{
      console.log(res.fileList[0].tempFileURL)
      this.pageData.imageUrl=res.fileList[0].tempFileURL
    })
 },
 pageData:{
    imageUrl:null
  },
  //分享卡片
  onShareAppMessage:function(){
    return{
      //分享时显示的title
      title:'title',
      //分享的路径
      path:'/pages/index/index',
      //分享时候显示的图片(通过云函数获取临时链接)
      imageUrl:this.pageData.imageUrl,
    }
  },

你可能感兴趣的:(总结,微信小程序,微信公众平台)