UNI-APP 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 本文为大家讲解如何采用云开发官方JS-SDK，接入云开发后端服务并支持UNI-APP全部端（不止于微信小程序） ​JS-SDK和UNI-APP适配器1.JS-SDK和适配器云开发官方提供的@cloudbase/js-sdk，主要用来做常规WEB、H5等应用（浏览器运行）的云开发资源调用，也是目前最为完善的客户端SDK。 目前市面上大部分的轻应用、小程序包括移动应用APP都是采用JS来作为开发语言的，所以我们可以对TA进行轻微改造，就可以轻松使用在各种平台中。 但是单独改造SDK包会有些许风险，比如在原SDK包升级时需要重新构造，就造成了无穷无尽的麻烦，改造成本相当大。 官方的产品小哥哥深知这种不适和痛苦，所以在@cloudbase/js-sdk 中提供一套完整的适配扩展方案，遵循此方案规范可开发对应平台的适配器，然后搭配 @cloudbase/js-sdk 和适配器实现平台的兼容性。 不了解的小伙伴肯定会有些茫然，我来用浅显的语言解释一下，就是@cloudbase/js-sdk 将底层的网络请求以及相关基础需求以接口的形式暴露出来，我们按照平台的特殊API来补充这些接口，sdk就可以根据这些补充的接口，无障碍的运行在平台中了。 如果我们想在UNI-APP中使用@cloudbase/js-sdk ，底层网络请求你需要来补充，因为sdk原本是适应浏览器的，TA不知道UNI-APP怎么对外发请求，所以你需要将uni.request 方法补充到TA暴露的接口中。补充完毕后，@cloudbase/js-sdk 就可以在UNI-APP中活泼的运行了。 我们将所有的uni方法全部补充到JS-SDK暴漏的接口中去，就形成了一个完整的适配器，我们将其成为uni-app适配器。 2.UNI-APP适配器UNI-APP的整体接口都是公开透明的，我们在开发UNI-APP时也都遵照同一套接口标准。所以小编已经将uni-app适配器制作完毕，大家只需要在使用时接入适配器就可以了。 我们在项目目录main.js中引入云开发JS-SDK，然后接入我们的UNI-APP适配器即可。 import cloudbase from '@cloudbase/js-sdk' import adapter from 'uni-app/adapter.js' cloudbase.useAdapters(adapter); cloudbase.init({  env: '',//云开发环境ID  appSign: '',//凭证描述  appSecret: {   appAccessKeyId: 1,//凭证版本   appAccessKey: ''//凭证  } }) 移动应用登录凭证云开发SDK在使用过程中，向云开发服务系统发送的请求都会需要验证请求来源的合法性。 我们常规 Web 通过验证安全域名，而由于 UNI-APP 并没有域名的概念，所以需要借助安全应用凭证区分请求来源是否合法。 登录云开发 CloudBase 控制台，在安全配置页面中的移动应用安全来源一栏：[图片] 点击“添加应用”按钮，输入应用标识：uni-app（也可以输入其他有标志性的名称），需要注意应用标识必须是能够标记应用唯一性的信息，比如微信小程序的 appId 、移动应用的包名等。[图片] 添加成功后会创建一个安全应用的信息，如下图所示：[图片] 我们需要保存一下上图中的版本（示例为1）、应用标识（示例为uni-app）、以及点击获取到的凭证（示例为demosecret） 在项目目录中，我们将main.js中的init部分补全 import cloudbase from '@cloudbase/js-sdk' import adapter from 'uni-app/adapter.js' cloudbase.useAdapters(adapter); cloudbase.init({  env: 'envid',//云开发环境ID，保证与你操作登录凭证一致  appSign: 'uni-app',//凭证描述  appSecret: {   appAccessKeyId: 1,//凭证版本   appAccessKey: 'demosecret'//凭证  } }) 如此，你就可以正常的进行云开发的登录使用了。 需要注意以下4点： 你需要设置uni-app的各端安全域名为：request：tcb-api.tencentcloudapi.com、uploadFile：cos.ap-shanghai.myqcloud.com、download：按不同地域配置使用此种方法接入云开发是全端支持，并不会享有微信小程序生态的一些便利，微信小程序开发还是需要依赖正常请求调用过程（将云开发作为服务器来对待），但你可以判断wx来使用wx.cloud来兼容。使用云开发的匿名登录时，受各端实际情况影响，可能不能作为常久唯一登录id，需要根据自身业务建立统一账户体系，具体可使用自定义登录来进行。UNI-APP支持WEB网页端上线时，需要将网页域名配置到云开发安全域名中（防止WEB下载文件导致跨域）示例代码详解示例项目中已经基本构建了uni-app使用云开发的各种流程代码。 在页面中进行匿名登录： // index.vue import cloudbase from '@cloudbase/js-sdk'  export default {   data() {    return {     title: '登录中'    }   },   onLoad() {    cloudbase.auth().anonymousAuthProvider().signIn().then(res => {     this.title = '匿名登录成功'    }).catch(err => {     console.error(err)    })   }  } 调用云函数并收到返回结果： import cloudbase from '@cloudbase/js-sdk' export default {  methods: {   call: function() {    cloudbase.callFunction({     name: "test",     data: {      a: 1     }    }).then((res) => {     console.log(res)    });   }  } } 操作数据库： import cloudbase from '@cloudbase/js-sdk' export default {  methods: {   database: function() {    cloudbase.database().collection('test').get().then(res => {     console.log(res)    })   }  } } 实时数据库监听： import cloudbase from '@cloudbase/js-sdk' export default {  methods: {   socket: function() {    let ref = cloudbase.database().collection('test').where({}).watch({     onChange: (snapshot) => {      console.log("收到snapshot", snapshot);     },     onError: (error) => {      console.log("收到error", error);     }    });   }  } } 上传文件（框架限制，WEB端无法操作）： import cloudbase from '@cloudbase/js-sdk' export default {  methods: {   upload: function() {    uni.chooseImage({     count: 1,     sizeType: ['original', 'compressed'],     sourceType: ['album'],     success: function(res) {      console.log(res.tempFilePaths[0])      cloudbase.uploadFile({       cloudPath: "test-admin.png",       filePath: res.tempFilePaths[0],       onUploadProgress: function(progressEvent) {        console.log(progressEvent);        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);       }      }).then((result) => {       console.log(result)      });     }    });   }  } } 下载文件（需要注意地域域名，配置安全域名）： import cloudbase from '@cloudbase/js-sdk' export default {  methods: {   download: function() {    cloudbase.downloadFile({     fileID: "cloud://demo-env-1293829/test-admin.png"    }).then((res) => {     console.log(res)    });   }  } } 部署步骤将项目下载后使用HBuilderX打开。按照获取移动安全凭证的指引，填写至mian.js相应处。打开目录命令行，npm i执行安装依赖。打开云开发控制台，开启匿名登录。新建一个默认的云函数，名称为test（逻辑内容直接返回event即可）新建一个数据库，名称为test（随便添加几个记录，设置权限为所有人可读）调整项目pages/index/index.vue中，21行代码，在登录成功后调用相应函数。以下是WEB端运行时展示：[图片] 关于uni-app适配器在util/adapter中，只进行了简单的测试，保证可用性，后续请关注官网获取最新适配器依赖此方法有别与uniCloud，是直接使用uni请求底层，依赖官方JS-SDK进行云开发服务的交互处理，在使用时注意区别。项目地址：https://github.com/AceZCY/UNI-for-CloudBase

作为年终总结，自然要回顾2020年，展望2021年，2020年于我而言是一个值得铭记的特殊一年 ~~ 进入12月份了，今天是进入12月份的第一个周末，2020年已进入倒计时，开这篇文章，总结下今年的的一些收获和感悟，本文会陆续更新到跨年的第一个周末 先列个提纲 今年计划我一向不会给自己立什么弗莱格，这样从侧面反映出我比较随意，自由，洒脱的个性，不喜欢受约束。 关注我的朋友知道我做答题小程序比较多，没错，目前我主要精力还是在打磨答题小程序以及会适当向答题周边辐射，比如答题之后的抽奖会衍生抽奖小程序，还有其他一些相关的，比如海报小程序，为此我开发了专门的海报生成小程序 2020年的两个主要目标 1）一个可以有用户自己创建试卷，自己上传题库的答题活动平台； 2）一个可以由用户自己发布抽奖活动，完成抽奖、开奖、奖品下发的抽奖活动 平台； 今年总结 先说下上面两个产品，这两个产品目前答题活动平台已开发完成，投入使用；抽奖活动平台开发已进入尾声，剩下抽奖的逻辑，抽奖的云函数写过第一版，尚需要迭代，按计划本周会收尾。 上传交代了计划中两个产品的进度 我来扯点其他的，具体讲下今年主要干了什么？我先把工作日志截图，如下所示 [图片] 通过上图不难看出，今年其实真的太忙碌了，从春节结束就开始，一直没有停下来，中间唯一的一个空白是因为那天特殊情况，躺了一天，对躺平了。 我按照时间线先列下 1月份-4月份 民宿小程序、考研刷题小程序、常规刷题小程序 民宿小程序是一个朋友推荐给我的，花了太多精力，也算是学到了很多，该小程序可适当改造为酒店预约、商城小程序，因为该小程序开发了完善的支付、订单、结算等相关的功能； 考研刷题小程序，目前上线，运营良好； 常规刷题小程序，该系列小程序参考了市面上常见的刷题小程序，用云开发重写，担负了我日常大部分的生活收入，也就是说，我卖的最多的一个版本，该产品后续会不断迭代，使其日趋完善。 参考小程序有 1）驾考宝典 2） 5月份 答题活动小程序，v1.0 该小程序承担某高校五四青年节的答题（1000人学生参加） 6月份 答题活动小程序，v2.0 这个版本跟上述第一版从界面上没有延续性，仅仅从产品 角度承载的功能是一样的，就是答题活动用。该第二版小程序承担了某党支部500人的七一党建答题活动 该答题活动助手小程序作为后面几个月份重点迭代的一个产品，花费了我太多精力，是后期一直维护的答题活动小程序对外输出解决方案，目前该产品已趋于完善，不需要花太多时间来开发，偶尔会迭代一些新功能上去。 7月份 抽奖活动小程序，v1.0 偶然的一次机会开始介入抽奖小程序的开发，在某开源抽奖小程序的基础上，迭代开发了可支持5000人参与单个抽奖活动的小程序； 目前该小程序已停止迭代开发，因为在11月份的时候已开始开发全新版本的抽奖活动小程序 9月份 培训机构刷题小程序，v1.0 该小程序主要面向培训机构，可支持培训机构线下报名，线上刷题场景，同时该小程序题库、会员导入均在小程序端完成。 10月份 成语答题赚小程序，v1.0, 目前该小程序已到v4.0版本，相关功能已趋于完善，日常迭代开发较少； 答题闯关小程序，v1.0 该小程序是一个全新小程序，主要用于比较娱乐化的答题活动用，比上面答题活动小程序增加了更多的交互，同时带有闯关的功能，该小程序承担了某地级市消防办的119消防答题闯关活动 11月份 抽奖活动小程序，v2.0 12月份 进入12月份，时间相对充裕很多，主要对之前的几个答题产品进行迭代，除此之外，推出了一个相对独立版本的答题活动小程序，老版本的答题活动小程序也更新到第三个版本。 培训机构刷题小程序，v2.0 成语答题赚小程序，v3.0 答题活动小程序，v3.0 值得庆祝的是，答题活动小程序承担过单次答题活动超过60000的答题活动，可以说，这一方面给我在产品上做做了压测之外，让我承担这种用户量较大的答题活动更有信心了。 明年展望 希望大家感兴趣可以补充或者在社区开个类似的帖子记录下。 本文备注1）上面小程序案例，每个答题小程序产品仅仅列举了其中一个典型的案例，其实每个小程序产品都作为输出解决方案，见证了我日常的点点滴滴； 2）考虑到社区规则限制，我没有将每个版本的小程序贴出来。 未完待续 1）答题小程序 2）抽奖小程序 3）海报小程序 2021年完善 4）问卷小程序 2021年完善

对于简单的GET表单请求 可以直接将参数封装在url中 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request') // 云函数入口函数 exports.main = async (event, context) => { //qz return new Promise((resolve, reject) => { request({ url: event.URL, method: "POST",//GET json: true, headers: { "content-type": "application/json", "token": event.token }, }, function (error, response, body) { if (!error && response.statusCode == 200) { try { resolve(body) } catch (e) { reject() } } }) }) } [代码] 对于POST请求 参数不好封装的 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { //这里写普通话成绩查询方式 return new Promise((resolve, reject) => { request({ url: event.url, method: "POST", json: true, headers: { "content-type": "application/json", "token":event.token }, body: event.body }, function (error, response, body) { if (!error && response.statusCode == 200) { try { resolve(body) } catch (e) { reject() } } }) }) } [代码] body中填写需要的参数 body是json形式 [代码]{ xxx:xxx } [代码] 请求头可以根据自己的需要进行修改。