微信小程序初探

此文已由作者徐莉授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

早在微信小程序刚出来的时候，我们就进行了尝试，把之前一个app的功能移植到微信小程序中。开发过程中也进行过一些尝试，也踩了一些坑并记录了下来。这里整理出来，希望能带你从那么详细的官方文档中，抽离出最基本的一些内容，先干起来再说别的。

关于账号，看过官方文档的应该知道，它是不对个人开发者开放的，当初的我傻傻的以为，我就拿不到那个神秘的appid了，然后我就只能在它的开发者工具里看效果了。

谁成想，我随便输入一个公司的营业公司执照号，竟也成功地拿到了一个appid,并且发现不仅仅用于真机调试，后台登录认证等过程都畅通无阻。就是不能发布审核咯。我就自然成了管理员，绑定了我的微信号（这里建议用自己的小号比较好），并且此微信号很重要，很多地方要一直扫码授权的~~

其他步骤依照官网走就可以啦-->申请流程

文档还是很详细滴，撸了2遍就可以开搞啦。不过它想传达的基本理念还是要领会到滴。

小程序 vs. h5页面

1. 开发工具

• 开发工具 + Device Mode预览的模式，

• 基于自己的开发工具(微信web开发者工具)，可以实现同步本地文件 + 开发调试 + 编译 + 预览 + 上传 + 发布等一整套流程

小程序的开发工具是一种基于Native System系统层的框架，并非直接运行在浏览器中，所以,js在Web中的Document,Window对象都不存在了

1. 开发语言

• 微信小程序开发了自己的一套wxml标签语言和wxss样式语言，而没有直接使用html5 + css3

1. 组件封装

• 小程序独立出来了许多native app的组件（例如底部的 tabbar 以及顶部的 navbar 就是原生的。还有小程序的 map 组件，是调用原生的 map 组件）

• 在html5中需要模拟原生app才能实现的功能，在小程序里可以直接调用组件

1. 执行速度

• 传统h5页面在加载的时候受限于网路环境的影响，需要顺序加载html,css,js然后返回数据，再渲染，中间有个等待的时间

• 小程序两个线程，Appservice Thread和View Thread会同时进行，并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice,Appservice会把准备好的数据通过setData方法返回给视图线程。

小程序的这种优化策略，可以减少用户的等待时间，加快小程序的响应速度。

小程序的运行环境

官方文档上在细节点上明确说明了：

微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。

三端的脚本执行环境聚以及用于渲染非原生组件的环境是各不相同的：

• 在iOS平台上，微信的浏览器渲染内核是wkwebview

• 而在Android平台上，微信则采用了腾讯QQ浏览器2016年4月份发布的X5内核（blink内核）作为渲染引擎

• 在小程序的开发工具上，小程序的JavaScript是运行在chrome内核（nwjs）中

网易实践者社区中有篇大牛的文章深入记录了，小程序是怎样把我们写的标签根据WAWebview.js转成对应的自定义标签或Native控件的 细说微信小程序，强烈推荐。看完之后就可以深入了解他的加了自己tag的痕迹重重的开发语言啦。

开发语言

wxml

标签的语法个人把他和html对应，但实际上语法上更接近于xml语言，标签在官方文档中，称为组件。

所有组件和属性都是小写，以-连接

有人汇总了一下组件和html标签的对应关系，有助于对组件的理解

关于这些组件的使用，会遇到很多意想不到的问题，组件的嵌套也不是我们能随心所欲的，除了规避文档上明确指出的已知的bug外，也有不少别的问题。

在尝试过程中也记录了一部分，后面详述。

wxss

• 尺寸 rpx

  rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，在开发时尽量避免这种情况。

js ES6

上面已经提到过，由于运行环境的原因，导致windows,document对象是不支持的，所以，通常的js框架都不能支持了。。

微信小程序支持绝大部分ES6的新增特性。

在小程序的更新日志中看到，某一次更新之后，加了这么一条，

如果想使用ES6的promise等的话，需要单独引入插件来支持。

demo工程

我的目录结构

一个入口APP，根据业务划分的一些Page。每个Page的文件放在同一个目录下面。其中每个模块中的page.json可以覆盖全局的app.json中的一些设置项，比如navigationBarTitleText顶部导航的标题等内容。

展示几个小程序主要的功能页面： 

踩坑系列

微信小程序联盟里大家抱团取暖啊~~ 还有“知晓”微信公众号里面你能发现比较多好玩好用的小程序，比如女生用的“美柚APP”,“口红试色”等等。

了解了上面的一些基本的内容之后，就可以开始上手开始一个工程啦，文档 上有详细的步骤，但是内容比较多，这里仅记录下几个遇到的几个关键的内容，希望你在尝试的时候不要再踩雷就好。

