打通小程序和移动应用APP,实现一云多端
引言
Flutter 是当前最火热的跨端开发框架,可以快速开发出界面优雅、性能卓越的跨端应用,并且同时支持 AOT 和 JIT 两种运行时,兼顾研发效率和应用性能。
云开发 CloudBase 是云端一体化的后端云服务,采用 serverless 架构,免去了移动应用构建中繁琐的服务器搭建和运维。使用云开发可以快速构建完整的小程序/小游戏、H5、Web、移动 App 等应用。
通过云开发 Flutter 插件,可以在 Flutter 应用内使用云函数、云数据库、云存储等能力,快速构建 Flutter App。此外,在微信小程序内,原生提供了云开发能力。本文将介绍,如何打通小程序和Flutter App 的云开发环境,实现一云多端。
云开发 Flutter 插件
云开发已经为 Flutter 提供了5款插件,开发者可以按需下载使用。
小程序和 App 的跨平台应用开发
基于云开发和 Flutter,通过共用云开发环境、打通用户体系与数据、在 App 端配置额外的安全保护,实现小程序和 App 的跨平台应用开发。
共用云开发环境
目前,云开发环境分为两种(腾讯云·云开发和小程序·云开发),微信小程序内只能使用小程序·云开发环境。所以,为了达到共用云开发资源的目的,只能创建小程序·云开发的环境,并设置为允许 App 使用。
(Ps:本文后续提到的云开发环境,都是指小程序·云开发环境)
- 在微信开发者工具内创建小程序云开发环境。
- 登录腾讯云云开发控制台,登录方式选择
微信公众号登录
,登录后可以查看并操作步骤1创建的环境。 - 在登录授权内配置合适的登录方式,便可以通过云开发 Flutter 插件,在 Flutter APP 内访问小程序云开发环境。
打通用户体系与数据
微信为开发者提供了一套基于 UnionId 的用户体系,可以借助 UnionId 打通微信小程序和 Flutter App 的用户数据。
- 创建数据库集合
todos
并设为公有读。 - 创建
getTodosInfo
云函数,并在云函数内进行适配。
// 小程序来源 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() }
- 在微信小程序内免登录调用云函数,在 Flutter App 内通过微信登录调用云函数,则同一个微信用户在两端获取到的数据是一致的。
额外的安全保护
在小程序内使用云开发资源,有微信自带的安全保护,天然免鉴权使用,无需开发者关心。但是,在Flutter App 内使用云开发资源时,如果不小心泄漏环境信息,会存在云开发资源被盗刷的风险。所以,云开发为 App 端提供了额外的安全保护能力 ---- 移动安全来源认证,必须有合法的安全凭证才可以调用云开发资源。
打开安全设置页面中,在移动应用安全来源里创建应用凭证。当有多款 APP 共用同一个环境时,应该为每一款 APP 分别创建唯一的安全凭证。
初始化环境时注入安全凭证。
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' } });
- 若安全凭证不小心泄漏了,可以通过升级并替换安全凭证来保护云资源。
最后
- 本文以云开发 Flutter 插件为例,介绍了如何进行小程序和 App 的跨平台应用开发。借助云开发的其他端 SDK,可以把云开发应用的能力扩展到更多端。
- 本文在介绍如何
打通用户体系与数据
时,是围绕微信的用户体系构建的,在 APP 端使用微信登录是必要条件。 后续云开发将搭建更完善的用户体系,让开发者可以更轻便的打通多端数据。
参考
作者简介
周子杰,腾讯云高级工程师,云开发团队成员,2016年加入腾讯,一直从事大前端研发领域,致力于提升大前端的研发效率。曾参与过PCQQ、手机QQ、腾讯文档等项目的研发工作,腾讯文档初始团队成员,设计了文档协同算法、表格多表架构。2018年加入云开发团队,设计了云开发实时数据推送的接入层架构,支持十万级别的数据并发推送架构;为flutter社区提供了云开发插件,并持续为社区提供flutter云端一体化的最佳实践。
#腾讯#