詳解封裝微信小程序組件及小程序坑(附帶解決方案)

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裏面使用，並準備好組件須要的數據

　　　　　　　　<menu menuList="{{menuList}}"></menu>
　　
　　這就是微信小程序封裝組件的大體流程。大同小異，只是給你們說一下他特殊的地方而已

 

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按鈕  <button open-type="getUserInfo" bindgetuserinfo="sweepCode">掃碼</button>

　　七、問題：wx.request 請求，沒法攜帶cookie，或者每次請求攜帶的都不同,並且不一樣版本開發者工具設置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"] || 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"] || 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之類的同樣寫箭頭函數直接傳參

　　　　　　<cover-view class="myCover" data-id="my" bindtap="goMy"></cover-view>

　　　    解決：經過data-id這個屬性綁定關鍵參數，觸發函數再去取出來

 

　　以上就是我遇到的一些問題，後序再有，會再補充