1. 聚能聊>
  2. 话题详情

繁星计划之阿里小程序征文活动火热进行中~大疆无人机、Switch游戏机、FILCO机械键盘等你来拿!

_

为了鼓励开发者们能够分享支付宝小程序技术心得、开发实战经验,现支付宝、阿里标准团队、阿里云、蚂蚁智能科技CodeLab联合启动“繁星计划阿里小程序征文活动”。支付宝开发者社区是支付宝开发者之间进行技术交流、讨论与学习的社区,服务于广大的支付宝小程序的开发者。阿里云为小程序开发者提供资源与生态商机。

参与人群:
企业&个人开发者、大学生

内容:
开发者学习、开发、设计支付宝小程序&使用阿里小程序云过程中的实战经验总结或小故事;

可参考内容:
(1)支付宝小程序开发

  • 开发、上架经验总结分享;
  • 疑难问题解决;
  • 自定义组件、插件等;
  • 性能优化实践;
  • 调试、问题定位;
  • 测试体系、自动化测试;
  • 前后端开发联调;
  • 小程序运行原理探究;
  • 可视化小程序开发;

(2)阿里云小程序云服务开发经验分享
(3)支付宝小程序能力的接入经验分享与应用场景探索;

时间节点:2018年8月15日——2020年3月30日

形式:形式不限,可以是自己录制的一段视频讲解、一段改编的歌词/顺口溜、一个开源DEMO及开发介绍、文章、还可以是信息图、漫画等多种形式。内容专业、详实、有趣易懂。

征文要求

  • 内容不违反法律法规,规章及规范性文件,符合支付宝&云栖社区内容规定与其他适用的协议、规则或规范要求;
  • 内容必须和支付宝小程序&阿里小程序云相关;
  • 内容必须为原创,严禁抄袭或洗稿;
  • 内容有创意、清晰易懂、信息详实准确、有深度;
  • 投稿篇数不限,但雷同内容不能重复投稿;
  • 内容可以授权支付宝通过官方渠道进行发布与宣传。

参加流程:

报名地址:

https://survey.alipay.com/apps/zhiliao/lZWyGgZx

在大赛期间将文章内容发布在聚能聊“繁星计划之阿里小程序征文活动”话题下即可。

评选规则

初审:内容发表后,支付宝小程序官方会根据文章质量评选出入围的作品,入围作品将被云栖社区和支付宝开发者社区发表推荐。

终审:为了保证活动的公平公正,主办方会邀请5位支付宝专家担任活动的终审评委,给所有入围的作品评分,评选出最后的获奖作品。

