逆战之微信小程序云开发

概述 :

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

目前提供三大基础能力支持:

  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

  • 数据库:一个既可在小程序前端操作,也能在云函数中读写的

  • JSON 数据库 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

创建项目:

新建项目选择一个空目录,填入 AppID(使用云开发能力必须填写 AppID),勾选创建 “云开发 QuickStart 项目”,点击创建即可得到一个展示云开发基础能力的示例小程序。

开通云服务:

点击云开发 , 打开云开发控制台,云开发控制台提供如下能力(云函数中对数据库的操作等同于在控制台直接操作数据库)
在这里插入图片描述

  • 概览:查看云开发基础使用数据
  • 用户管理:查看小程序用户信息
  • 数据库:管理数据库,可查看、增加、更新、查找、删除数据、管理索引、管理数据库访问权限等
  • 存储管理:查看和管理存储空间
  • 云函数:查看云函数列表、配置、日志和监控
  • 统计分析:查看云开发资源具体使用统计信息

基础方法

小程序调用云函数示例:

// Callback 风格调用
wx.cloud.callFunction({
  // 要调用的云函数名称
  name: 'add',
  // 传递给云函数的参数
  data: {
    x: 1,
    y: 2,
  },
  success: res => {
    // output: res.result === 3
  },
  fail: err => {
    // handle error
  },
  complete: () => {
    // ...
  }
})
 
// Promise 风格调用
wx.cloud.callFunction({
  // 要调用的云函数名称
  name: 'add',
  // 传递给云函数的event参数
  data: {
    x: 1,
    y: 2,
  }
}).then(res => {
  // output: res.result === 3
}).catch(err => {
  // handle error
  })

小程序调用数据库示例:


// 1. 获取数据库引用
const db = wx.cloud.database()
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// where 方法传入一个对象,数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件(比如大于、小于、in 等),具体见文档查看支持列表
// get 方法会触发网络请求,往数据库取数据
db.collection('books').where({
publishInfo: {
country: 'United States'
}
}).get({
success: function(res) {
// 输出 [{ "title": "The Catcher in the Rye", ... }]
console.log(res)
}
})

小程序存储调用示例:

// 让用户选择一张图片
wx.chooseImage({
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: 'my-photo.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
// 成功回调
success: res => {
console.log('上传成功', res)
},
})
},
})

云函数的定义:


// index.js 是入口文件,云函数被调用时会执行该文件导出的 main 方法
// event 包含了调用端(小程序端)调用该函数时传过来的参数,同时还包含了可以通过 getWXContext 方法获取的用户登录态 `openId` 和小程序 `appId` 信息
const cloud = require('wx-server-sdk')
exports.main = (event, context) => {
const {userInfo, a, b} = event
const {OPENID, APPID} = cloud.getWXContext() // 这里获取到的 openId 和 appId 是可信的
const sum = a + b
 
return {
OPENID,
APPID,
sum
}
}

云函数中操作数据库

以下调用获取默认环境的数据库的引用:

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

假设有一个环境名为 test,用做测试环境,那么可以如下获取测试环境数据库:

const cloud = require('wx-server-sdk')
cloud.init()
const testDB = cloud.database({
env: 'test'
})

也可以通过 init 传入默认环境的方式使得获取数据库时默认是默认环境数据库:

const cloud = require('wx-server-sdk')
cloud.init({
env: 'test'
})
const testDB = cloud.database()

操作集合:

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const todosCollection = db.collection('todos') // 获取todos集合

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是基于uniapp的H5视频播放器跳转到微信小程序的代码: 1. 在需要跳转小程序的页面中添加一个按钮,点击按钮可以跳转到小程序: ``` <template> <div> <video ref="videoPlayer" src="https://xxx.com/xxx.mp4"></video> <button @click="navigateToMiniProgram">跳转到小程序</button> </div> </template> <script> import uni from '@/utils/uni.js' // 导入uni对象 export default { methods: { navigateToMiniProgram() { uni.navigateToMiniProgram({ appId: '小程序的appid', path: '要跳转的小程序页面路径', success(res) { console.log('跳转成功', res); }, fail(err) { console.log('跳转失败', err); } }); } }, mounted() { // 获取video标签 const video = this.$refs.videoPlayer; // 监听播放事件 video.addEventListener('play', () => { console.log('开始播放'); }); // 监听暂停事件 video.addEventListener('pause', () => { console.log('暂停播放'); }); } } </script> ``` 2. 在微信小程序中创建一个与H5页面对应的页面,并在该页面中添加一个视频播放器,播放器的视频来源与H5页面一致。示例代码如下: ``` <video src="https://xxx.com/xxx.mp4"></video> ``` 3. 在微信小程序中添加一个按钮,点击按钮可以返回H5页面。示例代码如下: ``` <button @tap="navigateBack">返回H5页面</button> ``` 4. 在微信小程序中添加跳转到H5页面的方法,示例代码如下: ``` navigateBack() { wx.navigateTo({ url: '/pages/h5/index' }); } ``` 注意: - 在 H5 页面中无法直接调起微信小程序,需要用户手动点击触发跳转。 - 在微信小程序中,需要使用 `wx.navigateTo` 跳转到H5页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值