最近发现华为AGC远程配置服务开始支持Web平台了，之前只支持Android版本，期待Web版本很久了，也迫不及待地集成体验了一下，集成的Demo见Github。

集成步骤

1. 开通服务

a) 登录AGC，创建JS应用

b) 开通远程配置

c) 点击“添加配置项”，新增远程配置的配置项

2. 集成SDK

a) 输入指令将npm下载到项目中

npm install –save @agconnect/remoteconfig

3. 接入功能

a) 获取本地配置项

在vue中创建本地配置map

应用本地配置

export function applyDefault(map) {  return agconnect.remoteConfig().applyDefault(map);}
复制代码

b) 获取云端配置项

直接调用fetch接口获取云端配置

export async function fetch() {  return agconnect.remoteConfig().fetch().then(() => {    return Promise.resolve();  }).catch((err) => {    return Promise.reject(err);  });}
复制代码

c) 将配置应用到本地，分为实时应用到本地和生效上次配置两种。

实时应用到本地：

直接调用apply接口：

export function apply() {  return agconnect    .remoteConfig().apply().then((res) => {        return Promise.resolve(res);      }    ).catch(error => {      return Promise.reject(error);    });}
复制代码

生效上次获取的配置：

调用applyLastFetch接口获取上次fetch到的配置

//加载配置export function applyLastLoad() {  return agconnect    .remoteConfig().loadLastFetched().then(async (res) => {        if (res) {          await agconnect.remoteConfig().apply(res);        }        return Promise.resolve(res);      }    ).catch(error => {      return Promise.reject(error);    });}
复制代码

d) 合并本地云端配置

直接调用getMergedAll接口合并所有配置项

export function getMergedAll() {  return agconnect.remoteConfig().getMergedAll();}
复制代码

e) 清除配置项

调用clearAll接口清除配置项

export function clearAll() {  agconnect.remoteConfig().clearAll();}
复制代码

f) 效果展示

点击获取，远端配置生效合并本地和云端的配置项，点击确定最终显示出所有的配置项。

想要了解更多相关内容，请参考：

在web平台集成华为AGC远程配置：github.com/AppGalleryC…

Web集成华为AGC远程配置开发指南：developer.huawei.com/consumer/cn…

原文链接: developer.huawei.com/consumer/cn…

原作者：Mayism