微信小程序总结

1、什么情况下选微信小程序

万众期待的微信流量优势腾讯并没有提供，其入口仅限于二维码扫描和搜索，其中搜索还是全名称匹配，不能模糊查询（鬼记得全称），二维码只能扫描，不能通过识别图片二维码进入。正如QQ官方宣称的“2没有4不”瞬间浇灭粉丝的激情：

没有入口,启动来自扫描二维码;没有下载过程和应用商店。为了避免骚扰用户,“小程序”也不会有订阅关系、不能推送消息、不能推送到朋友圈,不能做游戏,它将提供有限的搜索能力

不过微信小程序还是有很多优势：

1）所见即所得，无法安装

2）良好的性能体验，响应速度几乎可以匹敌原生应用（可以看看下面的效果）

3）升级方便，产品运营提需求可以及时更新，无需费劲的让用户更新App

4）工期短，相比传统H5省去了很多机型适配的工作，相比App来说无需开发IOS和Android两套代码

5）我们的用户群体都会用微信、都习惯于用微信

对于汽车之家这种在垂直领域占领绝对优势的主体来说，微信小程序对于很多需求来说，还是非常不错的选择。

2、别人家的小程序

1月9日微信小程序正式上线后，被邀请内测开发的200多家都推送了简化功能的小程序，比如目前的京东小程序，只能搜索商品但不能进行购买操作、滴滴打车只有出发地和目的地的简单内容，而滴滴打车的更多人性化服务不能实现、大众点评中可以查看商家信息等，但减少了“排号”、“外卖”等服务。

目前的小程序多半是在原App基础上简化的，这个应该不是小程序的精髓。

3、汽车报价助手小程序

汽车报价小程序主要是将违章查询助手报价模块大部分功能移植到小程序上来，主要交互沿用了App的交互，主要包括：

1）主页：条件筛选、热门品牌、为您推荐、品牌列表里

2）搜索页：自动匹配搜索结果、热门搜索、最近搜索

3）车型车系页：车系信息、车系下车型信息

4）询价页：车型选择、城市选择、经销商列表选择、自动匹配最近一次询价信息

5）条件筛选：根据价格、级别、国别、属性、排量、座位、燃料形式等任意组合查询。

【人力投入】

由于接触新事物，开始估计工期为25人日，由于腾讯官方突然宣布2017年1月9日正式上线小程序，通过加班加快了进度，实际上大概用了15人日。

4、真机演示效果

如下是在Android千元机乐视1s上演示效果，很流畅。要是在卖肾机上使用那更是流畅的不要不要的。

5、开发工具

微信公众平台（https://mp.weixin.qq.com）上提供了微信小程序开发工具和开发文档，入门者看官方文档就行，还是比较细。

唯一不足的是微信小程序的智能提示功能还有待完善，Github上有人提供了一款插件，还比较好用，可以自动生成wss、js、wcss、json文件，不用一一新建。

curl -khttps://github.com/chemzqm/wxapp.vim> ~/.vim/bundle/wxapp

6、开发过程中的坑

新的事物出现总是不免有非常多的坑，在开发汽车报价助手过程中遇到的坑如下：

【开发工具的坑】

1）开发工具预览效果和真机效果经常不一致（我认为这是最大的坑，怀疑开发工具上还是支持一些DOM对象和方法，但是真机上没有）

2）微信更新开发工具，偷偷修改内容不声明，老版本正常，升级到新版本开发工具就不行了。v0.12.12升级成v0.12.13之后好些语义规则变了：

a）语义校验更严格，之前少了可以正常编译，升级后不行了(这个可以，属于朝规范方向升级)

b）首页抽屉滑动击穿的问题在v0.12.12上增加position：fixed之后就可以解决，升级后不行了(这种就很无语，改改就忍了)

c）更新后发现下拉刷新和scroll-view不可以同时使用，当我们在页面里滑动scroll-view时，只是滑动这个组件，不再可以触发onPullDownRefresh。（这个真不能忍，要改变产品设计）

3）抽屉滚动击穿坑

在车系抽屉弹出时，滚动到最底部，继续滚动时，下面的页面会跟随滚动，给主页增加position：fixed，但是这样主页本身不能上下滚动，所以在抽屉弹出时再加这个属性，不弹出时不加该属性。

position:fixed'}};top: 0;left: 0;width: 100%;" >

4）加密坑浏览器btoa方法不存在

在商业App接口加密算法中des之后需要调用浏览器对象的btoa方法转换base64，之前还可以，在开发工具更新到V0.12.13之后在IOS设备上就不行了，巨坑。。。。

最后通过替换btoa的实现解决。

var des3iv = hexCharCodeToStr("0x1234567890ABCDEF");

var DES3 = {

encrypt: function (key, input) {

var genKey = genkey(key, 0, 24);

returnbtoa(des(genKey.key, input, 1, 1, des3iv, 1));

},

decrypt: function (key, input) {

var genKey = genkey(key, 0, 24);

return des(genKey.key, atob(input), 0, 1, des3iv, 0);

}

};

5）引入 promise 相关库及 Android 真机报错解决方案

如果你打算引入 promise 相关库，别用bluebird，使用Polyfill，恰巧你只是在模拟器上测试或者你的真机是iOS系统，那么你不会发现异样，但是你用android机器一测试，就会报错了。这是因为bluebird源码中用到了DOM元素。且bluebird大小74k，相对于微信小程序1M的限制来说已经是巨型儿了。

es6-promise-polyfill: https://github.com/stefanpenner/es6-promisemin版

6）悬浮按钮的问题

以下是微信小程序实现在列表上悬浮按钮的功能：

wxss中

/*悬浮圆形按钮*/

.float-action {

position: absolute;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

bottom: 0;

right: 0;

width: 50px;

height: 50px;

border-radius: 50%;

background: #db325a;

z-index: 100;

}

列表

height:627px;width:100%;">

wx:if="{{conditionResult.length>0}}">

wx:for="{{conditionResult}}"wx:key="id">

wx:if="{{item.imgurl}}">

{{item.name}}

价格：{{item.price==''?'暂无报价':item.price}}

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

坑出现了：

用height:627px;width:100%;">实现悬浮，加入设置height:100%，此处悬浮不起作用。

微信小程序坑不限于以上所述，新事物总要经历这么个过程，坦然接受吧。

【个别机型适配的坑】

平心而论，微信在不同机型适配方便已经替我们做了很多工作，少去了很多麻烦，但是还是顶不住Android碎片化严重的问题，我们在开发过程中就遇到了其他机型都正常，小米机型布局显示乱的问题。

1）小米机型在布局按钮时如果不指定高度，文字居中显示会有问题，按钮的高度会不等

2）scroll-view加position:fixed属性时height需要设置100%，不要设置627rpx

猜测小米的高度应该不是627rpx

【发布代码审核坑】

微信审核也非常坑，需要注意以下两点

1)功能页面所提供的内容不属于所选的服务类目范围。微信小程序类目很多，需要耐心的找

2)点击任何按钮最好有明显的页面跳转、页面内容刷新、弹出框等明显变化，曾经有个按钮点击后弹出弱提示，居然神奇的被毙了（nnd的管的太细了）

7、小程序的展望

鉴于小程序接近原生App性能的优势，及微信生态的优势，个人觉得小程序在垂直领域打通B端和C端生态方面起到很重要作用的。