快出海  > AppGallery  >  如何实现快应用多渠道打包

如何实现快应用多渠道打包

作者:Mayism
时间:2021-04-08
以H5快应用为例,我有2个H5 url需要转换成2个不同的H5快应用,每个H5快应用的名称、logo、包名都是不同的,但是我不想创建2个项目,而是在1个项目中完成这两个H5快应用的打包。快应用能否做到呢?是否支持构建不同场景下的rpk包呢?

背景

在同一个项目中当有如下需求时:

不同的rpk图标

不同的服务器域名

不同的包名

 不同的应用名称

 不同的环境配置

以H5快应用为例,我有2个H5 url需要转换成2个不同的H5快应用,每个H5快应用的名称、logo、包名都是不同的,但是我不想创建2个项目,而是在1个项目中完成这两个H5快应用的打包。快应用能否做到呢?是否支持构建不同场景下的rpk包呢?

解决方法

   快应用属于前端开发,不像原生app开发工具Android Studio自动支持多渠道打包。但是快应用是可以通过写js脚本达到这个目的。以下解决步骤以打包两个H5快应用为例,均使用快应用web组件加载,一个url是百度首页,一个url是163首页。

步骤1: 配置环境变量

在已经创建好的H5快应用项目根目录下创建config目录,该目录下定义百度和163的环境值,如下图所示:

ia_5000000002.png文件说明:

163:配置H5 url为163首页的目录,该目录下config.js中定义了163首页的H5 url,manifest.json文件是163 H5快应用的配置文件,配置163 H5快应用的包名、应用名称、应用图标等信息。

     config.js代码:

module.exports = {

    url: "https://m.163.com"

}

baidu:配置H5 url为百度首页的目录。该目录下config.js中定义了百度首页的H5 url,manifest.json文件是百度H5快应用的配置文件,配置百度H5快应用的包名、应用名称、应用图标等信息。

config.js代码:

module.exports = {

    url: "https://m.baidu.com"

}

Hello:应用首页,hello.ux里使用web组件加载url,url值根据不同渠道是动态变化的,取值是来源于项目src目录下创建的config.js文件中暴露的变量url,注意非步骤1环境新建的环境目录config下面的文件。

<script>

  import router from "@system.router";

  import config from "../config.js"

  export default {

    props: ['websrc'],

    data: {

      title: "",

      // TODO Replace the link to the H5 app

      loadUrl: config.url,

      }

     }

      ...省略其他代码

  </script>

步骤2:编写node.js脚本代码

在图1中我们看到config目录下有两个js文件,prebuild.js 和postbuild.js。这两个文件是已经编写好的js脚本文件。

postbuild.js:编译构建完成后的操作,用于将打包后的rpk文件从原始目录dist输出到自定义的out目录,方便查看历史构建的rpk版本。

prebuild.js:编译构建之前执行的js脚本。首先判断当前的打包渠道参数值,根据对应的渠道替换该渠道下的环境文件,将该渠道下的manifest.json和config.js文件替换到src目录下的同名文件;另一方面,删除dist目录下的rpk文件,确保编译构建的rpk包是最新的。

prebuild.js示例代码如下:

const path = require('path');

const fs = require("fs");

console.log("prebuild.js path="+path+", fs= "+fs);

//get env config

let faEnv = process.argv[2] ? process.argv[2] : '163';

console.log("faEnv : " + faEnv)

const projectPath = process.cwd();

console.log("projectPath= "+projectPath);

const configFilePath = path.join(projectPath, '/src/config.js');

console.log("configFilePath= "+configFilePath);

const manifestFilePath = path.join(projectPath, '/src/manifest.json');

console.log("manifestFilePath= "+manifestFilePath);

if (fs.existsSync(configFilePath)) {

    console.log("delete : config.js")

    fs.unlinkSync(configFilePath);

}

if (fs.existsSync(manifestFilePath)) {

    console.log("delete : manifest.json")

    fs.unlinkSync(manifestFilePath);

}

const distDirPath = path.join(projectPath, '/dist');

console.log("prebuild distDirPath= "+distDirPath);

if (fs.existsSync(distDirPath)) {

    console.log("postbuild.js exist  dist and out, begin copy rpk");

    fs.readdirSync(distDirPath).forEach(function (name) {

        var filePath = path.join(distDirPath, name);

        console.log("prebuild filePath= "+filePath+",name="+name);

        var stat = fs.statSync(filePath);

        if (stat.isFile()) {

            console.log("delete : rpk file");

            fs.unlinkSync(filePath);

        } 

    });

}