评审标准: 内容创意(30%)、技术干货或运营思路(30%)、内容形式(如视频品质、文章排版、图片设计质量等,占比20%)、人气[浏览量、收藏与评论、点赞数(包括但不限于云栖社区和支付宝开发者社区) (视频可发布在抖音平台等,相应的浏览量可作为评选)(20%)

奖励:
报名参加活动的,均可以得到支付宝小程序技术专家1对1的辅导。

专业开发者组:
一等奖 1名 DJI大疆御mavic air无人机一台

image

二等奖 5名 Switch游戏机一台

image

三等奖 20名 FILCO机械键盘斐尔可104键圣手二代

image

(1)获奖内容将会在支付宝开发者中心(生活号+小程序)中发布宣传,在云栖社区,支付宝开发者社区进行宣传;

(2)部分有创意内容有机会在支付宝、阿里云的官方阵地进行宣传;

大学生组:
一等奖 1名 DJI大疆御mavic air无人机一台
二等奖 5名 Switch游戏机一台
三等奖 20名 FILCO机械键盘斐尔可104键圣手二代

20名鼓励奖,颁发纪念品与获奖证书,同时我们也将走入北京大学、清华大学做活动宣传与小程序培训。

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

支付宝开放能力 https://docs.alipay.com/mini/introduce/pay

阿里小程序云 https://www.aliyun.com/product/miniappdev

支付宝小程序开发文档:https://docs.alipay.com/mini/introduce

支付宝开发者官方万人钉钉群:23390832

活动举办方:支付宝、阿里标准团队、阿里云、蚂蚁智能科技

_


优秀文章推荐:

作者:斯文的鸡蛋
《支付宝小程序项目实战》分享5个可以真实运行的支付宝小程序应用
作者:吴胜斌
原生JS开发的轻量、无依赖的日历组件

参与话题

奖品区域 活动规则 已 结束

  • 奖品一

    无人机 x 1

  • 奖品二

    Switch游戏机 x 5

  • 奖品三

    经典机械键盘 x 20

52个回答

8

1486830501093871 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

vant-aliapp,开源版本 vant 支付宝小程序组件库,30+ 小程序组件应有尽有,不要错过了?

dashboard
_2019_09_04_4_08_09

2

吴胜斌 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

开源了一个基于原生JS开发的轻量、无依赖的?日历组件,可用于React、Vue、Angular等框架,欢迎体验。
github地址:https://github.com/simbawus/calendar,感觉能用得上的,可以点个star收藏下喔,有备无患,谢谢老铁们的支持。

扬朋 回复

评论
2

斯文的鸡蛋 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

个人业余时间写的《支付宝小程序项目实战》,目前正在连载中,已完成 1-3章的内容,第四章正在紧张的更新当中。
本书由5个指南构成,每个指南都是一个具体的项目,在学习每个项目时,开发者将自己动手构建一个实际的真实项目。这意味着学完本书时,你将会获得5个可以真实运行的支付宝小程序应用。
本书涵盖的内容包括:

  1. 自定义组件
  2. 性能优化实践
  3. 前后端开发联调
  4. 可视化小程序开发
  5. 包含地图类的小程序开发
  6. 开发经验分享等(涵盖项目分析,接口定义,项目设计等内容)

最主要的是本书是免费的哦!!!

帅得头晕 回复

能不能搞个pdf,在线看不方便

斯文的鸡蛋 回复

整体完成后会导出成pdf格式

扬朋 回复

太赞了

评论
3

ann_0707 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

基于uni-app的微信小程序、H5迁移到支付宝小程序问题集合

项目背景简介

项目最开始是基于mp-vue搭建微信小程序,由于需求需要,要做H5版本的。所以采用了
uni-app把微信小程序重构了, 使它能成为H5、微信小程序二合一的版本、后面又因为需求的变更,要把H5版本的修改为支付宝小程序,这篇文章主要讲的就是,我在迁移到支付宝小程序遇到各种问题和解决方法,希望对大家有所帮助。

标签问题

  • <img>标签在支付宝图片渲染不出来
<img />
<!-- 更换成下面这种 -->
<image />
  • <span>标签的点击事件不生效
'<span @click="test"></span>'
// 更换成下面这种, 点击事件才生效
'<text @click="test"></text>'

字体图标问题(iconfont)

在H5中,只用复制iconfont的代码即可,例如

'<link rel="stylesheet" href="https://at.alicdn.com/t/font_111111_rbodvzht4g8.css">'

在微信小程序中,只需要把从iconfont官网下载下来的代码,中iconfont.css的文件拷贝到项目中,然后在项目中引用即可。

但是在支付宝小程序中,当我按照微信小程序的方式配置,在调试模式下,是能正常展示的,但是在预览模式下却不能展示。此时需要把下载下来的源码中字体图标文件,对应的拷贝到项目中,才能正常展示。

小程序不支持DELETE、PUT

具体的解决方法是,前端把DELETE、PUT请求更换成POST请求,在请求头加入X-HTTP-Method-Override, 服务端根据Header:X-HTTP-Method-Override,转换请求方法,具体可以参考下面文章

HTTP中间层不支持PUT/DELETE等特定METHOD时的处理

需要注意的点--调试模式和预览模式

支付宝小程序的调试模式和预览模式有较大的差异,有时候在调试模式下,感觉各种功能都特别完美,但是预览模式会让你崩溃

这里最主要的影响是,生命周期函数的问题,在微信小程序中和H5中的,onLoad事件中,执行页面渲染的时候,页面显示的很正常,但是到支付宝的某些页面,特别是该页面并没有请求后端接口,只是根据地址栏参数不同,页面展示的状态不同,就大部分会出现这个问题。下面我用代码详细描述这个现象

这个页面是订单支付页面,当支付完成后,会跳转到订单结果展示页面,并携带状态参数

'this.$router.push({
    path: '/packageSecondary/orderResult/index', 
    query: {
        status: 'success'
    }
})'

订单结果页

`<div class="result">
    <div class="icon-container">
        <icon
            v-if="status === 'success'"
            type="right"
            color="#02C2C9"
            font-size="72"
        />
        <icon
            v-else
            type="failure"
            color="#ff6f37"
            font-size="72"
        />
    </div>
    <div class="text">{{ status ? '支付成功', '支付失败'}}</div>
</div>`

该页面的onLoad事件代码

`onLoad(opt) {
    this.status = opt.status
}`

