云开发必须要有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>
注:
// 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',
})
}
}
})
// 云函数入口函数
exports.main = async (event, context) => {
console.log(event)
console.log(context)
return {
sum: event.a + event.b
}
}
按端分类:小程序端API+服务端API
按类型分类:数据存储API+文件存储API+云函数API
在首页的app.js中调用cloud.init。
env:环境id,traceUser:是否在控制台查看用户信息
wx.cloud.init({
env:'test-x1dzi',
traceUser:true
})
需要先安装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',
//}
})
在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",
}
"usingComponents": {
"van-button":"@vant/weapp/button/index" //注意此处引用的路径一定要看官方文档,否则报错
}
在index.wxml中使用:
<van-button type="primary">按鈕van-button>
<form bindsubmit="onSubmit">
<input name="title">input>
<button form-type="submit">提交button>
form>
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',
})
})
}
})
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index"
}
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();
})
},
<van-cell-group>
<block wx:for="{{tasks}}">
<van-cell title="{{item.title}}"/>
block>
van-cell-group>
{
"enablePullDownRefresh":true
}
//下拉刷新
onPullDownRefresh:function(){
//刷新时重置skip=0
this.pageData.skip=0;
this.data.tasks=[];
//数据进行更新(数据获取完后在停止下拉刷新)
this.getData(res=>{
wx.stopPullDownRefresh();
});
},
//底部上拉加载更多数据
onReachBottom:function(){
this.getData();
},
//不在页面中用的值就放在pageData
pageData:{
//从第0个数据开始读(分页)
skip:0
},
<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>
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
})
})
},
})
<van-cell-group>
<van-cell
title="{{task.title}}"
value="{{task.status==='in-progress'?'待完成':'已完成'}}"
/>
van-cell-group>
“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>
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>
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于任务的设定"
}
},
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>
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,
})
},
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()
// 云函数入口文件
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
}
})
}
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
})
}
exports.main = async (event, context) => {
const fileId='xxxx'
const res=await cloud.downloadFile({
fileID,
})
const buffer=res.fileContent
return buffer.toString('utf8')
}
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
})
}
exports.main = async (event, context) => {
const fileIds=['xx','xxx']
const result=await cloud.deleteFile({
fileList:fileIds,
})
return result.fileList
}
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
})
}
使用前需要先申请
//短信验证码
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
})
}
即为右上角的分享按钮(三个点)
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,
}
},