1.开发微信小程序之前，先要知道小程序是什么，优势是什么。
知乎上看到的一个回复 ：
2.开始看小程序的开发文档，网上很多教程，但还是看官方的文档比较全面。
附官方文档地址：
安装步骤之类的，都在官方文档里。
3.小程序文档看完一遍了，开始用wxml wxs wxss 搭一个简单的界面吧。
发现其实微信小程序与html +css +js有很多的相似之处，除了标签不太一样，貌似都差不多。
4.简单的搭了几个界面，发现代码并没有达到微信小程序的宗旨 ： 逻辑与渲染分离 。
比如一个简单的模块：
充值10元
充值10元
充值10元
充值10元
如果纯HTML写 可能你这行代码要复制好几遍 。
如果你用小程序写 你只需要 ：
{
{ item }}就可以循环出 同样的几行代码 。
小程序实战经验总结： 1、小程序image标签选择大图片的时候，图片会变形
原因是 小程序的image标签会自带宽高 320 * 240
需要设置一下 mode = “widthFix” 就可以 变成原图片的宽高了
2、文字需要换行\n 或者需要 占位符  时， 必须要使用 text 标签 否则无效 。
要使用  <这一类的 符号时 需要在text标签内设置 decode =“{
{ture}}”3、小程序 做嵌套循环时 数据不方便放在data 里
解决方案 ： 把需要循环的模块做成模板 ，模板里的data设置成变量。
在调用模板时 调用时的data 里再把变量换成需要调用的数组 或者 字符串等。
4、微信小程序里 是不支持 background 为图片的。
解决方法 : 直接使用 image 标签 ，src 设置成网络图片，如果需要做成背景， 在image标签里 加一个子标签 ，里面设置绝对定位就可以了 。
这行设置相对于image 绝对定位 ，就可以实现背景图效果
5、设置全局变量属性
小程序里，变量一般是放在每个文件夹的js里的 ，有时候所有页面都用到 某个数据时 ，一个个申明 太麻烦 ，所以定义一个全局变量 。
首先要在最外面的 app.js 里 的 globalData 里把需要的数据 放进去 。
如 ： globalData: {
userInfo: null,
url: “,
}
再在你需要调用的页面的文件夹里的js文件中 。
在第一行加上const app = getApp()；
然后定义一个变量，把数据放在这个变量里
如 ：
data: {
//获得官网地址
address: app.globalData.url,
}
最后 这个address 就可以在页面里用了 。
6、小程序列表渲染 wx :key 的问题
小程序列表渲染是使用 wx：for = “ {
{ 循环的参数 }} ”如果不加wx：key = “ 参数 ” 的话 ，调试工具中会出现 黄色的警告信息 。 但不会影响页面 。
网上找的原因 ：
wx:key 的值以两种形式提供
1、wx:key=”property” 其中property是代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。类似于字典的key值
2、wx:key=”*this”， 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组
件保持自身的状态，并且提高列表渲染时的效率。
不添加wx:key情况：
，会出现warning： Now you can provide attr “wx:key” for a “wx:for” to improve performance. 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
7、小程序里 的单位
小程序的单位rpx 是根据屏幕来自适应的，开发的时候，把开发工具里的 手机模型选成 iphone 6 。 这样的话，1px = 2rpx ，方便开发。
8.小程序 image跟view标签上下会有空隙
解决方案 就是可以在image那里设置vertical-align:top/bottom/text-top/text-bottom
原因：图片文字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级底边有必定间距