帮助中心
微信小程序快速入门

| 阅读和实践需要约15分钟

快速入门中,我们将快速的实现一个微信小程序功能特性的发布与回滚(功能的开与关)。

在UI中创建一个 feature flag

登录 https://portal.featureflag.co 后台后,进入《开关管理》列表,点击按钮《+添加开关》。

在《新建开关》弹窗中输入 feature flag 的名称,并自动生成对应的 keyName (feature flag被调动时的识别key id)。

设置 feature flag 返回值

Feature flag 被建立后,会初始化两个返回值 truefalse ,并将默认返回值设置为 false,并且开关处于 的状态。

  • 开关在 状态时,返回《默认返回值》对应的配置返回值。初始化时为 false
  • 开关在 状态时,返回《如果开关关闭了,应返回》对应的返回值。初始化时为 false

当前,我们保留《默认返回值》的开关返回值设置为 false

在小程序中集成并使用 feature flag

该快速入门教程所用 SDK 版本为 Github Release v0.0.7。可以查看此版本 Demo 示例更好的了解 SDK 集成与使用

关于完整的 SDK 介绍与使用,可以点击查看教程《微信小程序SDK》

安装 SDK

使用 npm

前往 project.config.json 文件中 miniprogramRoot 参数指定的文件夹并运行如下命令:

npm install ffc-wechat-miniprogram-sdk --save

引入 SDK:

import ffcClient from 'ffc-wechat-miniprogram-sdk';

不使用 npm

  1. 从 github 克隆项目到本地
git clone https://github.com/feature-flags-co/ffc-wechat-miniprogram-sdk.git
  1. 运行如下命令编译代码
cd ffc-wechat-miniprogram-sdk
npm i
npm run build
  1. dist 文件夹复制到小程序项目根目录并且重新命名为 ffc-wechat-miniprogram-sdk
  2. 引入 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月底会有更好的版本!敬请期待!

关于更多的使用场景和方法,可以点击下方右侧的《渐进式发布与回滚》按钮,开始学习。

最后更新于 2022/05/30
未能解决您的问题?请联系
评价此篇文档
有帮助
没帮助

请留下具体问题或建议

能够解决我的问题
我还有其他想说的
本篇目录