| 阅读和实践需要约15分钟
快速入门中,我们将快速的实现一个微信小程序功能特性的发布与回滚(功能的开与关)。
在UI中创建一个 feature flag
登录 https://portal.featureflag.co 后台后,进入《开关管理》列表,点击按钮《+添加开关》。
在《新建开关》弹窗中输入 feature flag 的名称,并自动生成对应的 keyName (feature flag被调动时的识别key id)。
设置 feature flag 返回值
Feature flag 被建立后,会初始化两个返回值 true
和 false
,并将默认返回值设置为 false
,并且开关处于 开
的状态。
- 开关在
开
状态时,返回《默认返回值》对应的配置返回值。初始化时为false
。 - 开关在
关
状态时,返回《如果开关关闭了,应返回》对应的返回值。初始化时为false
。
当前,我们保留《默认返回值》的开关返回值设置为 false
。
在小程序中集成并使用 feature flag
该快速入门教程所用 SDK 版本为 Github Release v0.0.7。可以查看此版本 Demo 示例更好的了解 SDK 集成与使用。
安装 SDK
使用 npm
前往 project.config.json 文件中 miniprogramRoot 参数指定的文件夹并运行如下命令:
npm install ffc-wechat-miniprogram-sdk --save
引入 SDK:
import ffcClient from 'ffc-wechat-miniprogram-sdk';
不使用 npm
- 从 github 克隆项目到本地
git clone https://github.com/feature-flags-co/ffc-wechat-miniprogram-sdk.git
- 运行如下命令编译代码
cd ffc-wechat-miniprogram-sdk
npm i
npm run build
- 将 dist 文件夹复制到小程序项目根目录并且重新命名为 ffc-wechat-miniprogram-sdk
- 引入 SDK:
import ffcClient from '/{相对根目录地址}/ffc-wechat-miniprogram-sdk/index';
初始化 SDK
打开小程序的 app.js
文件,使用 .init
方法初始化敏捷开关 SDK,如下方所示,
App({
onLaunch() {
// initialize client
ffcClient.init({ // you can specify the type with IOption if using Typescript
secret: "your env secret",
anonymous: true
});
...
},
})
其中,secret
可以在《组织机构》页面的《项目》标签下找到,如下图所示:
初始化用户(画像)信息
在用户登录后,可以调用 .identify
方法初始化用户画像信息, 如demo中如下代码所示:
ffcClient.identify({ // you can specify the type with IUser if using Typescript
"userName": "the user's user name",
"id": "the user's unique identifier" // the unique user Id, can be wechat id
});
使用 feature flag
获取 feature flag 的值
在Page文件夹中打开一个页面的index.js文件,使用 flagConfigs
初始化Page的开关信息。如下方所示:
SDK 会将 flagConfigs 中配置的 feature flags 自动生成一个 flags 对象并填充到 Page 或者 Component 的 data 中:
- .js 文件中引用方式为
this.data.flags['flagkey']
。 - .wxml 文件中则可以通过
flags['flagkey']
方式引用。
当敏捷开关控制台更新 feature flag 返回值后,data中对应的 feature flag 变量值是自动更新的,即
- .wxml 中
flags['flagkey']
的值会自动被更新,从而自动触发小程序UI变更。 - .js 文件中
this.data.flags['flagkey']
的值会自动被更新,下次调用时会拥有最新值。
在 .wxml 文件中控制功能模块
如 Demo 项目中所示,程序在 .wxml 文件中使用 flags['flagkey']
来隐藏对应的UI元素。
在 .js 文件中控制功能模块
当某个 feature flag 返回值被更新后,可以通过 ffcClient.on
方法来获得通知,从而进行所需要的逻辑处理,如下方所示:
发布/回滚(开/关)微信小程序 feature
如 Demo 程序,因为 feature flag 的默认返回值为 false
,所以在小程序页面下方显示 hello world
(模拟旧版功能)
回到敏捷开关 Portal 的后台界面,进入自己创建的 feature flag 详情页面的 《目标条件》Tab,在《默认返回值》中将返回值设置为 true
后,点击按钮《保存设置》。
重新回到小程序页面,小程序下方的文字改变为 hello universe!
(模拟新版功能)。我们成功的控制了功能模块的发布!
回滚功能模块,只需要将《默认返回值》中将返回值设置为 false
或 关闭开关即可。开关关闭时,将返回《如果开关关闭了,应返回》对应的返回值。
总结
该教程引导您完成了一个基本的微信小程序 feature flag 的建立、集成与使用,feature 新旧版的发布与回滚。
文档中的大部分地方使用的是 js 的示例,可以查看 SDK 文档和 Demo 来了解更多的关于 ts 的使用方法。
目前的 feature flag 详情页的《目标配置》的用户体验可能会有些不舒服,我们真在为此努力优化,预计2022年5月底会有更好的版本!敬请期待!
关于更多的使用场景和方法,可以点击下方右侧的《渐进式发布与回滚》按钮,开始学习。