详解封装微信小程序组件及小程序坑(附带解决方案)

####1、序

  上一篇介绍了如何从零开发微信小程序，博客园审核变智障了，每次代码都不算篇幅，好好滴一篇原创，不到3分钟从首页移出来了。这篇介绍一下组件封装和个人踩坑历程。

####2、封装微信小程序可复用组件

  首先模块化的思想是通用的，在这不作过多解释了。直接上代码，而后解释代码：

// 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。

  而后介绍一下小程序封装组件的特殊之处：

    一、json 配置文件须要配置 "component": true , 表名这是个组件

    二、js 里面使用 Component({})方法构造组件

    三、properties 组件接收的属性在这里面声明，包括数据类型和默认值

    四、生命周期一般用 ready 表明其准备完毕。

  最后介绍一下组件使用的方法：

    一、在要用组件的json文件

        "usingComponents": {           "menu": "/components/menu/index"          }     二、在wxml里面使用，并准备好组件须要的数据         

     这就是微信小程序封装组件的大体流程。大同小异，只是给你们说一下他特殊的地方而已

3、小程序的坑——小程序与其余web应用的不一样之处 ps： 这里只描述问题，并提供解决问题的方法，详细的了解请查官方文档

  一、问题： map 等原生组件的覆盖问题。 在小程序里面，原生组件默认展现层级最该，也就是video、map等组件会覆盖咱们的标签，即使是定位调节 z-index 什么的都没用

    解决：用 cover-view cover-image 包裹内容，就能够覆盖在原生组件之上了。注意 这2个标签内容不能嵌套view等标签，具体使用，请看官方文档。

  二、问题：wxss 没法使用本地资源，即 background-image 不能直接使用相对路径展现图片。

    解决：将图片转成base64展现，或者不使用背景图，直接使用图片。例： background-image: url("base64: .......")

  三、问题：大多数 js 插件没法使用

    缘由：小程序用的是不完整的浏览器对象，大多数 BOM DOM 对象的api没法使用，故：没办法的事情

  四、问题：使用npm包费劲

    解决：请看我上一篇博客，详解微信小程序开发

  五、问题：只支持到ES6，不支持ES7。像 async 等这些东西都用不了。

    解决：这个比较蛋疼了。（1）这里只提供解决的思路。引入 regenerator 这个包 ，或者其余包都行。（2）开发环境本身搭建gulp打包环境，本身把js代码转ES5，注意关闭小程序自带的转换。

  六、问题：获取用户信息改版了，wx.authorize 等api很差使

    解决：如今必须用button按钮 扫码

  七、问题：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 });
            }
复制代码

 八、问题：map 组件的使用，map是腾讯地图，和 百度、高德什么的，这些地图坐标系不一样，经纬度的相互使用须要转化

    解决：用这个包 coordtransform 包很小，用法很简单

  九、问题：小程序伪类 ：active 不支持

    解决：view、button、navigator 这3个支持 hover-class 属性，用法和 active 同样

  十、问题：上述问题，平时好用，可是若是按钮在原生组件上面的话，又很差使了

    解决：cover-view 没法嵌套普通标签。他又不支持 hover-class，因此只能js+wxss，本身写按钮激活事件了

  十一、问题：小程序的事件点击不容许传参数。GoMy没法像vue react之类的同样写箭头函数直接传参

           解决：经过data-id这个属性绑定关键参数，触发函数再去取出来

有兴趣的能够加群交流技术【Android技术交流】：jq.qq.com/?_wv=1027&a…。进群 免费领取安卓进阶学习视频，源码，面试资料，群内有大牛一块儿交流讨论技术；点击连接加入群聊（包括java基础与原理，自定义控件、NDK、架构设计、混合式开发(Flutter，Weex)、性能优化、完整商业项目开发等）