专栏首页极乐技术社区探索支付宝小程序:如何与前端工程结合?

探索支付宝小程序:如何与前端工程结合?

小程序的技术栈中,最吸引人的点莫过小程序专属流量入口了,例如小程序收藏、小程序搜索。小程序作为一个全新的生态,上手开发会和一般的前端技术栈,有很大的差别。那么小程序又如何和前端工程结合呢?

从研发痛点到小程序工程

痛点

第一阶段——搭积木

原生的小程序工程和前端工程差异比较远。官方文档也只会教你如何使用小程序的基础语法来开发。业务方时间排期紧,最重要的任务是将H5工程迁移至小程序。按照官方文档的指示,用App、Page、Component的方式组织好代码,保持整个小程序App纯度。此时,小程序的生命周期也局限于请求数据、处理、展示、交互。

第二阶段——工程化

融合了小程序标准之后,开发者也可以向前端工程迈进。让小程序更贴近团队前端技术栈。包括对于特定业务模块,可以像Mini-UI一样,独立出功能型组件。对于复杂的小程序项目,可建立以SubApp的方式组织小程序工程。

小程序工程

为了让小程序更能贴近日常开发的前端工程模式,下面列出小程序工程所需的一些重要工程配套。

状态管理

状态管理使小程序有了数据流,让小程序真正的“活”起来。最原始的小程序多个Page之间、Page和App之间数据难以共享。借助状态管理,Page和App之间的数据可以打通。

在状态管理中,我们使用 herculex 。而小程序官方将来也会推出官方的脚手架。如果只是想借助状态管理而不想让它管理更新Data,也可以使用Redux和Mobx。只不过万变不离其宗,小程序使用状态管理后,结合小程序自身的特性,会有一些神奇的效果。

  1. 利用页面保活更新数据 小程序如果两个Page都打开过,在一定的时间内两个页面都会保活。如果有两个Page同时监听一个Store Data,用户操作,更新了可视页面Store Data,而在非可视页面内的Store Data会被静默更新,触发渲染。这样非可视页面重新出现时,其实用户已经看到了新的数据源渲染的页面。
  2. 优化更新数据 小程序官方文档中,有提到 小程序性能优化 ,而小程序定制的状态管理工具herculex已经帮开发者做掉了 this.setData 操作,开发者不用关心。

Mock方案

我们利用 Datahub 方案,Mock小程序的底层接口。

// datahub.config.js
module.exports = {
port: 5678,
store: require('path').join(__dirname, 'data'),
}
// package.json
"scripts": {
  "datahub": "datahub server -c datahub.config.js",
},

Datahub 方案,在小程序的IDE开发环境下,可以通过 npm run datahub 先启动Datahub,接口层通过 my.request 方式请求到Datahub平台。

// request
my.request({
  url: `http://127.0.0.1:5678/data/#你的业务名#/${#你的接口名#}`,
  method,
  data: params,
  dataType: 'json',
  success: res => resolve(res.data),
  fail: (res) => {
    reject(res)
    my.showToast({
type: 'exception',
      duration: 3000,
      content: 'DataHub 网络异常,请检查 DataHub 配置',
    })
  },
})

在小程序中使用Datahub有下列几个优点。

  1. 使用Datahub方案,Mock数据源不会被依赖跟随构建打包。
  2. 场景切换,场景数据可共享,可以一键切换任意返回结果。
  3. Mock数据可以多人共享。

监控

小程序官方提供了监控的能力,这对业务来说非常重要,建议在代码中加上 my.reportAnalytics 监控。按照码以内部的业务经验来说,需要 my.reportAnalytic s所需要的地方如下:

  1. 接口报错,try-catch
  2. 全局App onError
  3. 关键用户行为,包括重要区块曝光与点击
  4. 其他关键业务模块 如果是上报错误的话,建议可以采用 Error 格式上报
new Error([message[, fileName[, lineNumber]]])

国际化多语言

//app.js
my.getSystemInfo({
success: res => {
this.globalData.i18n = require(`./i18n/${languageMap[res.language] || 'zh-CH'}.js`)
  },
fail: () => {
this.globalData.i18n = require('./i18n/zh-CH.js')
  },
})
//util.js
export function getText (key, defaultValue) {
return getApp().globalData.i18n[key] || defaultValue || key
}

