小程序總結(jié)
最近公司要開發(fā)一款電商小程序，匆忙看了一遍文檔就開始干活了旬痹。整體開發(fā)體驗(yàn)個(gè)人感覺不太好，特別是如果之前習(xí)慣了Vue開發(fā)，突然去開發(fā)小程序两残，感覺很雞肋永毅。以下是我在開發(fā)中遇到的一些問題以及解決方法的總結(jié)，僅供參考
引入iconfont
在小程序中引入字體圖標(biāo)要比web麻煩一些人弓，簡(jiǎn)單說需要三步：
下載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插件意蛀，是我感覺使用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)的樣式一般無法滿足需求若贮，可以把按鈕樣式統(tǒng)一重置，然后自己寫樣式
button {
? padding: 0;
? background: #fff;
? line-height: 0;
? &::after {
? ? border-color: transparent;
? }
}
.button-hover {
? background: #fff;
支持async-await
async-await是ES7的語(yǔ)法痒留，截止我寫這篇文章為止兜看，小程序還是不支持async-await語(yǔ)法的，所以需要使用regenerator這個(gè)庫(kù)
下載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')
? })
? // 所有的請(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
}
封裝之后用起來還是很爽的熊锭，擴(kuò)展起來也方便
動(dòng)態(tài)設(shè)置data中某個(gè)值
// 動(dòng)態(tài)傳遞id
<block wx:for="{{list}}" wx:key="{{index}}">
? 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'
?? // 設(shè)置值
?? this.setData({
? ? [key]:val
?? })
? }
})
應(yīng)用場(chǎng)景：循環(huán)出來的列表弧轧，需要根據(jù)點(diǎn)擊項(xiàng)，動(dòng)態(tài)改變列表中對(duì)應(yīng)id的數(shù)據(jù)
flex布局碗殷，溢出省略號(hào)無效
訂單列表一般都是左邊一個(gè)圖片精绎，右邊是標(biāo)題或描述。這時(shí)候圖片寬度是固定的锌妻，標(biāo)題長(zhǎng)度自適應(yīng)
組件事件傳遞
任務(wù)：父組件向子組件傳遞初始數(shù)據(jù)代乃，當(dāng)子組件點(diǎn)擊以后可以triggerEvent自定義事件，父組件執(zhí)行自定義事件仿粹，重新請(qǐng)求數(shù)據(jù)并傳給子組件
摘自：?http://www.wxapp-union.com/article-4287-1.html
