不知不觉接触小程序有3个月了。刚开始看微信开发者文档，感觉没什么难度。有自己的组件标签。以及api调用，tabbar也是现成的，感觉开发起来应该是很简单！6月份接到第一个小程序项目的时候，没啥压力。在开发过程中，页面搭建的很快（毕竟自己从事前端一年多了。可后来发现仍然存在一些坑，踩过才会知道，如下所示，举几个项目中遇到的坑啊）
1. 背景图片（background-image）
写项目的时候发现自己用view标签加class，引用背景图这种传统的添加背景图操作在小程序里面不适用，这里要用到小程序自己的图片组件image。背景图的来源可以从线上文件用https获取图片路径，在网上转base64生成很长的一段编码（不介意这样操作），当然自己在image里写相对路径也是可以的，设置定位样式，显示背景图片。
2.每个页面的导航条背景色和标题可以自定义
在每个模块的json内设置即可，"navigationBarTitleText": "标题","navigationBarBackgroundColor": "背景色"
3.小程序组件textarea
开发项目时写表单提交的时候，用textarea写备注，在手机上浏览的时候，会出现textarea固定在屏幕中，不随着页面移动而移动。这就尴尬了。。。首先，这个页面最外层我用的是scroll-view。这个隐藏的坑，这两个组件不能同时用；其次，用fixed固定。fixed="{{fix}}",data内设置fix：false，（网上说把fixed射程true但是我用着没效果，所以设的false）解决了页面固定问题。（这里延伸另一个问题，如果当前备注上方或者下方有选择项，picker对应的弹框遮罩，textarea内容会显示在遮罩层上面，解决的方法是点击对应的选项出来遮罩层时隐藏备注，点击关闭或者确定选择后显示）
4.列表刷新用的是微信小程序提供的onpullDownRefresh，如果最外层用的是scroll-view是没有效果的。两者不能同时使用
5.弹框穿透问题
开发时封装的弹框组件无论是在开发者工具内还是在手机上都会出现的问题，手指滑动弹框遮罩层后面的body内容也会跟着滑动，最终效果是固定不动才对。给body设position:fixed,top: 0;bottom: 0;width: 100%;height: 100%;overflow: hidden;z-index: 9;页面点击时做个判断是否显示了弹框，弹框出现则加个class给body即可
6.小程序form表单提交
form表单头部绑定提交事件方法，开发中主要是对input事件的判断，如姓名手机号是否为空，长度以及中文英文数字的判断验证外，对于每个input的value都可以直接点击确定按钮获取到，只要将对应字段名称绑定到input内即可，eg：<input class="inputValue commonS" maxlength='20' placeholder-class="phcolor" placeholder='请输入微信号' name='wechat' data-name="wechat" value='{{userData.wechat}}' bindinput="bindKeyInput"></input>
7. 小程序消息模板
这块目前还没有开发，事先了解下对应的知识点。写消息模板的第一步是要在微信平台配置消息推送：
1.登录微信公众平台，设置-开发设置-消息推送-启用（具体配置见https://blog.csdn.net/woqianduo/article/details/80947028）
2.消息模板，申请新的消息模板或者选用已存在的消息模板
3.发送消息模板（重点）
消息模板发送的前提：两种情况触发：1.表单提交（生成一个formid传给后端）2.支付（获取prepay_id）
3.1.如何获取模板id
(1).通过模板消息管理接口获取模板id（详见模板消息管理）
(2).在微信公众平台手动配置获取模板id
3.2.获取formid或prepay_id
<form bindsubmit="formSubmit" class='editCustomerInfo' report-submit><button formType="submit">Submit</button></form>
属性report-submit=true时，可以声明为需发模板消息，此时点击按钮提交表单可以获取formId，用于发送模板消息。或者当用户完成支付行为，可以获取prepay_id用于发送模板消息。
注意：因为我们是在开发者工具中测试，所以得到的formId值为the formId is a mock one。在真机中我们可以得到一个具体的值，利用该值结合其他参数就可以发送模板消息啦，所以测试真实场景务必在真机中测试。如果将formid作为参数请求后端，开发者工具内默认也是the formId is a mock one，不影响真机请求~
formSubmit: function (e) { //获取formId console.log(e.detail.formId); },
3.3.调用接口下发送模板消息
1.touser 用户在登录小程序获取，用户在小程序的唯一标示——openid
2.template_id 所需下发的模板消息ID（模块3.1获取的模板ID）
3.page 点击模板卡片后跳转的页面
4.form_id 表单提交场景下，为 submit 事件带上的 formId；支付场景下，为本次支付的 prepay_id（模块3.2获取）
5.data 模板内容，不填下发为空，对应模板消息参数
6.color 模板内容颜色（非必填）
7.emphasis_keyword 模板需要放大的关键词，不填则默认无放大（非必填）
3.4.获取小程序token
根据appid，secret和url，详情见7.1外链文章地址哦~~
8.灵活运用wxs
开发过程中经常遇到列表页上通过当前的状态来显示对应名称的背景、字体颜色、枚举字典类型对应显示的商品等。这时用wxs简洁方便。当然，在wxs中不能使用foreach来遍历数组。只能用for循环哦~ 将wxs进入需要的文件头部
<wxs src="./detail.wxs" module="tools" />
wxs怎么使用，微信开发文档有介绍。
9.小程序分享
此功能暂未开发，涉及到分享给好友，外链到其他小程序，生成二维码分享到朋友圈功能，虽然网上已经有很多文章可供参考，但实践是真理的唯一标准呀，待我研究完毕后，再来补上~
10.页面没有数据考虑暂无数据展示
这是个小细节，多用于列表页，如果一开始没有添加列表数据，那么温馨提示一下暂无数据还是有必要的，默认是false，页面中定义一个状态，1.根据请求接口判断当前是否需要显示暂无数据提示；2.跟进列表的长度判断是否显示，如果是orderList.length<=0则显示
11.小程序map地图的使用
可以选择省市区，也可以根据填写详细地址来实现地图定位，这块引用的是百度地图api，具体还要在百度地图中注册生成一个百度地图AK，详见https://blog.csdn.net/wuzuodingfeng/article/details/54584167。当然地图这块需要在微信平台后端配置下哦~
12.小问题
这是我一直没有在意的地方，还是技术不够敏锐吧，其实小程序中的setData是个异步请求，简而言之，所有带callback的都是异步~这点还是同事提醒我滴，java开发写的前端js也是66的，吸取经验虚心学习中~~~
详见https://blog.csdn.net/anmo1221/article/details/54925429
对了，这个项目外借了zanUI开发框架，有利有弊 ，原有封装的样式不好改，但是不得不说封装的一些组件还是很好用的，像上传图片，toast，布局基本都是自己写的。没有用，因为class样式有点难改，耗时，也许自己技术不行吧~还是喜欢写原生。哈哈哈~~
写的最后，突然想起微信小程序授权问题，之前的微信通过button触发getUserInfo，获取用户信息，具体步骤就不详细介绍了，微信开发者文档有介绍哈~~
赶脚自己今年重点都是小程序开发了，项目组的需求，虽然有点单调但还是可以锻炼自己滴，由小白到进阶，加油~~