fs.copyFileSync(——${projectPath}/config/${faEnv}/config.js——, configFilePath);

fs.copyFileSync(——${projectPath}/config/${faEnv}/manifest.json——, manifestFilePath);

postbuild.js代码如下:

const path = require('path');

const fs = require("fs");

console.log("postbuild.js path="+path+", fs= "+fs);

const projectPath = process.cwd();

console.log("projectPath= "+projectPath);

const distDirPath = path.join(projectPath, '/dist');

console.log("distDirPath= "+distDirPath);

const outDirPath = path.join(projectPath, '/out');

if (!fs.existsSync(outDirPath)) {

    //create output dir 

    console.log("out dir not exist and create")

     fs.mkdirSync(outDirPath);

}

if (fs.existsSync(distDirPath) && fs.existsSync(outDirPath)) {

    console.log("postbuild.js exist  dist and out, begin copy rpk");

    fs.readdirSync(distDirPath).forEach(function (name) {

        var filePath = path.join(distDirPath, name);

        console.log("filePath= "+filePath+",name="+name);

        var stat = fs.statSync(filePath);

        if (stat.isFile()) {

           var outrpkfilepath=path.join(outDirPath,name);

            fs.copyFileSync(filePath, outrpkfilepath);

        } 

    });

}

步骤3: 编译构建

1)  IDE工具栏选择Npm->Start Npm Library

2)  IDE工具栏选择Npm->Npm install

   当完成以上步骤时,项目工程下会生成两个文件package.json和fa-toolkit-3.1.2-Stable.301.tgz。其中fa-toolkit-3.1.2-Stable.301.tgz是编译器版本文件,版本号取决于IDE中实际集成的版本。

打开编译package.json文件,在scripts标签下添加build_163、 buid_baidu、copyRpk脚本,引入步骤2中定义的js文件。

3)  build_163: 编译构建163网页的H5快应用,“node ./config/prebuild.js 163”中的163是Node命令执行脚本的参数变量,此变量值对应prebuild.js中faEnv变量。脚本形式是标准的三部分:编译前、编译、编译后,由&&连接组成,表示前一步完成了,再进行下一步。

build_baidu:编译构建百度网页的H5快应用。

4)  进入项目根目录下执行打开cmd,执行npm run build_163,即可打包出163 H5快应用;执行npm run build_baidu即可打包出百度H5快应用。也可直接在IDE中切换到终端,然后执行同样命令。

ia_5000000003.png

package.json内容如下:

{

  "name": "com.h5.demo",

  "version": "1.0.0",

  "description": "",

  "scripts": {

    "build_163": "node ./config/prebuild.js 163 && npm run fa-release && npm run copyRpk",

    "build_baidu": "node ./config/prebuild.js baidu && npm run fa-release && npm run copyRpk",

    "fa-build": "node node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js",

    "copyRpk": "node ./config/postbuild.js",

    "fa-watch": "node node_modules/webpack/bin/webpack.js --watch --progress --config ./node_modules/fa-toolkit/webpack.config.js",

    "fa-release": "node ./node_modules/cross-env/src/bin/cross-env.js uglifyjs=true sign=release node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js"

  },

  "devDependencies": {

    "fa-toolkit": "file:fa-toolkit-3.1.2-Stable.301.tgz",

    "cross-env": "^7.0.2"

  }

}

总结

快应用多渠道打包实现本质上是环境文件的替换,而这些环境判断、文件替换都是基于标准的npm脚本、node.js中的文件操作。

Npm脚本:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

https://docs.npmjs.com/cli/v7/using-npm/developers

Node.js文件操作:http://nodejs.cn/api/fs.html

立即登录,阅读全文
版权说明

本文内容来自于华为开发者论坛,本站不拥有所有权,不承担相关法律责任。文章内容系作者个人观点,不代表快出海对观点赞同或支持。如有侵权,请联系管理员(hj@kchuhai.com)删除!

