开发者社区> 扬朋> 正文

支付宝小程序探索之路

简介: 小程序作为一个全新的生态,上手开发会和一般的前端技术栈,有很大的差别。那么小程序又如何和前端工程结合呢?
+关注继续查看

小程序 新体验.jpg

作者:陈俊,蚂蚁金服高级前端工程师。2018年7月加入蚂蚁国际,在负责国际关键商户、全球汇款的小程序前端开发。在支付宝小程序业务开发上积累了较多经验。

引子

“小程序” 在这半年应该是蚂蚁最火最热的词之一了。小程序的技术栈中,最吸引人的点莫过小程序专属流量入口了,例如小程序收藏、小程序搜索。在小程序的浪潮之下,不管是蚂蚁内部还是合作企业,都逐步推进业务前端技术栈向小程序看齐。
小程序作为一个全新的生态,上手开发会和一般的前端技术栈,有很大的差别。那么小程序又如何和前端工程结合呢?

从研发痛点到小程序工程

痛点

第一阶段——搭积木

原生的小程序工程和前端工程差异比较远。官方文档也只会教你如何使用小程序的基础语法来开发。业务方时间排期紧,最重要的任务是将H5工程迁移至小程序。按照官方文档的只是,用App、Page、Component的方式组织好代码,保持整个小程序App纯度。此时,小程序的生命周期也局限于请求数据、处理、展示、交互。
同时,小程序的周边生态也如雨后春笋一样迅猛发展。为了确保业务功能快速开发、保证上线,我们在开发过程中快速接入了我们蚂蚁国际前端团队Mock工具——Datahub,也同时接入了阿里巴巴统一的前端监控,确保线上问题可溯源。但是小程序落地方案蚂蚁内部各团队参差不齐,想必在小程序的三方开发者中,这种实现差异化就更加明显。

第二阶段——标准化

在此期间,蚂蚁的也在推进小程序标准化的进程,完善了强大的IDE插件配套,将蚂蚁内部开发者和三方开发者的研发流程统一化。蚂蚁合作伙伴中的各国的钱包(类似国际版的支付宝),也统一成了全球小程序的标准。

附:小程序的官方组件库小程序图表库

第三阶段——工程化

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

小程序工程

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

状态管理

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

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

  1. 利用页面保活更新数据

    小程序如果两个Page都打开过,在一定的时间内两个页面都会保活。如果有两个Page同时监听一个Store Data,用户操作,更新了可视页面Store Data,而在非可视页面内的Store Data会被静默更新,触发渲染。这样非可视页面重新出现时,其实用户已经看到了新的数据源渲染的页面。
  2. 优化更新数据

    小程序官方文档中,有提到小程序性能优化,而小程序定制的状态管理工具herculex已经帮开发者做掉了this.setData操作,开发者不用关心。

Mock方案

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

image.png

// 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.reportAnalytics监控。按照码以内部的业务经验来说,需要my.reportAnalytics所需要的地方如下:

  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

小程序生态建设

image.png

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

对小程序未来的预测

团队中很多业务都是基于小程序的,我们团队认为小程序有以下两个高潜价值方向。

跨端生态

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

外部生态

对于三方开发者,以小程序这样轻量化的上层应用开发方式,可以快速地挖掘一批用户日常的应用,通过这些贴合生活的应用,如“记账”、“商品扫码价格查询”等,来快速地聚合吸引一批用户。

支付宝开发者中心:https://developers.alipay.com/developmentAccess/developmentAccess.htm

欢迎加入支付宝官方开发者万人钉钉群(搜索23390832)


生活号+钉钉群.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14278 0
快速上手,使用 Kotlin 把支付宝小程序装进自己的 App
8月14日下午3点,快速构建一个超级 App,具备动态扩展的架构设计,甚至能够在 App 中自启动小程序。
444 0
支付宝交易状态快速掌握
1. 支付宝返回的常见的交易状态包含以下:     2. 状态说明   WAIT_BUYER_PAY :交易创建,等待买家付款   TRADE_CLOSED :在指定时间段内未支付时关闭的交易或在交易完成全额退款成功时关闭的交易   TRADE_SUCCESS:商户签约的产品支持退款功能的前提下,买家付款成功   TRADE_FINISHED:商户签约的产品不支持退款功能的前提下,买家付款成功;或者,商户签约的产品支持退款功能 的前提下,交易已经成功并且已经超过可退款期限。
638 0
支付宝王益:40岁写30年代码是一种什么体验?
对于蚂蚁金服研究员王益而言,2019年是个颇有纪念意义的年份。今年他整40岁。从10岁开始,写代码整30年。这30年来,他当过“不务正业”的学生,创纪录地在大一就考下系统分析员,“单枪匹⻢”闯荡过从国内到硅谷的多家知名互联网科技公司,和AI领域许多传奇人物都有所交集。
3524 0
2019总结:一文告诉你支付宝牵头制定多少国际标准
今年以来,蚂蚁金服基于十五年的金融科技创新与实践,从技术标准、安全规范和认证审核制度等多方面持续发力,牵头完成了10多项数字金融领域的国内国际标准化工作,推动了数字金融的可持续发展。
932 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29155 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13574 0
小程序快速接入支付宝卡包
[font=微软雅黑] [size=2] 企业或者个人开发者可以通过支付宝提供的开放接口,把卡券添加到支付宝卡包,用户可以通过小程序查看卡券,同时支持跳转到支付宝卡包页面,在卡包中查看并使用商户同步进来的卡券。
591 0
杭州马拉松要来了,今年用支付宝就能快速报名!
用户只需要在支付宝搜索“杭马”就找到杭马官方小程序,可以在小程序中找到比赛时间、赛程、路线、报名费和一些参加细则等内容
1123 0
+关注
扬朋
支付宝小程序开发者运营专家
516
文章
69
问答
来源圈子
更多
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载