打通小程序和移动应用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. 在微信开发者工具内创建小程序云开发环境。
  2. 登录腾讯云云开发控制台,登录方式选择微信公众号登录,登录后可以查看并操作步骤1创建的环境。
  3. 登录授权内配置合适的登录方式,便可以通过云开发 Flutter 插件,在 Flutter APP 内访问小程序云开发环境。

打通用户体系与数据

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

  1. 创建数据库集合 todos 并设为公有读。
  2. 创建 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()
}
  1. 在微信小程序内免登录调用云函数,在 Flutter App 内通过微信登录调用云函数,则同一个微信用户在两端获取到的数据是一致的。

额外的安全保护

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

  1. 打开安全设置页面中,在移动应用安全来源里创建应用凭证。当有多款 APP 共用同一个环境时,应该为每一款 APP 分别创建唯一的安全凭证。

  2. 初始化环境时注入安全凭证。

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云端一体化的最佳实践。

#腾讯#
全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务