专栏首页携程技术微分享回放 | 携程小程序开发的那些事儿

微分享回放 | 携程小程序开发的那些事儿

作者简介

朱天超,携程技术中心基础业务研发部iOS开发工程师,从事一线iOS开发,偶尔也写写脚本做些工具。

*视频时长约38分钟,请在WiFi环境下观看*

小程序是一种不需要下载安装即可使用的应用。它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用;也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。

早在2016年9月,携程就获得小程序内测名额,在对微信文档规则调研、确定需要开发的业务之后,就开始了风风火火的开发。

回顾三个多月的开发过程,其中碰到了各种问题,也尝试了一些解决办法,最终打造了携程独立的小程序框架。

本文将主要介绍携程小程序的框架,开发和发布审核中碰到的问题及我们的一些解决办法。

一、携程微信小程序的框架介绍

1、CPage()

CPage是封装了微信的Page的函数,内部通过插入中间件装饰页面初始化的option,主要实现页面间通信、页面层级控制、埋点、页面分享等功能。

中间件

  • Base : 装饰option
  • Navigator:内部维护navigatorOpts存储上文的参数回调等,pageStack存储页面栈信息
  • UBT :为业务提供埋点分析、统计页面驻留等信息分享

分享

  • 在CPage中特殊处理,同时也方便统计分析

CPage中data处理的具体流程如下图:

流程解释:

  1. data传入CPage
  2. Baes同步data生命周期,接受data自有属性
  3. Navigator控制层级,使用navigateTo上下文交互
  4. UBT提供统计分析功能,及后续更多中间件处理
  5. newData接受data.onShareAppMessage和中间件的属性
  6. 传入原生Page()

2、CWX

cwx的原型是wx,扩展了更多API,工具类、网络请求相关、定位相关、组件API等。

网络请求

wx.request()最大并发数是5,所以要避免同时并发很多请求。

主要在两个方面:

1、cwx提供了request,内部通过队列的方式控制request,并且提供了cancel方法取消在等待队列中的request

2、服务端数据合并,小程序端单个页面请求减少

工具类

提供常用的方法,如Base64加解密,JS对象类型的判断等

定位

1、使用wx.getLocation获取到经纬度,上传服务端匹配定位城市相关信息,使用百度逆地址解析

2、内部实现队列控制定位请求,解决授权等问题

组件API

对接组件,提供快捷使用组件的API,可在任意页面使用基础组件

cwx.component.calendar()

cwx.component.city()

cwx.component.imagebrowser()

3、基础组件

基础组件都是基于CPage实现的,参数传递页面回调都遵循CPage的规则

  • 日历组件 提供常用的日期选择功能,日期元素支持一级标题、二级标题及颜色等自定义
  • 城市选择组件 支持国内和国际城市选择,支持索引筛选,提供搜索功能
  • 图片浏览组件 提供图片大图浏览支持标题和描述,如果有层级约束可使用wx.previewImage组件,建议直接使用wx.previewImage,有三点好处:1、不占层级;2、支持分享;3、性能好。

组件效果图如下:

二、开发过程中的问题及解决办法

1、渲染白屏

一次性渲染几百条数据,会造成页面长时间白屏,即便使用wx.showToast也无法规避体验较差的问题,可考虑一下几个方面解决问题:

1、局部渲染:如果页面有明确的区块,同时数据也是隔离的,可优先在onLoad中渲染一部分,数据量较大的推迟到onReady中渲染

2、列表渲染:设计为分页模式,在onReachBottom中追加下一页数据;使用scroll-view监听bindscrolltolower自动追加下一页数据

3、设计规避:页面设计时考虑渲染问题,采用其他交互方式规避

2、页面层级

小程序规定页面层级最多不超过5层,可考虑一下解决办法:

1、业务交互上规避:超过5层时小程序端是无能为力的,只能在业务交互设计时避免

2、使用浮层:能使用浮层取代的Page的,优先考虑浮层

3、wx.redirectTo:某些情况下可使用重定向

Promise

IDE在0.11.112200版本移除了Promise,继续使用可自行引入es6-promise-min

3、授权弹框

在使用定位和获取用户信息API时,微信客户端会弹出授权框,如果用户未授权,并且同一时刻多次调用授权API,会造成多个授权框叠加的情况。

解决方法:对需要授权的API进行封装,统一控制权限,避免在未得到授权的情况下多次调用授权API,如cwx.locate内部使用队列控制定位请求。

4、Package Size

小程序规定上传的包大小不得超过1M,代码层面可参考以下方法减少size:

1、IDE控制台提示的warn尽量解决:wx:key

2、将wxml中的逻辑判断迁移到js中

3、wxss中尽量少用import,将大的wxss根据需要拆分成多个小的wxss import

4、调试代码删除

5、图片资源尽量在线

6、代码压缩

5、异常报错

使用微信IDE开发过程会碰到很多问题,常用的解决办法:

1、代码写好一定要ctrl+s

2、回退代码排错

3、逐行删代码排错

4、清理缓存

5、重启IDE

三、审核遇到的问题

1、审核中的版本无法撤销

如果提交审核就不能撤销,只能等待微信的审核结果,必须要注意。

2、提交新的版本会将已经审核通过未发布的版本覆盖

小程序审核流程并不像AppStore可以同时发布多个版本,不确定微信后续会不会修复。

3、提交页面和类目不匹配被拒

填写页面信息时,注册的页面需要匹配小程序的类目,并且每个类目只能注册

一个页面。

4、体验问题被拒

微信对交互体验审核比较严格,如果交互有明显的问题或者逻辑不合理会被拒绝。