因为小程序还没发布，没法体验了，功能是整个移植小倩助手的，包括常规的新闻展示，还有树洞等功能。（这里友情奉上小倩助手app的下载地址啦---> 猛戳我）

image标签的流氓之处

给这个组件一个图片地址之后，默认的样式不是图片的大小，而是固定的 300px * 225px。与 HTML 中的  完全不同，用起来有点不舒服。

 组件还提供了不同显示方式的 mode，不过用起来还是觉得怪怪的

滚动区域滚动条不出现

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

推送提醒类的需求被限制了

倩女app助手里面有一个定时提醒 的功能，看到文档上有模板推送的api，推送自定义的文案和提醒，而且还可以声明哪些字体放大。但是仔细阅读文档发现，并不能使用来满足app里的这个需求。

• 只有在发生了支付或者提交了表单的情况下才能定制模板发送

• 在上述行为发生的7天内

• 一次支付或者表单提交行为，只能发送一次

gg了。。

下拉刷新

首页是基本的列表页，当然就有下拉刷新，瀑布加载啦。用起来也很简单，只需要在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件。

需要在 config 的window选项中开启 enablePullDownRefresh。 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

关于html页面的解析

因为不支持直接加载html页面，所以只能富文本解析了。主要思路还是将html标签转成wxml组件，难点主要集中在模板的嵌套上，因为不支持模板嵌套，所以只能用别的方法绕一下了。

因为小倩助手app中的新闻内容中会有视频，而新闻页并没有直接用video标签，对解析代码进行一下修改，来支持我们的视频。

html文件编码问题

微信小程序只支持utf-8编码，所以什么gbk编码的html页面了，本地工程的页面编码，都要使用utf-8

因为倩女端游的都是gbk编码，最终是通过后台增加一个接口，后台转码一下再传给我们解析。

wx.request({
            url: 'http://xqn.163.com/app/xiaoqianzhushou/news/2017/01/20/21469_669045.html',
            method: 'GET',
            data:{

            },            // dataType : 'html',
            header: {                // 'content-type': 'application/x-www-form-urlencoded'
                'content-type': 'application/json'
            },
            success: function(res){
                res.data = res.data.replace(/data-movieurl/,'movie');
                WxParse.wxParse('news', 'html', res.data, that, 20);
                setTimeout(function () {
                    wx.hideNavigationBarLoading();
                },1000);

            },
            fail:function (res) {                console.log(res);                //res{
                //    errMsg:'convert to utf8 fail'
                //}
            }
        });

上面这种会请求直接到fail里面并报上述错误

后台加接口，转码之后就好了

wx.request({
            url:'xxx',            method: 'GET',            data:{                action:'changecode',                url:that.data.link
            },            // dataType : 'html',            header: {                // 'content-type': 'application/x-www-form-urlencoded'
                'content-type': 'application/json'
            },            success: function(res){

                WxParse.wxParse('news', 'html', res.data, that, 20);

            },            fail:function (res) {

            }
         });

真机的网络要是设了代理的话

Netease设置了代理，无法访问页面，这个很容易忘记关掉代理。

网络请求的 referer 是不可以设置的

格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。

总之，不要在head中写referer就可以了。

wx.getUserInfo会在真机上弹出授权提示

但是这个方法需要先调用wx.login

在做小程序开发的时候，我们经常会需要获取用户的一些权限。比如获取用户信息用于直接登录，获取地理位置用于定位等。但要是用户拒绝授权了，该怎么处理呢？

当我们调用 wx.getUserInfo 或者 wx.getLocation 这种需要用户授权的 API 时，小程序会弹框让用户选择授权。

当用户选择允许后，下次再进入小程序就不会再询问了，直接获得用户授权（除非将小程序删了再进入）。这里的问题在于，当用户点了拒绝之后，就拿不到相关授权了，并且在一段时间内，进入小程序都不会再出现这个弹框。所以要注意做好被拒绝授权的方案。体验小程序的时候，遇到过不少，拒绝之后直接gg思密达了。

总体体验下来，小程序的开发成本相对App确实小很多，而且体验上也比h5要快一些，但是因为组内考虑到小程序和微信公众号的在营销和推广上面的作用，暂时还没有投入太多。有人会觉得公众号是微信借助自己的平台为用户提供宣传，而小程序却是需要自己去推广的。但是最近小程序不是也允许一个公众号下关联多个小程序吗，而且可以在公众号文章里面，通过文字链接和图片链接，打开小程序啦，小程序之间也可以互相跳转啦。这样看来，他们也在一步步开放自己的功能，做出一些让步，适合于更多的场景嘛！

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 浅析Docker容器的应用场景