小程式開發技巧總結

wmui發表於2018-07-18

前言

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

引入iconfont

在小程式中引入字型圖示要比web麻煩一些，簡單說需要三步：

下載iconfont，把iconfont.css複製到iconfont.wxss，在app.wxss中引入
檢視iconfont在unicode模式下的線上連結，替換iconfont.wxss中的連結為遠端連結

在wxml檔案中引入對應的icon class

<icon class="iconfont icon-pay"></icon>
複製程式碼

使用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是ECMA2017(ES8)的語法，截止我寫這篇文章為止，小程式還是不支援async-await語法的，所以需要使用regenerator這個庫

下載regenerator，並把regenerator-runtime並放到utils目錄下

2. 在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
<block wx:for="{{list}}" wx:key="{{index}}">
  <view catch:tap="onChangeName" data-id="{{item.id}}"></view>
</block>

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
}

<view calss="wrap">
  <image src="i.png"/>
  <view class="sub">
    <text>一段文字一段文字一段文字一段文字一段文字一段文字</text>
    <view>其他</view>
  </view>
</view>
複製程式碼

元件事件傳遞

任務：父元件向子元件傳遞初始資料，當子元件點選以後可以triggerEvent自定義事件，父元件執行自定義事件，重新請求資料並傳給子元件

/* 子元件 */
<view>
  <view bind:tap="setId" data-id="1"></view>
</view>

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

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

/* 父頁面 */
<child bind:customEvent="deleteFav"></child>

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 = '<div>我是HTML程式碼</div>', that = this;
    WxParse.wxParse('contentHTML', 'html', content, that, 0);
  }
})

複製程式碼

顯示解析內容

<import src="../../utils/wxParse/wxParse.wxml"/>
<view>
  <!-- 顯示內容 -->
  <template is="wxParse" data="{{wxParseData:contentHTML.nodes}}" />
</view>
複製程式碼

圖片等比例

image標籤有個mode屬性，可以設定圖片如何顯示，如果文件看的不仔細還真容易發現

<image src="test.png" mode="widthFix"/>
複製程式碼

上拉載入和下拉重新整理

{
  "onReachBottomDistance": 0,
  "enablePullDownRefresh": true
}
複製程式碼

data: {
  limit: 30,
  page: 1,
  list:[],
  count:0
},
// 下拉
onPullDownRefresh: function () {
  this.setData({
    page: 1,
    list:[]
  })
  this.getData()
  wx.stopPullDownRefresh()
},
// 上拉
onReachBottom: function () {
  if(this.data.list.length >= this.data.count) {
    return false
  }
  this.setData({
    page: this.data.page + 1
  })
  this.getData()
},
getData: async function () {
  await wxRequest(app.globalData.baseUrl + '/test', {
    data: {
      page: this.data.page,
      limit: this.data.limit,
    }
  }).then((ret) => {
    let list = this.data.list.concat(ret.data.list)
    this.setData({
      list: list,
      count: ret.data.count
    })
  })
}
複製程式碼

上傳圖片

任務：小程式上傳圖片到伺服器，最多上傳三張，前端可以刪除圖片

效果圖如下

使用到的API有兩個：wx.uploadFile wx.chooseImage

示例WXML：

<view class="sale after-pic">
  <block wx:for="{{imgList}}" wx:key="{{index}}">
    <view class="pic">
      <image src="{{item}}" />
      <icon type="clear" size="20" catchtap="clearImg" data-id="{{index}}"/>
    </view>
  </block>
  <image src="../../images/upload.png" catchtap="chooseImage" />
</view>
<button catchtap="onSub">提交</button>
複製程式碼

imgList是wx.chooseImage成功後返回的圖片臨時地址

示例JS

