前言
微信小程序也推出好几年了，由于微信一直稳稳占据国内即时聊天类App的头把交椅，所以微信小程序也顺带着火遍了国内，不管是个人还是公司开发者都不可避免会优先考虑微信小程序。
年前突然被公司安排去搞一个微信小程序，当然肯定不是我一个人了，有其他前端大佬一起做的，我就顺带着边学习边开发。这里就大概说说个人的一些体验，当然肯定只是一些肤浅的东西，有问题提出来大家一起学习探讨。
入手
1、首先第一部肯定是要去参考官方的教程的：微信小程序官方文档
2、安装开发者工具：微信小程序开发者工具，也可以选择其他工具来开发，我选择的是VisualStudioCode，后面也会大概介绍下这个工具的用法
3、第一次接触小程序，如果不发布代码的话就不需要去申请账号了
布局
1、在 Android里面布局代码都是写在xml里面；在小程序里面则是通过wxml（页面）+ wxss（样式）；当然小程序样式也可以都写在wxml里面，类似：
通过style属性也可以写样式，但是一两个还行，多了就会显得很乱。
2、Android里面子view都是在viewgroup 里面；小程序里面view，也可以是viewgroup，通过wxss能展示各种样式，也能显示文本。
例如：显示竖向排列的两个文本。
在Android里面：
Ï
小程序里面：
wxml：
test
test
wxss:
.parent{
display: flex;
flex-direction: column;
}
可以说小程序里面的flex布局和Android的LinearLayout布局很相似，flex也是推荐的布局，具体可以看教程：Flex布局教程
如果要想元素都重叠，类似Android里面的FrameLayout，则需要设置position：absolute，然后通过margin、padding来定位到合适的位置。不得不说小程序的布局相比Android来说还是麻烦不少的，只能通过多练习来熟悉了。。。
3、Android里面可以通过template布局模版，通过
4、小程序里面布局推荐使用rpx作为尺寸单位。
逻辑
1、Android的业务逻辑都是写在Java文件里面，小程序里面都是写在js里面；同样的类似Android的页面生命周期，小程序也有生命周期：
onLoad: function(options) {
// 页面初始化
},
onReady: function() {
// 页面渲染完成
},
onShow: function() {
// 页面显示
},
onHide: function() {
// 页面推到后台
},
onUnload: function() {
// 页面关闭
},
小程序不像Android里面可以监听页面的返回键，所以要在页面返回时处理业务可以在onUnload中处理。
2、与Android中Application类相似，小程序中app.js相当于全局入口，如果开发者有需要在小程序启动时执行的操作，就可以在onLaunch方法中执行。
app.js还提供了一个 globalData，用来存储整个小程序使用期间的公共数据。
在其他页面可以通过getApp() 方法用以获取小程序的 App 实例，来使用全局公共数据。
3、如果有些需要存储的简单数据，类似Android中的SharedPreferences，小程序可以使用wx.setStorageSync("key", value);存储；wx.getStorageSync("key"); 取出；
4、页面之间的数据传递在小程序里面只能通过路由的方式，就是在跳转链接拼接上要传递的数据：
传数据：
//let obj = JSON.stringify(obj);
wx.navigateTo({
url: '/pages/index/index?id=' + id,
})
接受：
onLoad: function(options) {
// let obj = JSON.parse(options.obj);
let id = options.id；
}
如果要传递对象，则可以在传递前使用JSON.stringify(obj); 将数据转成字符串，在接受时使用JSON.parse(obj); 转换回对象;如果传递的值里面有特殊字符需要用encodeURIComponent、decodeURIComponent对要传值得编码解码处理，否则会报错。
5、数据刷新；在处理完数据后我们会用this.setData({...}) 来更新数据源，但是很多初学者都会犯一个错误，看如下错误代码：
wx.request({
url: "request_url",
success: function (res) {
this.setData({...})
}
});
按照上面写程序就会报错，再看正确代码：
let that = this;
wx.request({
url: "request_url",
success: function (res) {
that.setData({...})
}
});
两者区别在于多了一个变量 that，并且在 onLoad()方法里面对它进行了赋值，使它等于 this。其实说白了就是一个作用域的问题；其实在Android里面我们也遇到过，就是在点击事件里面跳转设置this的时候，我们都会写上类名，类似：Intent intent =new Intent(MainActivity.this,TestActivity.class);
6：事件拦截：在Android里面会有很多事件拦截处理；小程序里面也不例外。看如下小程序布局：
如上我给子父view都设置了bindtap点击事件，这个时候点击下去会发现两个事件都执行了，这在小程序里面称为事件冒泡；要想image被点击，view不被点击则得使用catchtap 属性；修改如下：
这样view的点击事件就不会响应了。
ps：还有些情况是页面层级导致的，需在wxss里面使用z-index 调整页面层级。