摘要：前言最近公司要開(kāi)發(fā)一款電商小程序，匆忙看了一遍文檔就開(kāi)始干活了。整體開(kāi)發(fā)體驗(yàn)個(gè)人感覺(jué)不太好，特別是如果之前習(xí)慣了開(kāi)發(fā)，突然去開(kāi)發(fā)小程序，感覺(jué)很雞肋。

前言

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

引入iconfont

在小程序中引入字體圖標(biāo)要比web麻煩一些，簡(jiǎn)單說(shuō)需要三步：

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

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

在wxml文件中引入對(duì)應(yīng)的icon class

使用less

vscode有一個(gè)easy less插件，是我感覺(jué)使用less最簡(jiǎn)單的方式

vscode安裝easy less插件

創(chuàng)建一個(gè)less目錄，用于存放less文件

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

ctrl + s保存后自動(dòng)編譯

編譯后的結(jié)果

按鈕重置

小程序中的按鈕功能強(qiáng)大，很多功能必須要用按鈕，比如彈出用戶授權(quán)，調(diào)用客服功能。默認(rèn)的樣式一般無(wú)法滿足需求，可以把按鈕樣式統(tǒng)一重置，然后自己寫(xiě)樣式

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

支持async-await

async-await是ES7的語(yǔ)法，截止我寫(xiě)這篇文章為止，小程序還是不支持async-await語(yǔ)法的，所以需要使用regenerator-runtime這個(gè)庫(kù)

下載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")
  })
  // 所有的請(qǐng)求，header默認(rèn)攜帶token
  let header = params.header || {
    "Content-Type": "application/json",
    "token": params.token || ""
  }
  let data = params.data || {}
  let method = params.method || "GET"
  // hideLoading可以控制是否顯示加載狀態(tài)
  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()
    // 請(qǐng)求已經(jīng)結(jié)束 做其他事
  },
  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
      })
    })
  }
})

封裝之后用起來(lái)還是很爽的，擴(kuò)展起來(lái)也方便

動(dòng)態(tài)設(shè)置data中某個(gè)值

應(yīng)用場(chǎng)景：循環(huán)出來(lái)的列表，需要根據(jù)點(diǎn)擊項(xiàng)，動(dòng)態(tài)改變列表中對(duì)應(yīng)id的數(shù)據(jù)

// 動(dòng)態(tài)傳遞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"
   // 設(shè)置值
   this.setData({
    [key]: val
   })
  }
})

flex布局，溢出省略號(hào)無(wú)效

訂單列表一般都是左邊一個(gè)圖片，右邊是標(biāo)題或描述。這時(shí)候圖片寬度是固定的，標(biāo)題長(zhǎng)度自適應(yīng)

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


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

組件事件傳遞

任務(wù)：父組件向子組件傳遞初始數(shù)據(jù)，當(dāng)子組件點(diǎn)擊以后可以triggerEvent自定義事件，父組件執(zhí)行自定義事件，重新請(qǐng)求數(shù)據(jù)并傳給子組件

/* 子組件 */

  


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

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

/* 父頁(yè)面 */


data: {
  list: []
},
deleteFav(e) {
  let id = e.detail // 獲取傳遞過(guò)來(lái)的數(shù)據(jù)
  // 根據(jù)id請(qǐng)求數(shù)據(jù)，然后重新setData
  let newData = [1,2,3]
  this.setData({
    list: newData
  })
}

使用wxParse解析HTML

下載wxParse，放到utils目錄下

在JS頁(yè)面引入：import WxParse from "../../utils/wxParse/wxParse"

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

顯示解析內(nèi)容