摘要：前言最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了開發，突然去開發小程序，感覺很雞肋。

前言

最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了Vue開發，突然去開發小程序，感覺很雞肋。以下是我在開發中遇到的一些問題以及解決方法的總結，僅供參考

引入iconfont

在小程序中引入字體圖標要比web麻煩一些，簡單說需要三步：

下載iconfont，把iconfont.css復制到iconfont.wxss，在app.wxss中引入

查看iconfont在unicode模式下的在線鏈接，替換iconfont.wxss中的鏈接為遠程鏈接

在wxml文件中引入對應的icon class

使用less

vscode有一個easy less插件，是我感覺使用less最簡單的方式

vscode安裝easy less插件

創建一個less目錄，用于存放less文件

文件頭部添加編譯注釋 // out: ../pages/index/index.wxss, compress: true, sourceMap: false

ctrl + s保存后自動編譯

編譯后的結果

按鈕重置

小程序中的按鈕功能強大，很多功能必須要用按鈕，比如彈出用戶授權，調用客服功能。默認的樣式一般無法滿足需求，可以把按鈕樣式統一重置，然后自己寫樣式

button {
  padding: 0;
  background: #fff;
  line-height: 0;
  &::after {
    border-color: transparent;
  }
}
.button-hover {
  background: #fff;
}

支持async-await

async-await是ES7的語法，截止我寫這篇文章為止，小程序還是不支持async-await語法的，所以需要使用regenerator-runtime這個庫

下載regenerator-runtime并放到utils目錄下

在util.js引入import regeneratorRuntime from "./regenerator-runtime/runtime-module"

封裝wxRequest，讓它支持async-await

const wxRequest = async (url, params = {}) => {
  Object.assign(params, {
    token: wx.getStorageSync("token")
  })
  // 所有的請求，header默認攜帶token
  let header = params.header || {
    "Content-Type": "application/json",
    "token": params.token || ""
  }
  let data = params.data || {}
  let method = params.method || "GET"
  // hideLoading可以控制是否顯示加載狀態
  if (!params.hideLoading) {
   wx.showLoading({
     title: "加載中...",
   })
  }
  let res = await new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: header,
      success: (res) => {
        if (res && res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: (err) => {
        reject(err)
      },
      complete: (e) => {
        wx.hideLoading()
      }
    })
  })
  return res
}

export {
  wxRequest
}

使用方法：

import regeneratorRuntime from "../../utils/regenerator-runtime/runtime-module.js"
import {
  wxRequest
} from "../../utils/util.js"

Page({
  data: {
   list:[],
   count: 0,
   page: 1,
   limit: 10
  },
  onLoad: function() {
    this.getList()
    // 請求已經結束 做其他事
  },
  getList: async function() {
    await wxRequest(app.globalData.baseUrl + "/test",{
      hideLoading: true,
      data: {
        limit: this.data.limit,
        page: this.data.page
      }
    }).then((ret) => {
      this.setData({
        list: ret.data.data,
        count: ret.data.num
      })
    })
  }
})

封裝之后用起來還是很爽的，擴展起來也方便

動態設置data中某個值

應用場景：循環出來的列表，需要根據點擊項，動態改變列表中對應id的數據

// 動態傳遞id

  


Page({
  data: {
    list:[{
      id: 0,
      name: "wang"
    },{
      id: 1,
      name: "li"
    }]
  },
  onChangeName: function(event){
    // 拿到id
   let id = event.target.dataset.id
   let key = `list[${id}].name`, val = "zhang"
   // 設置值
   this.setData({
    [key]: val
   })
  }
})

flex布局，溢出省略號無效

訂單列表一般都是左邊一個圖片，右邊是標題或描述。這時候圖片寬度是固定的，標題長度自適應

.wrap {
  display: flex;
}
.sub {
  flex: 1;
  width: 0; // 寬度設為0
}
.sub text {
  display: block; // 一定要設置成block
}


  
  
    一段文本一段文本一段文本一段文本一段文本一段文本
    其他
  

組件事件傳遞

任務：父組件向子組件傳遞初始數據，當子組件點擊以后可以triggerEvent自定義事件，父組件執行自定義事件，重新請求數據并傳給子組件

/* 子組件 */

  


properties: {
  list: {
    type: Array,
    default: []
  }
},

methods: {
  setId(e) {
    let id = e.currentTarget.dataset.id
    this.triggerEvent("deleteFav", id)
  }
}

/* 父頁面 */


data: {
  list: []
},
deleteFav(e) {
  let id = e.detail // 獲取傳遞過來的數據
  // 根據id請求數據，然后重新setData
  let newData = [1,2,3]
  this.setData({
    list: newData
  })
}

使用wxParse解析HTML

下載wxParse，放到utils目錄下

在JS頁面引入：import WxParse from "../../utils/wxParse/wxParse"

Page({
  data:{
    contentHTML:"" // 解析后的HTML
  },
  onLoad: function() {
    // 請求到的HTML數據
    let content = "
我是HTML代碼
", that = this;
    WxParse.wxParse("contentHTML", "html", content, that, 0);
  }
})

顯示解析內容