前言

小程序开发已有近一年之余，对于小程序的认识也从入门到了熟练。遂写下这篇总结，以供参考。关于小程序的介绍，就不赘述了，我们直接开门见山：

学习路径

1.微信小程序最好的教程肯定是官方的文档啦，点击这里直达微信官方文档

2.新建一个quick start项目，了解代码结构。

3.去github上搜索一些小程序demo工程，了解参考其写法，前端大佬justjavac总结了一篇小程序开发资源汇总，直达链接微信小程序开发资源

目录结构介绍

这里我简单描述下，个人认为小程序和vue语法很相似，我拿vue来做比较，方便认知。
app.js: 这个是小程序的入口文件，相当于vue 的main.js 一些全局变量都可在此定义。
app.json: 这个比较重要，小程序路由比较简单，在此配置绝对路径即可，设置网络超时时间、设置多底部 tab 等也是在此json文件中定义的。

页面生命周期

onload 及 onShow 这两个用的多，相当于vue的created 及mounted 这两个周期 ，页面传参的话，在onload方法中获取参数。

关于踩坑

当我们遇到解决不了的问题时，寻求前人之鉴是很有效的，疑难问题解决，可上小程序社区寻找答案：社区链接

踩坑总结

做小程序项目中，遇到的些坑，总结了一下：

1.小程序页面空白的可能原因：

• css兼容性问题
• lineShopId长度太长，字符转数字Number
• post请求参数加上encodeURIComponent解析字符串

2.事件分为bindtap 及catchtap bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

3.image背景图片地址必须是url或者base64/本地资源无法通过 css 获取 可以使用网络图片，或者 base64，或者使用 标签。

4.{{}} 不能执行方法，只能处理简单的运算如 “+ - * /”，比如遇到遍历list，每个item的金额需要格式化，只能在js里预先格式化好再setData一遍。

5.微信开发工具Mac客户端无法发送请求，wx.request 报错，需要在“详情”下勾选“不校验安全域名，TLS版本以及HTTPS证书”。

6.下拉刷新不回弹，要在 complete 回调中运行 wx.stopPullDownRefresh()。

7.设置图片横向滚动，需要在 scroll-view 的 CSS 中添加 white-space:nowrap;display:flex;而 scroll-view 里面的 item 要设置成 display:inline-block。

8.小程序组件的监听，可使用properties中的 observer方法，极为有效。

9.小程序废弃了wx.getUserInfo接口,并不在自动弹出授权询问弹框。如需想获取用户信息：采用button:
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
我们可以自己封装一个modal, 再把button组件放上去，用此来引导客户进行授权，授权成功后，就可以调用wx.getUserInfo,接着调用wx.login来获取code 换取openid

10.textarea 的键盘bug
show-confirm-bar='false'设置不生效，导致键盘还带有“完成”按钮，预期效果是没有“完成”button~这个值如果要设置为true的话随便输入就可以了，但是如果是要设置false的话就需要设置变量或者留空：show-confirm-bar='' 或者 show-confirm-bar='{{showConfirm}}'

11.实现客服button样式
position: absolute，定位一个button到你想要的位置，透明度设置为0即可，同时给button设置属性open-type="contact"。

• 这里要注意button的open-type属性是在基础库1.1.0开始支持的，自己要做一下兼容处理.
• button也可以改成其他样式，有些同学为了获取formId，就把页面所有可点击区域都用button按钮来实现

12.小程序navigateTo网络延迟产生连续跳转问题，可以采用节流函数解决。

13.在小程序中打开移动端H5网页，需要配置业务域名，并且该H5网页必须是https协议，如果该H5地址是hash模式，需要在web-view的标签里填写网址时要在地址后添加/#/。

最后小程序和H5的区别可以参看此文章：https://zhuanlan.zhihu.com/p/23536784