在得物的小程序生态实践

事实上，“小程序”这种技术架构并非微信首创，但无疑微信小程序是目前生态建设最完整、用户量最大的小程序生态。

目前小程序在渲染层上已经有了基于"Skyline渲染线程"的新型架构，减少了双线程架构之间的通信开销和内存占用，理论上拥有更好的性能，需要单独开启，可自行查阅相关文档。

• 整个小程序所有分包大小不超过20M（开通虚拟支付后的小游戏不超过30M）；
  
• 单个分包/主包大小不能超过2M。

主包：小程序默认启动页面/TabBar页面的构建产物，以及一些所有分包都需用到公共资源/JS脚本；

分包：为了提高初始化加载速度，开发者可以划分以页面为维度的分包，分包只包含一些子级页面的代码。

├── ...├── bin // 构建命令├── loaders├── src│   ├── assets // 静态资源│   ├── components // 通用组件│   ├── pages // 主包目录│   ├── product // product分包目录│   ├── order // order分包目录│   ├── ...│   ├── sdk // 外部SDK│   ├── store // 全局状态│   ├── style // 样式文件│   ├── utils // 通用方法│   └── wxcomponents // 小程序原生组件├── ...

上古时期的噩梦

  <view v-if="!IS_PRODUCTION" class="changeServiceEnv">    <view class="changeTitle">环境切换</view>    <radio-group @change="radioChange">      <radio        v-for="item in ENV_Array"        :key="item"        :value="item"        :checked="item === SERVICE_ENV"        class="radio-info"      >        {{ item }}      </radio>    </radio-group>  </view>

radioChange(e) {  let { value } = e.detail  this.$store.commit('SET_SERVICE_ENV', value)  uni.showToast({ title: `当前环境是${this.SERVICE_ENV}` })}

// 全局loader主要代码function modifyTemplateString(inputString, customTag) {  // 查找 <template> 标签内容  let templateStart  if (inputString.indexOf('<template>') > -1) {    templateStart = inputString.indexOf('<template>') + '<template>'.length  }  const templateEnd = inputString.indexOf('</template>')
  const templateContent = inputString.substring(templateStart, templateEnd).trim()  let modifiedTemplateContent = ''  // 在 <template> 第一个元素开头插入自定义标签  modifiedTemplateContent = templateContent.replace(/(^\s*<\w+(?:-\w+)*\b(?:\s+(?:"[^"]*"|'[^']*'|[^>"])+)?\s*>)/, `$1\n${customTag}`)  // 替换原始字符串中的 <template> 和 <script> 内容  return inputString    .replace(templateContent, () => modifiedTemplateContent)}
module.exports = function loader(source) {  const relPath = path.relative(path.join(__dirname, '../', './src'), this.resourcePath)  // <devPanel>是已经在全局中注册过的全局组件  return modifyTemplateString(source, '<devPanel></devPanel>')}

// 打包机执行的命令#!/usr/bin/env nodeconst shell = require('shelljs')const signale = require('signale')const { Signale } = signaleconst ci = require('miniprogram-ci')
async function main() {  const interactive = new Signale({ interactive: true })  interactive.pending(task)  // 执行构建命令  const result = shell.exec(`npm run build`)  if (result.code !== 0) {    // 如果构建失败了 退出    interactive.error(task)    process.exit(1)  } else {    const project = new ci.Project({      type: 'miniProgram',      projectPath: '/dist/dev/mp-weixin',      ignores: ['node_modules/**/*'],    })    // 将构建产物上传至微信服务器    ci.upload({      project,    }).then(res => {      console.log('上传成功')      // 通过IM通知相关测试/研发验证体验版小程序    }).catch(err => {      console.log('上传失败')      interactive.error(task)      process.exit(1)    })  }}main()

miniprogram-ci是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。

使用前需要使用小程序管理员身份访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置IP白名单，才能进行上传、预览操作。

miniprogram-ci从1.0.28开始支持第三方平台开发的上传和预览，调用方式与普通开发模式无异。

• 节省手动操作的时间和精力；
• 集成到CI/CD流程：可以集成到持续集成/持续部署（CI/CD）流程中，实现自动化构建和部署；
• 可编程性：可以通过脚本编程控制上传代码的过程，实现定制化的部署流程。

https://developers.weixin.qq.com/miniprogram/introduction/

https://segmentfault.com/a/1190000019131399

https://juejin.cn/post/7087041847700226062

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0000286f908988db00866b85f5640a

https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/introduction.html

https://uniapp.dcloud.net.cn/

https://docs.taro.zone/docs/

https://www.npmjs.com/package/miniprogram-ci

往期回顾

1. 浅析Spring中Async注解底层异步线程池原理｜得物技术
2. 客服测试流水线编排设计思路和准入准出应用｜得物技术
3. 深入剖析时序Prophet模型：工作原理与源码解析｜得物技术
4. 深入理解Babel - 项目管理工具lerna解析｜得物技术
5. 星创编辑器在投放业务中的落地｜得物技术

文 / Zyqy 航飞

关注得物技术，每周一、三、五更新技术干货

要是觉得文章对你有帮助的话，欢迎评论转发点赞～

未经得物技术许可严禁转载，否则依法追究法律责任。