微信小程序开发思考总结：腾讯 “信用卡还款” 项目实践
RusMagana
8年前
<p style="text-align: center;"><img src="https://simg.open-open.com/show/eca889cfcce31c051e9561261e16ef6f.jpg"></p> <h2><strong>小程序概述</strong></h2> <p>昨天晚上，微信团队对外宣布，微信小程序开放公测。开发者可登陆微信公众平台申请，开发完成后可以提交审核，公测期间咱不能发布。</p> <p>我们前一段时间也进行了小程序开发，现在来对之前的开发体验做一个总结。</p> <p><strong>1. 小程序是什么？</strong></p> <p>微信小程序是一种介于原生app、和web app的hybrid。通过微信进行加载，实现类似原生app的流畅。相对原生app来说，小程序更加轻量、更新实时、跨平台；相对web app来说，小程序资源离线，体验更流畅。</p> <p>微信小程序的设计目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。</p> <p>不说那么多了， 先来看看小程序的效果：</p> <p><img src="https://simg.open-open.com/show/f97ab7f6b408273e763b42b1d852a5e3.jpg"></p> <p>看完效果，是不是对开发充满好奇~</p> <p><strong>2. 小程序的实现机制</strong></p> <p>小程序的开发是基于微信提供的一套应用框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的Javascript Api，使得开发者能够非常方便的使用到微信客户端提供的各种基础功能，快速构建一个应用。框架设计如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2872e3e5bc35ede1c5df932ca65c78ea.png"></p> <p>框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层之间通过 <strong>单向数据绑定</strong> 进行数据传输，使开发者更加聚焦于数据与逻辑上。</p> <p><strong>3. 支持的特性</strong></p> <p>接下来我们来看一下，微信框架具体提供的特性：</p> <p>wxml：一切皆组件（视图组件）</p> <ul> <li> <p>view组件（类似 H5中的div）</p> </li> <li> <p>input组件（type = digit，有带小数点的9宫格键盘）</p> </li> <li> <p>modal弹窗组件 （对应的wxml、效果如下）（该组件已换js 实现wx.showModal()）</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/517f4ef1c606584d1ceb4e6e1fa16647.png"> <img src="https://simg.open-open.com/show/e6bd34b2cbca493ed6dd413425aa44fc.jpg"></p> <p>更多wxml组件，请查看微信公众平台小程序文档</p> <p><strong>4. 功能API：</strong></p> <ul> <li> <p>支付</p> </li> <li> <p>微信信息的获取</p> </li> <li> <p>网络请求</p> </li> <li> <p>录音</p> </li> <li> <p>上传/下载文件</p> </li> <li> <p>webSocket</p> </li> <li> <p>访问相册</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/565a364331a1547d6455fcbb28504b85.png"></p> <p>更多详细的API，请查看微信公众平台小程序文档</p> <p><strong>5. 其他：</strong></p> <ul> <li> <p>下发消息通知</p> </li> <li> <p>简要的统计（pv、uv）</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/efd3d86eeafb0f6dc523254bc54e977d.jpg"></p> <p>现在我们来具体开发~</p> <h2><strong>小程序的开发流程</strong></h2> <h3><strong>一、获取微信小程序的 AppID</strong></h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/03e08a278b3e7a984e289ed27fe3efdf.png"></p> <h3><strong>二、创建项目</strong></h3> <p>创建项目，需要通过开发者工具来完成。（工具在微信小程序公众平台下载）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6a96ecb2efc2f80a87af7bbbace87bfe.png"></p> <h3><strong>三、编写代码</strong></h3> <p>首先我们来看一下小程序的目录结构：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/85d3cb956bfc4157e559e804ca936db7.png"></p> <p>微信对小程序的开发有些规定：</p> <p>上图左侧3个文件是放在小程序的根目录中，其他文件由开发者自由控制。</p> <ul> <li> <p>app.js是小程序的脚本代码，用来监听并处理小程序的生命周期函数、声明全局变量</p> </li> <li> <p>app.json 是对整个小程序的全局配置，配置小程序是由哪些页面组成，配置小程序的窗口背景色等。</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/c3b14efbc65bf6f04713c53aad72c671.jpg"></p> <ul> <li> <p>app.wxss 是整个小程序的公共样式表</p> </li> </ul> <p>其中app.js,app.json是必需的。</p> <p>小程序页面是由同路径下同名的四个不同后缀文件的组成：</p> <ul> <li> <p>.js后缀的文件是脚本文件</p> </li> <li> <p>.json后缀的文件是配置文件</p> </li> <li> <p>.wxss后缀的是样式表文件</p> </li> <li> <p>.wxml后缀的文件是页面结构文件</p> </li> </ul> <p>在H5开发中，我们是通过在页面中，引入对应的css、js，而小程序开发不需要在wxml中引入，它们是通过相同的名称，将页面与逻辑js、样式进行关联匹配。</p> <p>接下来，我们动手具体开发吧~</p> <p><strong>框架：小程序内嵌微信框架，不需额外框架</strong></p> <p>一般来说我们开始开发，都会从框架开始进行设计。而小程序在封装了一个为客户端设计的框架，作为小程序的开发者是基于该框架开发的，目前现有的框架不用考虑，并且也不需要考虑。</p> <p>现有的框架基本都是建立在window、document对象上。小程序是没有window、document，或者说没有浏览器BOM这个宿主环境。你可以理解为小程序的宿主环境是类似node的宿主环境，而不是浏览器客户端。关于这个环境的设计，感兴趣的童鞋可以参考PWS</p> <p><strong>模块化：形式上支持CommonJs，加载引用更像ES6</strong></p> <p>小程序形式支持CommonJS，通过require加载，跟node、seajs类似。但是通过require加载的是引用的赋值，而不是CommonJS中的值的缓存。</p> <p>小程序的模块书写：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f250829844ce5f41cc737bc9d472b629.png"></p> <p>小程序的模块运行（类似node，框架会自动添加外层define）：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6598eced2016a565586f23796afbd48a.png"></p> <p><strong>模块化：UI组件设计</strong></p> <p>在开发时，与视图相关的组件模块化时，我们可能需要注意一下。例如弹框，在H5中，我们一般是将其封装成一个模块组件，这样可以复用。在小程序中，视图只能在wxml中，不能动态生成。</p> <p>首先，我们看一下微信的弹窗的视图组件modal，微信之前给的api是这样的(该组件微信已经使用其他方式实现， 这里用它来描述问题)：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/90fe47f4f18fef2894eafa05f3e7c8f3.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a669a8531589ed47912fcd4120f3edde.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2774cfdbecd7debed701eecbe771215f.png"></p> <p>看到这样，你是否有联想，如果一个页面需要使用100个弹框，开发者需要创建100wxml组件，及注册对应的100个确定按钮的事件，100个取消按钮的事件。这显然是不合理的。</p> <p>能不能在框架上进行封装成一个通用组件，开发者只需传入对应的事件句柄即可?后期微信可能会考虑封装吧~</p> <p><strong>NO~！</strong></p> <p>为什么呢？我们从框架组件设计来看，框架本身采用面向状态的编程方式，组件部分类似redux的设计（实际不是redux实现的）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1bc598056914e59da89300a7b0fd147b.jpg"></p> <p>组件的View在action操作后，只能通过action的业务处理进行更新View。而框架是单向数据绑定，无法自动更新。</p> <p>对于这一类View组件自带action的，建议进行必要再封装。封装可以考虑 <strong>aop的方式动态的注册&卸载</strong> 。</p> <p><strong>1. 定义组件的通用模版</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fe928277be580b9d8a3557638c658518.jpg"></p> <p><strong>2. aop方式封装组件的逻辑</strong></p> <p>1）组件的默认配置：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c79cb3af8aa5b542a53391ca6d465a25.jpg"></p> <p>2）组件的封装实现</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9d16f9d6128f375fb1511dabe58cfcbd.jpg"></p> <p><strong>3. 组件的使用：</strong></p> <p>1）在页面wxml中引入组件的模版</p> <p>2）在页面js中，随时不限次数使用弹框</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ea22306471cc6722bba4cc618f1328e1.png"></p> <p><strong>目前该组件微信已经封装（api:wx.showModal()调用弹框），不过action不能自动更新的特性依旧存在，开发者如果需要自定义其他带有交互的UI组件时，依然会遇见以上问题，可以参考以上解决思路。</strong></p> <p>具体页面开发</p> <p>对于业务页面的开发，可以将页面视为一个页面组件。在这个页面组件，完成了以下工作：</p> <ol> <li> <p>负责初始化组件state（微信）</p> </li> <li> <p>负责组合子view组件形成页面效果（开发者）</p> </li> <li> <p>确定js 与view 匹配的数据（开发者）</p> </li> <li> <p>负责注册业务逻辑对象提供的业务逻辑方法（开发者）</p> </li> <li> <p>负责管理业务逻辑对象（开发者）</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/b039ea26a92a26c3c483c0258d2e8160.png"></p> <p><strong>1） index.wxml</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2b1a8ffc3944bd06ab44ea381390d603.jpg"></p> <p><strong>2） index.js</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e66249ac817552d4914ab924389e0304.png"></p> <p>页面wxml与页面js的通信如下（简化了微信框架的工作）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f0cd3cd400881ef369f43a89fa17586f.png"></p> <p><strong>在页面开发我们需要注意的有：</strong></p> <ul> <li> <p><strong>index.js中的data数据只读</strong></p> </li> </ul> <p>页面js中，data数据是需要约定为只读。框架是单向数据绑定，修改data中的数据不会自动更新View；更新view，需要使用setData()方法。setData()更新View时，与data中的数据进行Diff比较，不同才会更新。这样如果直接修改data， <strong>很容易造成data中的数据与View不一致。</strong></p> <ul> <li> <p><strong>setData单次设置的数据不能超过1024kB，需要避免一次设置过多的数据。</strong></p> </li> <li> <p><strong>template，这些模版具有自己独立的作用域。</strong></p> </li> <li> <p><strong>支持ES6中的…展开模块数据。</strong></p> </li> </ul> <p>｛｛…cardInfo｝｝，模版中的数据｛｛card_name｝｝、{{bank_simple_name}}，对应data中的数据就是data：｛cardInfo：｛card_name“”,bank_simple_name:“”｝｝，方便了对子view的控制。</p> <p>这样就完成了页面级的开发~~YES！</p> <h2><strong>小程序与H5的区别</strong></h2> <p>在具体写代码，小程序与H5的开发有什么区别呢？</p> <p><strong>javascript：</strong></p> <p><strong>（一）限制：</strong></p> <ul> <li> <p><strong>通过传入字符串来执行代码的能力都禁用了</strong></p> </li> </ul> <p>出于安全考虑，凡是通过传入字符串来执行代码的能力都禁用了。具体被禁掉的原生功能有：new Function、eval、Generator。这是同时也比较有效的避免了类似H5 中xss的问题。</p> <p>禁掉的这些功能，对我们开发来说影响比较显著的应该是字符串转json，以往我们都是通过new Function、eval来处理后台cgi的返回。（移动端一般封装在zepto之类的框架中），小程序开发需要改变一下具体实现。</p> <ul> <li> <p><strong>与浏览器BOM相关的api都是没有的。</strong></p> </li> </ul> <p>在这些BOM中，对开发影响最大的应该是没有cookie。因为其他功能例如storage，小程序有类似的处理方法。而cookie在web开发中是与后台登录相关的。</p> <p>小程序中是没有Cookie的，为了兼容目前大部分web app 的登录管理是使用cookie的。小程序在请求发送时，客户端可以动态的给请求设置Header发送报文的cookie。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/15d42c92291c11f1f9e51fd1a9fd67b5.png"></p> <p>注意一下cookie本身不能在客户端进行读写。</p> <p>因为没有cookie，H5中的csrf问题理论上是根本解决了。小程序是否存在其他客户端安全问题，需要技术、时间来检验~</p> <p><strong>（二） 优化</strong></p> <ul> <li> <p><strong>登录：</strong></p> </li> </ul> <p>H5中，通过微信授权一般采用url重定向的方式获取code；在小程序中，通过wx.login获取code，这样避免了之前登录重定向的问题。</p> <ul> <li> <p><strong>storage：</strong></p> </li> </ul> <p>小程序用storage替代了H5中的localstorage、sessionstorage。storage对每个小程序的大小是10M，支持同步和异步。</p> <ul> <li> <p>微信支付路径不再受限</p> </li> </ul> <p><strong>（三） 不便</strong></p> <p>1）每个页面是需要手动在app.json中进行注册。如果没有注册，是不执行该页面的。</p> <p>2）打开的页面有5个的限制，在开发时需要主要控制打开页面的数量</p> <p><strong>wxss：</strong></p> <ul> <li> <p>wxss 不再支持媒体查询</p> </li> <li> <p>增加了app的flex布局</p> </li> <li> <p>引入rpx的概念</p> </li> </ul> <p>rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。</p> <ul> <li> <p>wxss中，不能使用背景图片。这跟框架的设计思想认为一切皆组件有关</p> </li> <li> <p>wxss动画不支持（目前）</p> </li> <li> <p>不支持多层选择器.classA {} – 支持； .classA .classB {} – 不支持 （api说明表示只支持单层选择器，重构测试有时多层是支持的）</p> </li> </ul> <h3><strong>四、调试</strong></h3> <p>开发完成后，我们进行调试查看效果，跟移动开发差不多，增加了手机端的log。</p> <p>开发工具调试：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b91d3dc789ea1d21aa4f2edae8a37020.jpg"></p> <p>手机客户端：点击右上角开启调试</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0457d148c05405ebd2877125ddc4d330.jpg"></p> <h3><strong>五、构建</strong></h3> <p>小程序是采用类似node的本地加载模块，不需考虑seajs中的模块合并，只需要uglify即可。当然如果你采用ES6开发，那还是需要bebal一下。</p> <h3><strong>六、测试环境</strong></h3> <p>具体微信还在调整中…</p> <h3><strong>七、发布</strong></h3> <p>在开发工具中，进行全量提交，通过微信审核后，在微信小程序平台进行最后发布。文件发布加载的流程如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7b16ef3f26da60af4f74bc8019557976.jpg"></p> <h3><strong>八、版本更新</strong></h3> <p>小程序的更新是在启动时进行更新的，首先与客户端版本进行对比，是否有新的版本，如果有新版本，小程序更新，再运行；否则，直接使用本地资源运行。</p> <p>这样小程序的整体开发发布就Over了~</p> <h2><strong>个人对小程序产品的看法：</strong></h2> <p><strong>优势：</strong></p> <ol> <li> <p>低门槛下载，作为微信的一环，可以通过微信直接进入，即可使用。几乎可以认为是网页，没有下载门槛。</p> </li> <li> <p>跨平台，微信客户端底层封装，支持小程序跨平台</p> </li> <li> <p>开发成本低，通过之前的开发对比，小程序的开发比web app 的开发成本还低，并且前端的资源存放、发布运维都集成在微信中（如果和腾讯云功能合加，纯属联想~~ 呵呵）</p> </li> <li> <p>页面仿原生， <strong>体验更流畅</strong></p> </li> <li> <p>小程序可以使用微信的支付功能</p> </li> </ol> <p><strong>局限：</strong></p> <ol> <li> <p>开发基于微信框架，部分功能受限，不支持现有的其他第三方插件；</p> </li> <li> <p>小程序页面只能同时打开5个，如果交互流程较长难以支持；</p> </li> <li> <p>小程序包大小限制为1M（目前），所有只适合轻量级</p> </li> </ol> <p>关于微信框架api 的具体内容，请参考</p> <p>https://mp.weixin.qq.com/debug/wxadoc/dev/index.html</p> <p>建议在开发小程序时不要以web app的开发思维去思考~</p> <h2><strong>结语</strong></h2> <p>从8月开始加入该项目的内测开发，期间经过了几次地动山摇的调整，及不断的痛苦的迭代，所幸的是框架、开发工具已经趋于完善稳定。期待小程序的正式亮相~~</p> <p> </p> <p> </p> <p> </p> <p>来自：http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578147&idx=1&sn=dc8ed8974bd7086389155eecc82e524d&chksm=84b3b1a4b3c438b275dc04bc454b1177fce1e3175841bd09a3be23ca8bf17679e3be90556d68&scene=4</p> <p> </p>