一、序
上一篇介绍了如何从零开发微信小程序，博客园审核变智障了，每次代码都不算篇幅，好好滴一篇原创，不到3分钟从首页移出来了。这篇介绍一下组件封装和我的踩坑历程。
二、封装微信小程序可复用组件
首先模块化的思想是通用的，在这不做过多解释了。直接上代码，然后解释代码：
// wxml <view class=\"c-menu\"> <view wx:for=\"{{menuList}}\" wx:key=\"{{item}}\" class=\"menuItem\"> <navigator url=\"/pages/my{{item.path}}\" class=\"navigator\"> <image class=\"imgIcon\" src=\"{{item.icon}}\"></image> <view class=\"navigator-text\" data-id=\"{{item.key}}\" bindtap=\"handleMenuTap\">{{item.name}}</view> </navigator> <image class=\"imgGo\" src=\"../../image/youxiang.png\"></image> </view> </view> // js Component({ properties: { menuList: { // 菜单列表 type: Array, value: [], }, menuEvent: { // 菜单点击的自定义事件名称 type: String, value: \'\', }, }, data: { }, ready: function () { }, methods: { handleMenuTap:function () { const { menuEvent } = this.data if (menuEvent) this.triggerEvent(menuEvent, {}) } } }) //json { \"component\": true } //wxss .c-menu{ width: 100%; background-color: white; margin-top: 10px; } .menuItem{ position: relative; box-sizing: border-box; } .navigator-text{ padding-left: 65px; } .navigator{ position: relative; box-sizing: border-box; width: 100%; height: 60px; line-height: 60px; border-bottom: 2px solid #F7F7F7; } .imgGo{ position: absolute; width: 18px; height: 18px; top: 22px; right: 15px; } .imgIcon{ position: absolute; width: 29px; height: 29px; top: 15px; left: 18px; }
首先介绍思路：
这是一个简单菜单组件；输入菜单数据 menuList ， 暴露出 菜单点击事件的回调 menuEvent。
然后介绍一下小程序封装组件的特殊之处：
1、json 配置文件需要配置 \"component\": true , 表名这是个组件
2、js 里面使用 Component({})方法构造组件
3、properties 组件接收的属性在这里面声明，包括数据类型和默认值
4、生命周期通常用 ready 代表其准备完毕。
最后介绍一下组件使用的方法：
1、在要用组件的json文件
\"usingComponents\": {
\"menu\": \"/components/menu/index\"
}
2、在wxml里面使用，并准备好组件需要的数据
<menu menuList=\"{{menuList}}\"></menu>
这就是微信小程序封装组件的大致流程。大同小异，只是给大家说一下他特殊的地方而已
三、小程序的坑——小程序与其他web应用的不同之处 ps： 这里只描述问题，并提供解决问题的方法，详细的了解请查官方文档
1、问题： map 等原生组件的覆盖问题。 在小程序里面，原生组件默认展示层级最该，也就是video、map等组件会覆盖我们的标签，即便是定位调节 z-index 什么的都没用
解决：用 cover-view cover-image 包裹内容，就可以覆盖在原生组件之上了。注意 这2个标签内容不能嵌套view等标签，具体使用，请看官方文档。
2、问题：wxss 无法使用本地资源，即 background-image 不能直接使用相对路径展示图片。
解决：将图片转成base64展示，或者不使用背景图，直接使用图片。例： background-image: url(\"base64: .......\")
3、问题：大多数 js 插件无法使用
原因：小程序用的是不完整的浏览器对象，大多数 BOM DOM 对象的api无法使用，故：没办法的事情
4、问题：使用npm包费劲
解决：请看我上一篇博客，详解微信小程序开发
5、问题：只支持到ES6，不支持ES7。像 async 等这些东西都用不了。
解决：这个比较蛋疼了。（1）这里只提供解决的思路。引入 regenerator 这个包 ，或者其他包都行。（2）开发环境自己搭建gulp打包环境，自己把js代码转ES5，注意关闭小程序自带的转换。
6、问题：获取用户信息改版了，wx.authorize 等api不好使
解决：现在必须用button按钮 <button open-type=\"getUserInfo\" bindgetuserinfo=\"sweepCode\">扫码</button>
7、问题：wx.request 请求，无法携带cookie，或者每次请求携带的都不一样
解决：
header: { \'content-type\': \'application/json\', \'cookie\': wx.getStorageSync(\"cookie\") }, success: function (res) { if (url === \'/api/cdz/user/weixin/login\') { const cookie = res.header[\"set-cookie\"]; if (cookie) wx.setStorageSync(\"cookie\", cookie); } resolve(res.data); }, fail: function (res) { // fail调用接口失败 if (url === \'/api/cdz/user/weixin/login\') { const cookie = res.header[\"set-cookie\"]; if (cookie) wx.setStorageSync(\"cookie\", cookie); } reject({ error: \'网络错误\', code: 0 }); }
8、问题：map 组件的使用，map是腾讯地图，和 百度、高德什么的，这些地图坐标系不同，经纬度的相互使用需要转化
解决：用这个包 coordtransform 包很小，用法很简单
9、问题：小程序伪类 ：active 不支持
解决：view、button、navigator 这3个支持 hover-class 属性，用法和 active 一样
10、问题：上述问题，平时好用，但是如果按钮在原生组件上面的话，又不好使了
解决：cover-view 无法嵌套普通标签。他又不支持 hover-class，所以只能js+wxss，自己写按钮激活事件了
11、问题：小程序的事件点击不允许传参数。GoMy无法像vue react之类的一样写箭头函数直接传参
<cover-view class=\"myCover\" data-id=\"my\" bindtap=\"goMy\"></cover-view>
解决：通过data-id这个属性绑定关键参数，触发函数再去取出来
以上就是我遇到的一些问题，后序再有，会再补充