使用:通过小程序App初始化中取得容器App语言信息,完成多语言选择,并保持在全局数据中。在需要地方,完成语言取用。

扩展

组件库

按照业务的需要,可以自己定义一套类似mini-ui的组件,通过npm包的形式进行复用。

# shell
yarn add mini-program-component
// page.json
"usingComponents": {
"treasure-card": "mini-program-component/es/treasure-card/index",
}

SubApp

针对非常复杂的小程序,想对业务进行隔离但是又有共同的数据,可以将小程序中分割出不同的App模块。用SubApp的形式来组织。

.
├── README.md
├── app.acss
├── app.js # App
├── app.json
├── package.json
├── store # App Store
│   └── index.js
├── subApp1 # Sub App 1
│   ├── components
│   ├── pages # Page 1
│   └── store # Sub App Store 1
└── subApp2
    ├── components
    ├── pages # Page 2
    └── store  # Sub App Store 2

小程序生态建设

将小程序扩展到上图中的生态,基本小程序也能有接近前端工程的能力。

对小程序未来的预测

小程序有以下两个高潜价值方向。

跨端生态

小程序作为一个统一标准的技术,为各个业务线和各个客户端上的应用能力互通打下了基础。理想情况下,一套应用代码,可以部署到各个支持标准小程序的客户端上。能较好地解决目前各个客户端上技术栈不同导致的壁垒问题。如我们可以使用除H5以外的方案在其他不同客户端上进行业务的开发,可以更好地将我们的业务进行多端外投。在小程序方向的技术建设上各个团队也容易达成共识和形成共建合力。

外部生态

对于三方开发者,以小程序这样轻量化的上层应用开发方式,可以快速地挖掘一批用户日常的应用,通过这些贴合生活的应用,来快速地聚合吸引一批用户。

本文分享自微信公众号 - 极乐技术社区(wxapp-union)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 0基础Python最快的入门方法与实战项目!

    今天我们来分享一位前辈的心得和学习路径,他解决了纯小白基础段入门的问题,同时推荐了每个阶段适合的练手项目,希望对你有所帮助。

    python学习教程
  • 关于本人对学习知识的方法的理解

    不知不觉,我已经入行快3年了,技术群总有人在聊视频学习和文档学习的优缺点,现在我就单独开个文章说明吧.

    仙士可
  • Ubuntu 安装 Elasticsearch 和 elasticsearch-analysis-ik 分词

    hedeqiang
  • 解决Yii2.0 高级版不能使用内置服务器的问题

    今天社区一个小伙伴给我留言说是 Yii 框架可不可以像 Laravel 一样直接使用内置服务器直接跑起项目 在Laravel 中 直接:

    hedeqiang
  • ApiBoot开源框架各个组件的系列使用文章汇总

    ApiBoot是接口服务的落地解决方案,依赖于SpringBoot,提供了一系列开箱即用的组件,通过封装来简化主流第三方框架的集成,从而提高开发者开发效率、学习...

    恒宇少年
  • springboot|springboot配置拦截器

    在springboot中配置拦截器大体上分为以下几步 1.引入相关的依赖 2.新建拦截器 3.配置拦截器Bean 虽然网上有很多配置方法,但是我更倾向于官方文件...

    微笑的小小刀
  • 使用UPORA对peak进行注释

    UROPA是一个命令行工具,可以对基因组区域进行注释,这里的基因组区域要求是BED格式,比如chip,ATAC_seq等数据产生的peak区间。同时需要提供一个...

    生信修炼手册
  • 云原生服务网格 Istio 1.4 部署指南

    Istio 一直处于快速迭代更新的过程中,它的部署方法也在不断更新,之前我在 1.0 版本中介绍的安装方法,对于最新的 1.4 版本已经不适用了。以后主流的部署...

    米开朗基杨
  • Per.js - 快速、简便的响应式 JavaScript 开发框架

    在开源中国看到一则帖子 Per.js - 快速、简便的响应式 JavaScript 开发框架,该库是一个刚开始的出道 JavaScript 库,据作者介绍他的...

    hedeqiang
  • JS的静态类型检测,有内味儿了

    我们知道 TypeScript 2.3 以后的版本支持使用--checkJs对.js文件进行类型检查和错误提示。 但是由于 JavaScript 是弱类型语言,...

    Daotin

扫码关注云+社区

领取腾讯云代金券