在支付宝小程序中,当我们第一次跳转到这个页面的时候,会正常展示,但是第二次跳转到这个页面的时候,就是一片白板,或者undefined等等问题(这些会发生在预览模式下,调试模式下不会出现这个问题

对于这个问题,应该没有触发视图的更新,但是具体的原因还是没能得知,有知道的兄弟可以告知一下。对于以上问题,我一般有两个解决方法。

// 方法一: 采用计算属性
`{
    get orderPayInfo () {
        let result = {
            title: '订单支付成功',
            subTitle: '您的订单已支付, 请耐心等待发货',
        }
        if (this.status === 'fail'){
            result = {
                title: '订单支付失败',
                subTitle: '您的订单还未支付, 快去支付吧',
            }
        }
        return result
    }
}`

`onLoad(opt) {
    this.status = opt.status
}`

// 方法二: 采用mounted钩子函数
`onLoad(options) {
    // 获取参数
    this.status = opt.status
}`

`mounted () {
    // 在mounted重新
    this.orderPayInfo = this.status === 'success' ? {
        title: '订单支付成功',
        subTitle: '您的订单已支付, 请耐心等待发货',
    } : {
        title: '订单支付失败',
        subTitle: '您的订单还未支付, 快去支付吧',
    }
}`

授权逻辑

这个是开发小程序最开始的一步,有点同学经常会在技术群里,会问到授权弹窗出现两次、怎么判断用户已经授权成功等等问题,下面我把我的代码分享一下吧

授权弹窗出现两次,这个官方有解释

正常获取会员基础信息需要弹窗两次进行授权确认:一次是 my.getAuthCode 获取用户授权码的授权框, 另一次是 my.getOpenUserInfo 中获取用户基础信息的授权框。my.getAuthCode 使用静默授权方法(令 scopes 为 auth_base)即可实现只出现一个授权弹框。

'<button'
    'v-if="!userAuthorized"'
    'class="btn"'
    ':loading="showAuthLoading"'
    'open-type="getAuthorize"'
    'scope="userInfo"'
    '@getAuthorize="handleGetAuthorize"' 
    '@error="onAuthError"'
>
    支付宝授权登录
</button>
// 判断用户是否已经授权过该小程序
`checkUserAuthorized () {
    return new Promise((resolve, reject) => {
        uni.getSetting({
            success(res?) {
                const auth = res.authSetting['userInfo']
                auth ? resolve(true) : reject(false)
            },
            fail() {
                reject(false)
            }
        })
    })
}`

// 获取授权code--进行登录
`handleGetUserCode () {
    return new Promise((resolve) => {
        my.getAuthCode({
             scopes: ['auth_base'],
             success: (res) => {
                resolve(res.authCode)
            }'
        })
    })
}`

// 看你们项目需求,是否需要传递用户头像、昵称给后端
`async handleGetAuthorize () {
    // 获取用户的授权code
    let code:any = ''
    await this.handleGetUserCode().then((data) => {
        code = data
    })
    // 获取用户头像和昵称
       my.getOpenUserInfo({
        'success: (res)' => {
            // 项目逻辑
        }
    })
}`

`onLoad () {
    // 判断用户是否已授权该小程序
    this.userAuthorized = await this.checkUserAuthorized().catch(() => false)
    if (this.userAuthorized) {
        this.handleGetAuthorize()
    } else {
        // 自行处理
    }
}`

希望上述内容对各位有所帮助、由于这个md格式支持的不是特别好,所以上面的内容,大家复制的时候,可以自行调整格式

排版更好的链接

c1ay 回复

123

评论
2

黄二刀 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

小程序啊小程序,就是用户体验超级差。

慢慢优化吖

yuanyan 回复

体验差主要原因是小程序的架构决定的,当前主流小程序都借鉴了微信小程序架构

评论
3

1486830501093871 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

文档: https://ant-move.github.io/website/docs/mini-code-style.html
Github: https://github.com/ant-move/TechNews/blob/master/posts/mini-programm-code-style.md

总结了一份小程序开发风格指南,希望对各位小程序开发者们有所帮助。

_2019_09_06_5_09_51

2

nic3styou 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

使用scroll-view横向滑动效果
看开发者文档给的demo写的,首先不太明白所谓的id,以及js内头部引用的const order =['x','x','x'],其次布局的时候发现所有的图片不在一行显示,每个子元素用display:inline-block布局,最外层的class设的width:100%;没效果;去社区提问,有个好心的技术提供的解答方案没能解决我的问题,后来发现在最外层的class上加上white-space: nowrap;即可。。没想到,还是css不熟的原因啊,不能灵活运用每个样式。

我有个疯姑娘 回复

牛批哦

评论
2

我有个疯姑娘 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

非小程序前端——跳转小程序的链接拼接问题:
异常情况:
按官方文档方式拼接链接无法正常打开带有参数的页面
官方文档:
官方提供的解决方法详见如何跳小程序。
![546882_20190815114518692_1204853168](https://yqfile.alicdn.com/0c208239bd38df87c39e42459475319d4196e727.png
踩坑实操:

如果配置的页面没有参数还好,不会出问题,如果有参数,很可能配出来的链接无法正常获取到携带参数的,坑在这里:

1.page参数:刚开始以为是页面path路径(也就是app.json中的路径),因为后边还有query参数,理所当然的会认为这里只需要path;

2.query参数:虽然看到“启动参数”四个字,但是这种路径没有配过小程序app的启动参数的,微信小程序也不是这么玩的,所以这里就理所当然的被认为是页面参数了;

然后拼接出来的路径是这样的:

window.location.href="alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail&query=goods_id%3d101"
很显然,这样是无法正常获取页面参数了。

正确操作:

//有页面参数(没有启动参数)
location.href = "alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail"+encodeURIComponent("?goods_id="+goods_id)
//有页面参数,有启动参数(如渠道号、平台号等打开小程序就需要传过来的参数)
location.href = "alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail"+encodeURIComponent("?goods_id="+goods_id)+&query=encodeURIComponent("appParams="+xx)
总结:

官方文档突出了启动参数,却压根儿没提页面参数,初次接触,踩坑难免,毕竟支付宝小程序还在成长中,我们自己也得多多实践,多多尝试。

2

丁鸽鸽 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

讲一下在开发支付宝小程序中踩到的坑,简单的东西,但是在产品初期能够避免会省去很多麻烦,现在开发的很多产品,不管是移动端,还是pc端等等,都离不开富文本编辑器。
但在小程序当中使用富文本怎么办,其实官方是提供了富文本组件的
rich-text 这个组件
image
但是一般富文本编译出来的最终样式是一堆HTML标签嵌套的内容,小程序是识别不了这些标签的那怎么办,
官方也给出了解决方法;
image
mini-html-parser GitHub地址:https://github.com/ant-mini-program/mini-html-parser
这个插件就是让小程序富文本看不懂的代码转换成他支持的格式,最终转换为数组形式。
注意!!!!坑来了
富文本一般会给公司的运营同学,编辑同学使用,那么她们想要排一个好看的排版当中是少不了按回车换行的。那这种回车大部分富文本编辑器可能会转换成br标签注意是br而不是br/,没有结尾标签,那么如果使用mini-html-parser转换的话就会把br标签后面所以的内容嵌套进去相当于(文本文本br文本文本p文本.....最后末尾没内容了结束br)
但是你实际想要的并不是这种排版最终应该是这样的(文本文本br文本文本...)
两种的区别就是没有闭合标签的br会把后面的内容嵌套到br里面去。但是这个标签他里面放的了内容吗(放不了)
所以就导致了页面渲染不出来,或者富文本渲染不出来。
怎么解决呢???
目前想到两种方式:
1,给所以br改为上闭合标签br/,
2,不用br,用p(苦了运营同学)
3,我正在看mini-html-parser的源码,从源码下手。
目前先写小程序这么一个坑吧,
下次整理好了再发几个其它的!!!
给个赞呗!

2

1278017454380352 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

支付宝官方虽然提供了小程序支付模版,但要把基于模版创建的项目运行起来,还需要在有公网域名的服务器上部署demo后端服务;即使部署起来了,小程序支付接口还得挂包签约才能使用;最关键的是还得要有企业账号才能挂小程序支付功能包,太难了。。。
好在支付宝沙箱提供了支持,部署了改造后的demo后端服务,基于小程序支付demo前端模版,稍做修改即可运行小程序支付服务,体验小程序支付场景。
那么问题来了,怎么使用沙箱环境开发支付宝小程序呢?看这里:
https://www.yuque.com/alipayudqbwdl82b/sandbox/miniapp

2

一个被床封印的程序猿 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

附上一篇:支付宝小程序营销组件 “老虎机” 的实现方案: https://blog.csdn.net/qq_31699019/article/details/101476828

2

韩俊强 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

阿里小程序用户体验有很好的空间, 期待优化体验~

2

饭娱咖啡 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

我也来支持下!O(∩_∩)O

1

信易租 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

                 支付宝小程序开发中遇到的问题及解决方法

我们最早是做微信小程序开发,偶然接触到了支付宝小程序,在开发之中遇到了问题总结下,还忘多多指教。

  1. 获取会员完整信息时需要调用两个api: my.getAuthCode和my.getOpenUserInfo,这样会弹出两次授权弹框,可将其中getAuthCode的授权方式改为静默授权,即可只出现一个弹框,如下
    my.getAuthCode({

      scopes: ['auth_base'],
      success: (res) => {},
      fail:(res)=>{}

    })

  2. 在随触摸动态改变元素位置和大小时,如随拖动事件每次调用setData重渲染会造成比较大的性能开销造成卡顿。应尽可能的歼敌setData的调用次数,图像随拖动而改变大小位置时,可使用间隔渲染,每隔几个事件渲染一次,减少性能开销,提高流畅性。
    on_move(event) {

let _x = event.touches[0].clientX
this.data.skip += 1
if (this.data.skip % 5 == 0) {
this.setData({
x:_x
})
}

  1. 对智能客服组件contact-button 添加style样式无法生效,对其的位置定位的实现应当将其包裹在容器中,对容器添加样式,如下

        <contact-button tnt-inst-id="NHXXXXXX" scene="SCE000XXXXXX" size="25" color="#00A3FF" icon="https://www.xxx.com/support.png" />
      </view>

    4.小程序打开方式有一般的进入主页和直接进入某非主页页面,如进入非主页页面,应当检测是否授权和已登录如无登录应执行相应登录以避免影响后续功能。

5.在开发者工具IDE中my.navigateToMiniProgram可以正常收到回调(success,fail),在实机测试中,回调事件没有被触发执行。因此尽可能的将相应代码写到回调外执行。
6.小程序使用ACSS样式语言,通常使用的定位单位是rpx,在使用rpx定位是,要注意的一点是不同机型使用同一rpx数值定位可能会有细微位置误差,可能是由于rpx在不同机型有细微不同造成的,例如iPhone5与iPhone6P有细微差位置差,在开发时位置紧密的地方要相应注意。
7.在使用pop-up组件时,如需要在组件内放入可滑动的元素,需要将disableScroll="{{false}}"设为false,如果所在的页面是禁止滑动的,即主页面已设置disable-scroll="{{true}}",则需要将pop-up组件拿出主容器,移动到主页面外,即可顺利实现pop-up弹出组件内的滑动。
8.向全体用户主动推送模板消息,需要使用用户的formId,需要注意的是每个formId有推送次数限制,当达到次数上限时,继续使用此forrmId像其推送消息会返回错误从而影响全体用户消息的推送。在推送时应当事先检测formId的使用次数,并在使用后记录。
9.官方扩展UI组件使用时如样式不能很好适应,可在小程序开发者工具IDE中打开console,找到AXML,在AXML中浏览并找到相应DOM元素,找到后可在右边关联样式中找到样式名,在页面ACSS中重写样式即可修改UI组件样式

总结:我相信支付宝小程序离钱,离信用,离服务更近,我相信支付宝小程序在未来的战场里会越来越好,越走越远。

1

游客7ov5ia5a4rax6 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

支付宝小程序开发常见问题
1、基于推广参数跟踪,要要确保应用启动的时候能获取

2、图片使用,要注意background和image引用的区别
3、使用webview组件要确保访问的域名要配置到白名单中

4、唤起小程序,有两种常见情景,1是小程序to小程序,2是通过schema唤起小程序。注意!使用schema唤起小程序需要确保上架一次。
常见使用:
支付宝收款码 alipayqr://platformapi/startapp?saId=20000123
支付宝alipayqr://platformapi/startapp?saId=10000007&qrcode=
支付宝付款 alipay://platformapi/startapp?appId=20000056
支付宝记账 alipay://platformapi/startapp?appId=20000168
支付宝滴滴 alipay://platformapi/startapp?appId=20000778
支付宝蚂蚁森林 alipay://platformapi/startapp?appId=60000002
支付宝转账 alipayqr://platformapi/startapp?saId=20000116
支付宝手机充值 alipayqr://platformapi/startapp?saId=10000003
支付宝卡包 alipayqr://platformapi/startapp?saId=20000021
支付宝吱口令 alipayqr://platformapi/startapp?saId=20000085
支付宝芝麻信用 alipayqr://platformapi/startapp?saId=20000118
支付宝红包 alipayqr://platformapi/startapp?saId=88886666 (跳转支付宝红包页面)
支付宝爱心 alipayqr://platformapi/startapp?saId=1000009
支付宝升级页面 alipayqr://platformapi/startapp?saId=2000066
支付宝滴滴打的 alipayqr://platformapi/startapp?saId=2000130
支付宝客服 alipayqr://platformapi/startapp?saId=2000691
支付宝生活 alipayqr://platformapi/startapp?saId=2000193
支付宝生活号 alipayqr://platformapi/startapp?saId=2000101

5、httpRequest 同样要配置域名白名单,并且要有https支持才可以

6、小程序跳小程序的参数测试,只需要两台手机真机运行即可,模拟器是不能实现的。

7、使用webview组件,如果需要代理转发指定html,需要确保路径后缀没有.htm,否则无法代理访问
8、测试的时候环境切换可以做成一个页面访问进行切换,尽量减少硬代码配置,导致失误发布出去。

9、尽管支付宝小程序更新方便,但还是要把它当做app端的处理来实现,对于一些有变动风险的数据还是要走接口下发更好。

1

胖啄木鸟 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

基金公司支付宝小程序运营活动的一篇手记:国泰基金--新年活动

1

游客smmkwemhk7q6m 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

我是来自快宝网络的一个参与了支付宝小程序的开发人员,当知道支付宝平台推出了小程序时公司非常重视,很快就开始了开发工作。在开发过程中支付宝运营团队、开发测试团队亲自组织相关人员和我们微快递平台相关人员通过电话、钉钉群、甚至面基等方式一起讨论了该项目的整个流程。

我们这个产品叫做“微快递”,是专为用户提供在线智能快递查询、快递状态实时推送、快递网点查询、快递时效和价格查询、附近快递员和网点和快递员互动留言等一站式寄递服务的小程序。

下面,我将会以快递详情落地页为入口,从原型开发、联调测试、性能优化、发布上线等几个方面来讲解本次开发的过程已经遇到的问题和解决方法。

一、原型开发
1、支付宝小程序开发概述
支付宝小程序是手机应用嵌入支付宝客户端的一种方法,这种 Web 技术,能够用一套代码同时支持 iOS 和 Android,接近原生体验,同时提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)。

在开发之前,首先我们需要下载 支付宝小程序开发工具(https://docs.alipay.com/mini/ide/download

2
小程序开发者工具(简称 IDE)是支付宝开放平台打造的「一站式小程序研发工具」。IDE 不仅支持开发支付宝小程序,相同代码还通用于蚂蚁开放生态、可直接发布至淘宝、钉钉、高德等应用平台。
我们的整个小程序的开发、预览、调试、上线都需要借助该工具平台的支持,具体的用法可参考官方文档(https://docs.alipay.com/mini/ide/overview

有了工具,我们接下来简单了解下支付宝小程序框架。
3
小程序分为 app 和 page 两层。app 用来描述整个应用,page 用来描述各个页面。
app 由三个文件app.js(小程序逻辑)、app.json(小程序全局设置)、app.acss(小程序全局样式表)组成,必须放在项目的根目录。
page 由四个文件组成,分别是js(页面逻辑)、axml(页面结构)、acss(页面样式表)、json(页面配置)组成。
我们写的所有代码最终将会打包成一份 JavaScript 脚本,在小程序启动的时候运行,在小程序结束运行时销毁。

最后,到小程序具体的开发中,我们需要注意:

.axml文件虽然和我们开发者熟悉的.html一样都是表达页面结构,但是组件元素已经变得不同,
例如我们使用组件代替

组件,使用代替组件等,这些都是为了实现更好的页面适配做的处理,还有,.axml文件也使用了类Vue的指令语法,帮我们便捷的处理判断显示、循环显示等,将结构与逻辑做了更好的分离,极大地提升了开发效率。

.js除了具备js语法外,还能通过挂载在my全局变量上的各种方法来直接调起支付宝小程序提供的丰富端能力,诸如:用户信息、本地存储、支付等

.json文件用于配置当前页面的窗口表现,一些特别的api使用,能使我们对页面全局配置增加了更多的便捷性。

特别值得注意是,随着支付宝小程序团队不断的努力投入,某些组件和api技术更加开放和便捷,诸如扩展组件、插件、云开发、开放组件与能力(获取会员收货地址、获取会员手机号等)越来越进入我们的视野中,毫无疑问,这些技术的融入,会让更多开发者和用户感到更多的便捷。

**2、规范差异较多,修改基础组件布局方式
**
聊完了开发方式,接着我们看我们本身的任务。

首先,为了将我们的落地页和支付宝客户端形成默契配合,不至于让用户感到被打扰,支付宝团队为我们提供了快递详情页设计的规范。
有了先进优雅的设计方案,我们微快递团队从接到规范的那天下午就下定决心,一定要前后端加班争取第二天就将本次任务推进到可以简单内测阶段。
4

可是,往往理想与现实总是差距较大。

这套设计规范十分完善与优雅,但目前与我们的内部规范还是存在较大差异,为了抹平差异,我们单独设计开发了我们的的组件,从样式到结构,一丝不苟的处理规范上的每个细节。

也许用文字表达总是很苍白,但是,作为web开发者来说,我的心情是很复杂的,对于一个快速发展中的公司,我们做工具软件更多的注意力关注到了软件的稳定性、便捷性。

在这个用户体验竞争激烈的当下,其实软件的美观易用也是相当重要的,可是,由于种种原因,我们的的投入一直处于不断进步中,尚未达到这套规范的严格程度。

那天晚上,我们加班到很晚,终于前后端大概将逻辑跑通,看着这重要的落地页,在这套设计规范的加持下,日渐完善。

二、联调测试
支付宝小程序的开发测试方式是很独特的,我认为非常值得讲一下。
5
首先,开发过程中,除了在开发工具上通过模拟器可以随时直接观看到效果,还可以推送到真机上进行预览,而且预览方式除了扫码预览,还能直接推送开发者手机预览,
这对于开发者及时了解真机差异,真的很方便。

另外,真机调试模式也是十分的溜,在我们的实际使用中,往往用来定位一些特殊机型上的兼容问题,有了它,再也不用担心找不到用户的奇葩问题了,哈哈。

最后,我们都知道,小程序一般分为开发版、体验版和线上版三个版本,我们多将开发版用于开发者开发使用,体验版多用于测试人员测试新功能,只有线上版交付真实用户。
在这个过程中,我们还要针对诸如扫码打开小程序、模板消息打开小程序等场景区分版本。比如,我们新做了一个扫普通二维码打开小程序的功能,为了方便测试人员扫码打开体验版测试,
通常在微信小程序中,我们需要在后台针对特定链接做不同设置才行,但是,支付宝小程序的机制则是,打开上次使用过的小程序版本,省去了我们后台各种设置的过程,可谓十分方便。

最早接触支付宝小程序的时候,真机与模拟器不一致的现象时有发生,但这次项目经历,让我感受到了支付宝小程序开发工具的成长是十分迅速的,真机调试更加方便,一致性更加完善。

经过连夜的开发,我们终于赶到第二天开展内部测试了,但是测试中也发现了很多问题,可以说是一波三折:

1、第一次上线内测:理解有误,导致接收参数失败
在我们内部大致跑通流程后,为了配合支付宝团队联调测试下整个流程,我们将本次版本上线,(后台尚未推送用户,仅限相关人员使用)。

因为联调这部分内容,需要支付宝新版客户端,所以从支付宝跳转我们小程序这部分我们只能等待支付宝团队测试,于是忙碌了一天多,我们就静下心来等待联调结果。
后来,我们得到结果,跳转失败。。。

于是,我们赶紧查找问题,终于,发现我们犯了一个小失误。
由于我们开发启动的较快,在支付宝团队给我们跳转落地页的约定规范前,我们就将落地页的页面交付开发中了,所以没有特别仔细的看清约定的跳转规范中,页面的路由是固定写死的,
在前期的沟通中也没完全理解好,所以才导致了这次失败,所以我们赶紧修复了问题。

现在回想起来,越是任务紧急,越是需要跨团队沟通,我们越应该认真细致,这也是一种提高工作效率的方式,这点道理,让我印象深刻。

2、第二次上线内测:登陆流程优化
跳转的问题处理好后,我们大致的流程是跑通了的,想到这个任务能快速推进,这一点让我们整个团队很兴奋。

但是,后来我们得到反馈,在跳到我们落地页后,我们的页面会执行一个登陆流程,但是这个流程放在本次任务中,似乎是有影响用户体验的。
最后,经过我们的细致配合讨论,我们优化了登陆问题,又重新发版联调。

现在回想起来,当局者迷,也许越小的细节问题,越能赢得用户体验的好感,这点道理,同样让我印象深刻。

3、第三次上线内测:修复部分机型bug,增强代码健壮性
在经历两次联调测试处理后,支付宝团队又耐心组织人员,帮我们进行了其他相关流程的检验,和整个代码层面的检测。

于是
在支付宝团队全面的机型检测覆盖下,我们发现了诸如IPhone4S等部分机型上的显示问题
在支付宝团队的代码检测中,也发现了部分代码潜在的问题。

就这样我们一一进行了修复。

那几天我们不断的联调测试,发现问题,解决问题,整个项目也在日渐成熟。

三、性能优化

在联调跑通了整个流程后,我们得到反馈,从支付宝跳转到我们小程序整个启动时长有时会超过5000ms,标准是3000ms,看到这个问题检测报告,我们认识到性能优化调试变得十分关键。

但是,凡是从事技术开发的人都知道,作为一个正在快速发展中的公司,在平时的开发中很难像大公司一样,有过多的资源全力投入到性能优化中,
不过,鉴于性能优化的必要性,我们还是借助支付宝小程序开发工具,尽我们所能对小程序做了相关的性能优化调整。

1、支付宝小程序开发者工具·性能调试介绍
小程序性能调试可在使用小程序开发者工具开发小程序时,无需连接数据线,通过扫码即可在真机上进行小程序性能调试。

如下图所示
6

点击 IDE 上方工具栏的 调试器 ,在下方调试面板中,选择 Performance,进入无线性能调试。

点击调试面板左上角第一个 开启扫码 按钮,构建小程序,生成二维码。使用支付宝客户端扫码,即可开启无线性能调试。

开启调试后,我们只需操作真机相应需要调试性能的位置即可采集到相应数据,

最后,分析采集到的小程序性能数据,得到分析结果,再采取相应方式应对。

2、开启性能调试,分析结果,解决问题

经过反复的测试,我们得到如下结果:
7

针对以上问题的存在,我们经过研究决定,针对性做如下处理:

1、优化小程序启动时资源请求,减少不必要接口和图片请求

我们都知道,现代web应用内容变得日渐庞杂,各种交互和展现方式导致了过多的资源请求。

web应用过多的资源请求本身就是对带宽,对应用启动时间的一种严重影响。

为此我们决心联合后台一起对部分性能调试中发现的严重耗时和不必要资源请求进行了优化处理,或砍或合,坚决不浪费请求时间。

2、减少小程序包的体积
减少小程序包的体积无疑是对手机端优化很重要的一个环节。
为此,我们着手从当前小程序的静态资源、复用代码等角度一一做了处理。

3、分包加载
分包加载是指开发者可以按需将小程序划分为若干个不同的子包。支付宝在服务端构建时,会根据开发者的配置,打成不同的分包,用户在使用小程序进入对应分包的页面时,客户端会下载该分包,并进行解析和渲染。

为了满足日益复杂的小程序业务需求,同时提升首次打开速度,支付宝小程序从客户端 10.1.60 版本开始支持分包加载功能。

为了提交加载速度,我们将无关的页面和逻辑打包到了分包,主要的页面包含tab页面,同时包含了小程序所需的公共资源(例如 js 脚本等)保留在了主包。

至此,我们的微快递小程序进入了分包时代。

由于我们是在业务中第一次尝试分包加载,我本来理解的是分包只是在加载的时机上有不同,其他并不应该有区别,
但是,在实际的开发调试中发现,有些细节还是与我的理解有出入的:
例如分包后的页面,跳转路径也需跟着调整,如果原来页面路径是/pages/help/help,而分包名为packageA,那么此时新的页面路径就变成了 /packageA/pages/help/help
针对这一点,虽然我们做了相应兼容处理,但我觉得分包加载应该优化一下这一点,毕竟从逻辑上讲,分包不应该造成如此差异。

4、优化异步同步接口

众所周知,小程序的api接口大多分为异步和同步两种,关于异步和同步的区别已经是一个老生常谈的话题了。
同步, 在很多情况下, CPU其实是在等待中度过的, 比如等待一个网络连接, 等待服务器数据的返回
异步, 就是把这些等待的时间给充分利用起来了, 可以先让cpu做其他的事情,等某件事做完了,会通过callback的方式通知并处理没完成的事情
简单来讲,异步的方式效率更高些,同步的方式过多容易造成阻塞,但从写法上讲,显然同步更讨巧,不至于像异步那样陷入回调地狱。

针对以上调试结果,为了解决同步调用检测反馈的问题以及避免过多同步接口调用导致的阻塞,我们决定从源头入手减少对同步接口的调用,尽量更换成异步。

5、优化代码逻辑
在经历以上措施后,再经过性能调试后,我们发现,调试结果已经的得到了明显的改观,但我们仍然决定,再深入复杂的页面逻辑中,查看是否有不合理的逻辑处理,争取进一步优化代码逻辑

最终,小程序遇到的一些性能瓶颈,得到了一定程度的改善,以下是部分机型测试启动时间结果:
8
9
10
11
那几天我们不断尝试各种手段去探索解决性能优化的问题,尽管做法方面可能依然有待提高,但是真的是在尽全力了。

四、发布上线

经过了初期的需求讨论、原型开发、联调测试、性能优化、服务器压力测试等重重考验后,本次开发任务终于到了准备正式上线的阶段了。
支付宝小程序这边的上线流程非常完善
首先需要借助支付宝小程序开发工具上传代码
其次将代码提交审核,初期我们最早接触支付宝小程序的时候,审核相对较慢,大概需要一周左右,但是现在我们惊喜的发现,审核的速度大幅度提高,一般半天到一天就可以审核通过,这样极大地方便了开发者
另外,支付宝小程序的灰度机制是相对完善的,小程序审核通过后,可以通过精细的灰度再正式推到线上,这对我们这种追求稳定的服务类团队十分友好。
12

经过多天的努力,微快递终于上线了。

微快递提供的在线寄递服务,其便捷性极大的方便的用户,目前用户量已经达到了5000余万,每天都有大量用户通过微快递来进行发送快递,也真正成为了一款大家日常不可或缺的常用小程序。

最后特别感谢支付宝运营团队、开发测试团队在微快递开发过程中的大力支持和帮助。

1

哦知道了 复制链接去分享

2000元阿里云代金券免费领取,2核4G云服务器仅799元/3年,新老用户都有优惠,立即抢购>>>

我从19年9月开始接触到支付宝小程序,参与了公司2个小程序开发。刚觉得对支付宝小程序有点了解了,突然又来了个“轻店铺”,好吧,刚好有客户需求,那咱们就干!但是轻店铺真的太新了,完全没有文件可以指导,客户的店铺最终也没有申请通过,摸索了几天只能先放弃了……紧跟着又听说了淘宝小程序、淘宝品牌号,目前都还在摸索中前进……
我只想说,我真的太难了!
虽然吐槽了一通,但是这一个月的“信息量”真的大到让我无比兴奋,每一天都是新的挑战!

3
http://www.vxiaotou.com