小程序開發技巧總結

前言

最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了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保存后自動編譯

 

 

 

 

 

 

 

 

 

編譯后的結果

 

 

 

 

 

 

 

 

 

按鈕重置

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

 

支持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

使用方法：

 

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

 

動態設置data中某個值

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

 

flex布局，溢出省略號無效

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

 

組件事件傳遞

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

 

使用wxParse解析HTML

下載wxParse，放到utils目錄下

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

顯示解析內容

圖片等比例

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

 

上拉加載和下拉刷新

上傳圖片

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

 

效果圖如下

 

 

 

 

 

 

 

 

 

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

 

示例WXML：

 

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

 

示例JS

 

動態標題

onLoad的時候動態設置標題