打通小程序和移动应用APP，实现一云多端

2020-07-02 15:35:04 浏览数 (1)

前 言

Flutter 是当前最火热的跨端开发框架，可以快速开发出界面优雅、性能卓越的跨端应用，并且同时支持 AOT 和 JIT 两种运行时，兼顾研发效率和应用性能。

云开发 CloudBase 是云端一体化的后端云服务，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。使用云开发可以快速构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

通过云开发 Flutter 插件，可以在 Flutter 应用内使用云函数、云数据库、云存储等能力，快速构建 Flutter App。此外，在微信小程序内，原生提供了云开发能力。本文将介绍，如何打通小程序和Flutter App 的云开发环境，实现一云多端。

1

云开发Flutter插件

云开发已经为 Flutter 提供了5款插件，开发者可以按需下载使用。

2

小程序和App的跨平台应用开发

基于云开发和 Flutter，通过共用云开发环境、打通用户体系与数据、在 App 端配置额外的安全保护，实现小程序和 App 的跨平台应用开发。

共用云开发环境

目前，云开发环境分为两种（腾讯云·云开发和小程序·云开发），微信小程序内只能使用小程序·云开发环境。所以，为了达到共用云开发资源的目的，只能创建小程序·云开发的环境，并设置为允许 App 使用。

（Ps：本文后续提到的云开发环境，都是指小程序·云开发环境）

1.在微信开发者工具内创建小程序云开发环境。

2.登录腾讯云云开发控制台，登录方式选择微信公众号登录，登录后可以查看并操作步骤1创建的环境。

3，在登录授权内配置合适的登录方式，便可以通过云开发 Flutter 插件，在 Flutter APP 内访问小程序云开发环境。

打通用户体系与数据

微信为开发者提供了一套基于 UnionId 的用户体系，可以借助 UnionId 打通微信小程序和 Flutter App 的用户数据。

  1. 创建数据库集合 todos并设为公有读。
  2. 创建getTodosInfo云函数，并在云函数内进行适配
代码语言：javascript复制
// 小程序来源
const cloud = require('wx-server-sdk')
cloud.init(({
 env: cloud.DYNAMIC_CURRENT_ENV
}))

// Flutter端来源
const tcb = require('tcb-admin-node')
tcb.init({
 env: tcb.getCurrentEnv()
})


exports.main = async (event, context) => {
 let db, unionid

 // 根据来源初始化 db 和 unionid
 const source = tcb.parseContext(context).TCB_SOURCE
 switch(source) {
   // 微信小程序来源
   case 'wx_client':
   // 微信开发者IDE来源
   case 'wx_devtools': {
     unionid = cloud.getWXContext().UNIONID
     db = cloud.database()
  }
   // Flutter端来源
   case 'web_client': {
     unionid = tcb.parseContext(context).WX_UNIONID
     db = tcb.database()
  }
}

 // 以 unionid 为用户索引写入数据
 await db.collection('todos').add({
   userId: unionid,
   todo: 'study tcb'
})

 // 以 unionid 为用户索引读取数据
 const doc = await db.collection('todos').where({
   userId: unionid
}).get()
}
  1. 在微信小程序内免登录调用云函数，在 Flutter App 内通过微信登录调用云函数，则同一个微信用户在两端获取到的数据是一致的。

额外的安全保护

在小程序内使用云开发资源，有微信自带的安全保护，天然免鉴权使用，无需开发者关心。但是，在Flutter App 内使用云开发资源时，如果不小心泄漏环境信息，会存在云开发资源被盗刷的风险。所以，云开发为 App 端提供了额外的安全保护能力 ---- 移动安全来源认证，必须有合法的安全凭证才可以调用云开发资源。

  1. 打开安全设置页面中，在移动应用安全来源里创建应用凭证。当有多款 APP 共用同一个环境时，应该为每一款 APP 分别创建唯一的安全凭证。
  1. 初始化环境时注入安全凭证。
代码语言：javascript复制
import 'package:cloudbase_core/cloudbase_core.dart';
import 'package:cloudbase_auth/cloudbase_auth.dart';

// 初始化 CloudBase
CloudBaseCore core = CloudBaseCore.init({
   // 填写你的云开发 env
   'env': 'your-env-id',
   // 填写你的移动应用安全来源凭证
   'appAccess': {
     // 凭证
     'key': 'your-app-access-key',
     // 版本
     'version': 'your-app-access-version'
  }
});
  1. 若安全凭证不小心泄漏了，可以通过升级并替换安全凭证来保护云资源。

写在最后

  • 本文以云开发 Flutter 插件为例，介绍了如何进行小程序和 App 的跨平台应用开发。借助云开发的其他端 SDK，可以把云开发应用的能力扩展到更多端。
  • 本文在介绍如何 打通用户体系与数据 时，是围绕微信的用户体系构建的，在 APP 端使用微信登录是必要条件。后续云开发将搭建更完善的用户体系，让开发者可以更轻便的打通多端数据。

作者简介

周子杰，腾讯云高级工程师，云开发团队成员，2016年加入腾讯，一直从事大前端研发领域，致力于提升大前端的研发效率。曾参与过PCQQ、手机QQ、腾讯文档等项目的研发工作，腾讯文档初始团队成员，设计了文档协同算法、表格多表架构。2018年加入云开发团队，设计了云开发实时数据推送的接入层架构，支持十万级别的数据并发推送架构；为flutter社区提供了云开发插件，并持续为社区提供flutter云端一体化的最佳实践。

【产品介绍】云开发（CloudBase）是云端一体化的后端云服务，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力极大的降低了应用开发的门槛。使用云开发可以快速构建完整的小程序/小游戏、H5、Web、移动 App 等应用。产品文档：https://cloud.tencent.com/product/tcb?from=12763

技术文档：https://cloudbase.net?from=10004

技术交流加Q群：601134960

最新资讯关注微信公众号【腾讯云云开发】

小程序·云开发 网站 官方文档 数据库 javascript

0 人点赞