四、后续的发展规划

为了方便后续更多小程序的开发,我们还会将主版本框架抽取出来,做成可配置的独立的SDK;以及根据小程序的需求,接入集成发布,动态打出不同类型的包,方便各种渠道。

本文分享自微信公众号 - 携程技术中心(ctriptech),作者:朱天超

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

原始发表时间:2017-04-06

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android分享微信小程序失败的一些事小结

    小菜这两天接入分享微信小程序的入口,本来很简单的几行代码,可最后搞得我头昏脑胀。微信小程序官网上的接入方式已经说的非常清楚,可在小菜自己实践的过程中,却始终不成...

    砸漏
  • 周末去哪玩?这里有超多创意活动,马上走起吧!

    其实,好时光都该被宝贝,因为有限。而周末,更是一周当中最美好的时候,值得更好的欢度方式。

    知晓君
  • 滴滴、携程、小米面经

    牛客网
  • 3分钟热度?数据亦人性:群情激昂之后是被遗忘?

    前言 小时候常听到长辈说,“你啊,就是三分钟热度”;长大以后又时常听到“三年之痒,七年之痛”。热点事件总能激起人们群情激昂,然而激情过后呢? *数据来源为各大搜...

    iCDO互联网数据官
  • 一周播报 | 1比18,阿里测试太牛逼or开发太弱?

    一位刚从阿里离职的P8说阿里一个测试对应18个开发,不知这种说法是否正确?是阿里开发比较弱还是测试比较牛逼,有人出来解答一下吗?

    养码场
  • 小程序之仿抖音短视频与分布式云部署的那些事儿~

    闲来无聊,从过年一直到现在一直沉醉在抖音里,基本每天都被抖音占据着,晚上睡前也要刷到零点才躺下。。。后来吃鸡好友说,要不你开发一个差不多的得了,这么一说我就来劲...

    风间影月
  • 聊聊多线程那一些事儿(task)之 三 异步取消和异步方法聊聊多线程那一些事儿(task)之 三 异步取消和异步方法聊聊多线程那一些事儿 之 四 经典应用(取与舍、动态创建)聊聊多线程那一些事儿(ta

      hello,咋们又见面啦,通过前面两篇文章的介绍,对task的创建、运行、阻塞、同步、延续操作等都有了很好的认识和使用,结合实际的场景介绍,这样一来在实际...

    小小许
  • 【晓头条】双 11 天猫京东交易额皆超千亿 / 腾讯大会首发微信大数据 / 武汉推首个无人警局小程序

    在此次会议上,微信为我们展示了有关微信、公众号、小程序生态的大数据。这些数据究竟说明了什么?答案就在本期的晓头条中。

    知晓君
  • 聊聊多线程那一些事儿(task)之 三 异步取消和异步方法聊聊多线程哪一些事儿(task)之 三 异步取消和异步方法

      hello,咋们又见面啦,通过前面两篇文章的介绍,对task的创建、运行、阻塞、同步、延续操作等都有了很好的认识和使用,结合实际的场景介绍,这样一来在实际...

    小小许
  • 干货 | 携程酒店小程序开发背后的“黑科技”

    本文将分享携程酒店小程序的一些开发经验, 和一些非技术的经验。这里的小程序包括微信小程序,支付宝,百度,头条。快应用因为与这些小程序的体系截然不同,就不放进来讨...

    携程技术
  • 零基础入门小程序 &实战经验分享

    讲师介绍:连胜老师曾经就职于点心移动 & 百度,折腾小程序也有段时间了,参与开发的“小小签到”小程序,在2017年荣获阿拉丁神灯奖。我公司开发了多个工具类小程序...

    连胜
  • 一人饮酒醉?微信官方小程序给你安慰 | 亲儿子 #11

    随着微信团队的不断努力,小程序也变得日益完善。小程序以其方便的使用条件、更低的开发门槛吸引了很多人。

    知晓君
  • 【学习】如何对互联网企业做基本面分析?

    对于如何对最近火热的TMT产业进行估值和分析的问题,在此推荐大家看看下面这则短文,该文由德克萨斯大学会计学博士 长江商学院会计学助理教授 张维宁 撰写。 首先...

    小莹莹
  • ​大数据和云计算技术周报(第37期)

    “大数据” 三个字其实是个marketing语言,从技术角度看,包含范围很广,计算、存储、网络都涉及,知识点广、学习难度高。

    大数据和云计算技术
  • 在小程序的开发上,支付宝或许不是微信的竞争者,而是取代者

    镁客网
  • 微信小程序搜索功能全面升级,SEO该如何玩?

    最近,小程序官方对搜索功能进行了全面的升级,主要是更新页面的优化。那么这种页面的变化,能够给小程序的未来带来什么影响呢?跟着虎哥往下看看。

    微宝阁
  • 微信早报 | 腾讯在天猫开旗舰店;微信「亲属卡」正式上线;河北网信办将对小程序开展审核

    知晓君
  • 我看小程序:连接一切的背后,是打群架时代的开始

    都说业内有三大宝:马云的公开信,罗永浩的新相声,马化腾张小龙的内部内容泄露。这几个人时不时放出点消息,都能引起整个互联网圈的集体高潮。

    华章科技
  • 你爸妈的朋友圈有救了!微信做的这款小程序,让谣言无处可逃 | 亲儿子 #5

    随着微信团队的不断努力,小程序也变得日益完善。小程序以其方便的使用条件、更低的开发门槛吸引了很多人。

    知晓君

扫码关注云+社区

领取腾讯云代金券