易语言资源网 - 做最全的易语言资源下载社区
【周六更新】【2021开源大赛(第六届)】全部参赛作品信息 精易论坛授权登录

【uniapp实战直播课】03. 使用Unicloud   [复制链接]

    2021-11-06 15:32:27
    uni-app
    易语言资源网
    157 次浏览

第三课:结合unicloud实现后端

了解:https://uniapp.dcloud.net.cn/uniCloud/README

uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。

uniCloud 的 web控制台地址:https://unicloud.dcloud.net.cn

由于之前的课程中我们提到,不要将授权代码放入到前端,防止别人获取到appid和secretkey,所以这里我们可以使用unicloud的服务,来编写服务端代码,这样我们的key就不会泄露了。

具体流程如下:

1、 由于使用需要实名,所以先要进行实名验证。

2、然后我们需要创建一个新的空间,这个空间就是用于存放我们的云函数的地方。要给他一个好区分的名字。

3、后台这边就已经设置完了,云函数是要在HBuilderX中进行创建然后上传。

4、项目-右键-新建unicloud云开发环境。 然后在新文件夹关联到刚刚创建好的空间中。

5、之后在cloudfunctions上面右键,就可以创建新的函数了。

6、新建函数之后,就可以上传到云空间了。这时候就可以远程使用了。

7、更多的云函数可以在:https://uniapp.dcloud.io/uniCloud/cf-functions 查看。

云函数: getLoginToken

'use strict';
exports.main = async ( event, context ) => {
   //event为客户端上传的参数
   //console.log( 'event : ', event )

   var form = {
       appid: "wxxxxxxxxxxxxx",
       secret: "xxxxxxxxxxxxxxxxxxxxxx",
       js_code: event.code,
       grant_type: "authorization_code", //这个是写死的 就直接可以使用authorization_code
  }

   const res = await uniCloud.httpclient.request(
       "https://api.weixin.qq.com/sns/jscode2session", {
           method: "GET",
           data: form,
           dataType: "json"
      } )

   //返回数据给客户端
   return res.data
};

云函数:wxDecrype

'use strict';
const WXBizDataCrypt = require( "./WXBizDataCrypt.js" );
exports.main = async ( event, context ) => {
   //event为客户端上传的参数
   let pc = new WXBizDataCrypt( 'wxxxxxxxxxxxxx', event.sessionkey ); //wxXXXXXXX为你的小程序APPID
   let phoneNumber = pc.decryptData( event.encryptedData, event.iv );
   //console.log( "phoneNumber: ", phoneNumber ) //phoneNumber就是最终解密的用户信息  
   //返回数据给客户端
   return phoneNumber.phoneNumber
};

需要额外引用: WXBizDataCrypt.js文件

/pages/index/index.vue

updateUserInfo函数中:

uniCloud.callFunction( {
                  name: 'getLoginToken',
                  data: {
                      "code": code
                  }
              } ).then( res => {
                  //console.log( "updateUserInfo -- res: ", res );

                  _this.setlogininfo( {
                      openid: res.result.openid,
                      sessionkey: res.result.sessionkey
                  } );

              }, err => {
                  console.log( "err: ", err );
              } );

onGetPhoneNumber函数中:

uniCloud.callFunction( {
                       name: "wxDecrype",
                       data: {
                           "sessionkey": this.getsessionkey(),
                           "encryptedData": e.detail.encryptedData,
                           "iv": e.detail.iv
                      }
                  } ).then( res => {
                       this.phoneNumber = res.result;
                  }, err => {
                       console.log( "调用【wxDecrype】,发生错误: " + err );
                  } )

全部写好后,上传到云函数测试效果即可。



点我下载 (已有 2 次下载)

[错误报告]   上一篇:【uniapp实战直播课】02. 使用v...     下一篇:企业wx自动添加好友...