相关文章
应用出海如何起量?华为应用市场聚合全球五大流量场域,助力开发者扬帆起航
应用出海如何起量?华为应用市场聚合全球五大流量场域,助力开发者扬帆起航
随着国内移动应用市场的成熟发展,越来越多的开发者将目光锁定海外,希望通过海外布局寻求新的增长空间,增强行业竞争力。近年来,国内应用出海规模不断扩大,为助力应用更好地掘金海外市场,4月23日,华为应用市场商业推广在苏州举办出海系列沙龙。会议以“共舟前行,创新未来”为主题,聚焦海外市场推广,介绍了华为应用市场商业推广在海外不同地区为应用提供的全方位资源支持以及2021年的发展新方向,为打算出海以及正在出海的应用增添澎湃新动力。
金融界
2021-04-25
俄罗斯一款App集成华为能力后,恶评识别率大幅提升
俄罗斯一款App集成华为能力后,恶评识别率大幅提升
俄罗斯卫星通讯社(Sputnik)是享有国际声誉的卫星通讯社,旗下新闻应用程序提供高质量的国际新闻,包括突发新闻、全球重大事件、深度报道、在线广告视频和独家采访。App集成了系统完整性检测功能后,应用市场内恶意评论识别率提升了14%。
华为开发者联盟服务
2021-04-16
华为应用市场推广丨“桌面推荐”放量了!预计覆盖上亿设备数
华为应用市场推广丨“桌面推荐”放量了!预计覆盖上亿设备数
2021年3月开始,“热门推荐”文件夹逐步放量,在更多机型上获得了曝光。深受合作伙伴喜爱的“热门推荐”文件夹,此前只在2020年的部分新机型上展示。现放量后,装有“热门推荐”的设备数成倍增长,且放量持续到8月底。大家千万不要错过这一波流量红利,赶快建立“桌面推荐”的独立投放任务将这一波优质流量收入囊中吧!
华为开发者联盟服务
2021-04-16
HUAWEIAppGalleryConnect获得多项SOC国际权威认证
HUAWEIAppGalleryConnect获得多项SOC国际权威认证
近日,华为应用市场AppGallery Connect(简称AGC)成功通过国际权威标准组织“美国注册会计师协会(AICPA)”认定的SOC1 Type2、SOC2 Type1、SOC2 Type2和SOC3四项权威认证,表明AGC平台的信息安全管理能力已达到国际公认的最高标准,为开发者提供世界一流的安全隐私保障及服务。
华为开发者联盟服务
2021-04-16
AppGallery Connect:同时集成认证服务与云数据库Server SDK Netty报错
AppGallery Connect:同时集成认证服务与云数据库Server SDK Netty报错
近期在适配华为AGC的Cloud DB服务,前期已经尝试了Android和iOS端的集成,近期在开始体验Server端的集成。我们选择的是华为提供的Server 端的Java SDK,同时我们还集成了认证服务,但是运行的时候,一直报TLS_ECDHE_ECDSA_WITH_AES_256_6CM_SHA384的错误。
Mayism
2021-04-15
扫描关注获取更多 AppGallery 的相关信息
服务商推荐 更多 >
北京蓝色光标数字传媒科技有限公司
蓝瀚互动
专注于为出海企业提供全套价值链服务,包括海外市场洞察、品牌营销策略、创意设计、广告优化、 账户管理、全球KOL营销、粉丝页运营等一站式整合营销服务,满足出海广告主的多元化需求。
推广
百度国际MediaGo
百度国际MediaGo
百度国际是百度极具战略意义的海外业务发展部门,拥有超过10年的出海经验。旗下出海营销平台MediaGo旨在为全球广告主提供营销整合方案。成立以来,MediaGo不断进化,在磨炼一站式海外营销服务能力的同时,连接Snapchat、Pinterest、Reddit等优质海外平台,成为连接广告主与价值洼地的桥梁。
本地化变现推广
北京易掌云峰科技有限公司
环信即时通讯云
环信,国内领先的即时通讯、在线客服、智能客服机器人提供商。
云服务
iGlobe Advisory Inc.
爱个萝卜本地化 iGlobe
爱个萝卜总部位于加拿大温哥华,为游戏出海提供所有主要语言的母语级本地化翻译,并由专业项目经理为您保驾护航。并可向全球游戏伙伴提供全方位服务,包括目标市场开拓策略,以及各国本地化运营项目监督。
本地化
厦门比朋科技股份有限公司
比朋科技股份
云服务,软件服务,定制开发
云服务外包源码
福建博士通信息有限责任公司
博士通云通讯
福建博士通信息有限责任公司专注于融合短彩信运营、互联网精准投放、语音服务、流量营销、物联网卡等多种专业的通讯能力,为金融、互联网、汽车、物流、教育、游戏、公共服务等多个领域机构提供专业的融合通讯服务和系统平台定制化开发。公司成立于1999年,总部坐落于福州,在北京、上海、深圳、成都、山东等地建立了分公司和办事处。
云服务
扫码登录
打开扫一扫, 关注公众号后即可登录/注册
加载中
二维码已失效 请重试
刷新
账号登录/注册
小程序
公众号
商务合作
投稿采访
出海管家