Page({
  data: {
    imgList:[]
  },
  // 使用async await是因為圖片上傳是非同步的
  onSub: async function() {
    // 點選提交後，開始上傳圖片
     let imgUrls = []
     for (let index = 0; index < this.data.imgList.length; index++) {
       await this.uploadFile(this.data.imgList[index]).then((res) => {
         // 這裡要注意把res.data parse一下，預設是字串
         let parseData = JSON.parse(res.data)
         imgUrls.push(parseData.data) // 圖片地址
       })
     }
     console.log(imgUrls) // 3張圖片上傳成功後，執行其他操作
  },
  // 刪除某張圖片
  clearImg: function (params) {
    let imgList = this.data.imgList
    let id = params.currentTarget.dataset.id // 圖片索引
    imgList.splice(id, 1) // 刪除
    this.setData({
      imgList: imgList
    })
  },
  chooseImage: function (params) {
    wx.chooseImage({
      count: 3, // 做多3張
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        // 儲存臨時地址
        this.setData({
          imgList: res.tempFilePaths
        })
      }
    })
  },
  uploadFile: function (filePath) {
    // 返回Promise是為了解決圖片上傳的非同步問題
    return new Promise( (resolve, reject) => {
      wx.uploadFile({
        url: app.globalData.baseUrl + '/file/upload', // 上傳地址
        filePath: filePath,
        name: 'file', // 這裡的具體值，問後端人員
        formData: {},
        header: {
          "Content-Type": "multipart/form-data"
        },
        success: (res) =>{
          resolve(res.data)
        },
        fail:(err) => {
          reject(err)
        }
      })
    })
  }
})
複製程式碼

動態標題

onLoad的時候動態設定標題

wx.setNavigationBarTitle({
  title: '新標題'
})
複製程式碼

結語

以上是僅為我個人在開發過程中遇到的一些問題，若有錯誤還請批評指正，感謝閱讀

Blog

GitHub

我開發中總結的小技巧
2017-10-18
小程式開發總結
2018-06-25
Taro小程式開發總結
2020-01-12
mpvue開發小程式總結
2018-10-15
Vue
微信小程式開發總結
2020-12-10
微信小程式
小程式開發實踐總結
2018-08-22
Vue 開發技巧總結
2020-08-28
Vue
微信小程式地圖開發總結
2019-07-04
微信小程式地圖
小程式開發問題總結1
2021-09-09
使用mpvue開發github小程式總結
2018-08-21
VueGithub
微信小程式開發總結與心得
2018-11-27
微信小程式
Web APP開發技巧總結
2015-05-20
WebAPP
iOS開發—技巧總結（一）
2016-06-15
iOS
微信小程式開發總結（附原始碼）
2019-02-20
微信小程式原始碼
微信小程式開發BUG經驗總結
2018-05-31
微信小程式
微信小程式開發知識點總結
2017-02-21
微信小程式
Android程式碼優化小技巧總結
2015-09-14
Android優化
小程式開發總結一：mpvue框架及與小程式原生的混搭開發
2018-10-07
Vue框架
webapp開發技巧總結（share）
2017-11-16
WebAPP
【web前端】小技巧總結
2017-06-27
Web前端
Objective-C開發使用技巧總結
2018-01-09
Object
Flutter 開發小技巧
2020-05-18
Flutter
Vue開發小技巧
2019-10-14
Vue
開發小技巧-mock
2018-12-20
Mock
iOS 開發小技巧
2015-08-13
iOS
Chrome 開發者工具的小技巧總結
2017-01-20
Chrome
微信小程式小總結
2017-01-18
微信小程式
程式設計技巧總結
2017-04-20
程式設計
你需要知道的小程式開發技巧
2018-05-07
第一個mpvue小程式開發完了，來總結下吧
2019-03-04
Vue
經驗總結--我的小程式開發和進化之路
2019-01-20
Pytorch Optimizer類使用小技巧總結
2020-12-06
PyTorch
成為JavaScript開發者的小技巧總結
2016-07-19
JavaScript
小程式 · 配置總結
2019-01-24
微信小程式總結
2018-05-14
微信小程式
提高開發銷量小技巧
2021-01-28
提高開發效率小技巧
2021-01-28
React開發的小技巧
2018-09-17
React