微信小程序開發(fā)技巧以及性能優(yōu)化
近一年寫了挺多小程序态蒂，一直沒有系統(tǒng)化整理過小程序相關(guān)知識(shí)體系椒涯，最近面試時(shí)候也有被問到小程序相關(guān)的一些問題视搏。這里大體整理一下径密，內(nèi)容也會(huì)不斷補(bǔ)充午阵，感興趣的可以
先贊后看,順便加個(gè)關(guān)注！
開發(fā)技巧
自定義TabBar
目前很多業(yè)務(wù)場景下享扔，都不會(huì)用小程序原生的TabBar趟庄，一方面是微信提供的TabBar樣式太過單一，另一方面可能業(yè)務(wù)需要根據(jù)用戶用戶類別展示不同的TabBar伪很。
小程序官方自定義TabBar
此方法適用于僅是修改TabBar樣式使用戚啥。
- 在
app.json中的 tabBar 項(xiàng)指定 custom 字段，同時(shí)其余 tabBar 相關(guān)配置也補(bǔ)充完整锉试。
所有 tab 頁的 json 里需聲明 usingComponents 項(xiàng)猫十，也可以在 app.json 全局開啟。
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/index/index",
"text": "首頁"
}, {
"pagePath": "page/my/index",
"text": "我的"
}]
},
"usingComponents": {}
}
- 同時(shí)在小程序項(xiàng)目文件根目錄下創(chuàng)建
custom-tab-bar文件夾：內(nèi)容如圖：
組件化實(shí)現(xiàn)TabBar
這種方式適合這樣的業(yè)務(wù)場景：根據(jù)用戶權(quán)限不同呆盖，展示相應(yīng)的tabBar拖云。之前做過一個(gè)小程序，普通用戶登錄的話進(jìn)來是商城应又，tabBar對(duì)應(yīng)的也是商城相關(guān)的頁面宙项，管理員登錄的話展示的是管理端頁面，tabBar對(duì)應(yīng)也就是管理端相關(guān)頁面株扛。
- 我們可以新建一個(gè)
home文件夾尤筐，在home/index.wxml中寫一個(gè)tabBar，然后把TabBar頁面寫成組件洞就，然后點(diǎn)擊****切換相應(yīng)的組件展示就可以盆繁。
1rpx問題
小程序中有時(shí)候需要定義
border:1rpx,真機(jī)上有時(shí)候會(huì)顯示不全，只需要改成border:1px即可
骨架屏
現(xiàn)在為了更好的用戶體驗(yàn)旬蟋，很多應(yīng)用在loading時(shí)候會(huì)展示占位圖油昂，小程序中也提供了一鍵生成骨架屏代碼。
- 下載并安裝 1.03.2006032 或 1.04.2006032 以上版本的開發(fā)者工具倾贰，點(diǎn)擊模擬器右下角生成骨架屏即可冕碟。
canvas圖片下載后模糊
有時(shí)候我們用
canvas繪制的圖片預(yù)覽時(shí)候看起來很清晰，但是下載到本地還是會(huì)很模糊匆浙，我們可以在下載時(shí)候canvas輸出圖片寬高2*安寺，核心代碼如下：
wx.canvasToTempFilePath({
x: 0, //指定的畫布區(qū)域的左上角橫坐標(biāo)
y: 0, //指定的畫布區(qū)域的左上角縱坐標(biāo)
width: 200, //指定的畫布區(qū)域的寬度
height: 260, //指定的畫布區(qū)域的高度
destWidth: 400, //輸出的圖片的寬度 指定的畫布區(qū)域的寬度*2
destHeight: 520, //輸出的圖片的高度 指定的畫布區(qū)域的高度*2
canvasId: 'posterCanvas',
fileType: 'jpg', //圖片的質(zhì)量，目前僅對(duì) jpg 有效吞彤。取值范圍為 (0, 1]我衬，不在范圍內(nèi)時(shí)當(dāng)作 1.0 處理叹放。
quality: 1,
success: function (res) {
...
}
})
小程序動(dòng)畫
寫小程序肯定避免不了一些小動(dòng)畫，我們可以使用
animate.css來完成挠羔。
- (1) 首先下載
animate.css,然后修改后綴為wxss
(2) 在app.wxss中全局引入井仰。
(3) 頁面中加入對(duì)應(yīng)類名即可使用。
<!-- app.wxss -->
@import '/animate.wxss';
<!-- 頁面中 -->
<view class="animated fadeInLeft"> </view>
直播功能
目前很多小程序商城都帶有直播功能破加，然而如果從0到1寫個(gè)直播的話俱恶，工作量還是非常大的，小程序官方也提供了直播組件范舀，優(yōu)點(diǎn)是開發(fā)難度低合是，能大大降低開發(fā)周期。針對(duì)不太復(fù)雜的業(yè)務(wù)場景還是夠用的锭环。 查看官方文檔
配置直播
- 直接在app.json中引入插件
"plugins": {
"live-player-plugin": {
"version": "1.0.4", // 注意填寫該直播組件最新版本號(hào)聪全，微信開發(fā)者工具調(diào)試時(shí)可獲取最新版本號(hào)（復(fù)制時(shí)請(qǐng)去掉注釋）
"provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid，該示例值即為直播組件appid（復(fù)制時(shí)請(qǐng)去掉注釋）
}
}
- 進(jìn)入直播間
live:function(){
let roomId = [直播房間id] // 房間號(hào)
let customParams = { path: 'pages/index/index', pid: 1 } // 開發(fā)者在直播間頁面路徑上攜帶自定義參數(shù)（如示例中的path和pid參數(shù)）辅辩，后續(xù)可以在分享卡片鏈接和跳轉(zhuǎn)至商詳頁時(shí)獲取难礼，詳見【獲取自定義參數(shù)】、【直播間到商詳頁面攜帶參數(shù)】章節(jié)
this.setData({
roomId,
customParams: encodeURIComponent(JSON.stringify(customParams))
})
}
創(chuàng)建直播
問題來了玫锋，在哪創(chuàng)建直播間岸贶浴？看圖即可
首先登錄微信小程序后臺(tái)撩鹿，找到直播谦炬。
- 創(chuàng)建直播
- 選擇直播形式
- 填寫基本信息
- 配置直播間樣式
- 直播間樣式
- 好了，一個(gè)直播就創(chuàng)建完成了节沦，此時(shí)你會(huì)得到一個(gè)房間號(hào)键思，在自己搭建的小程序后臺(tái)上傳一下房間號(hào)，即可觀看直播散劫。這種對(duì)于單商戶平臺(tái)極其友好稚机，開發(fā)也非常省事省力。
添加商品
- 后臺(tái)建立商品庫获搏，填寫相關(guān)參數(shù)即可。
推流直播
- 看這篇文章小程序推流配置
其他功能
- 直播間還可以創(chuàng)建抽獎(jiǎng)失乾，優(yōu)惠券常熙，以及拉黑用戶等功能。也可以在后臺(tái)設(shè)置管理員進(jìn)行管理碱茁。
常用方法封裝
開發(fā)過程中裸卫，我們可以把一些常用方法封裝一下，這樣在頁面中調(diào)用會(huì)簡潔很多纽竣。我們可以在根目錄下建立
utils/utils.js,封裝常用方法墓贿，下面列舉一一些常用方法：
// utils.js
//小程序提示語
function wxshowToast(title, icon, time, fn) {
!icon?icon='none'
!time?time=2000
wx.showToast({
title: String(title),
icon: icon,
duration: time,
success: function() {
fn?fn():''
},
fail:function(err){
console.log(err)
}
})
};
//request請(qǐng)求
// 接口地址
const baseUrl='https://xxxx.com';
function https(method,url,data){
//loading
wx.showLoading({
title: '加載中...'
});
//設(shè)置請(qǐng)求頭
var header = {
'Content-Type':'application/json'
};
//檢查緩存中有沒有token
var token = wx.getStorageSync('token');
if (token != '') {
header.Authorization = token
}
return new Promise((resolve,reject)=>{
wx.request({
url:baseUrl+url,
data: data,
header: header,
method: method,
complete: (res) => {
wx.hideLoading()
if(res.statusCode==200){
if(res.data.status){
resolve(res.data.data)
}else{
wxshowToast(res.data.msg)
reject(res.data.data)
}
}else if (res.statusCode === 401) {
//沒有登錄轉(zhuǎn)跳到登錄頁面
wx.reLaunch({
url: '/pages/login/index'
})
}else{
wxshowToast('請(qǐng)求失敗,請(qǐng)稍后重試');
}
}
})
})
};
//導(dǎo)出方法
module.exports = {
wxshowToast,
_https:https,
baseUrl,
};
// 頁面中使用
//引入util.js
const util=require('../../utils/utils');
// 發(fā)送一個(gè)請(qǐng)求
util._https('get','/api/login')
.then((res)=>{
...
})
性能優(yōu)化
大家應(yīng)該發(fā)現(xiàn)有的小程序打開速度特別快茧泪，而有的則非常慢，所以為了用戶體驗(yàn)聋袋，性能優(yōu)化還是非常有必要的队伟。之前也看過大佬的文章，受益匪淺幽勒，感興趣的可以看一看??京喜小程序的高性能打造之路嗜侮。
整體優(yōu)化
（1）上傳代碼時(shí)候進(jìn)行壓縮(開發(fā)工具中右側(cè)可以勾選)。
（2） 盡量把無用代碼刪除啥容，避免代碼冗余锈颗。
（3）非必要圖片放在服務(wù)器，不要放到代碼包中咪惠，不用的本地圖片盡量刪除击吱。
（4）壓縮css文件。
（5）分包預(yù)加載遥昧，具體使用文檔
代碼層面優(yōu)化
接口合并
- 在小程序中
wx.request最大并發(fā)是10個(gè)覆醇，如果超出10個(gè)就會(huì)阻塞后面的執(zhí)行，所以把相似接口盡可能的合并渠鸽。
setData優(yōu)化
（1）在業(yè)務(wù)邏輯中叫乌，盡可能的合并setData調(diào)用
（2）頁面渲染相關(guān)的數(shù)據(jù)放到data中
（3）避免更新重寫setData中的值，比如我們在data中有一個(gè)list數(shù)組徽缚，修改數(shù)組某項(xiàng)我們可以進(jìn)行局部修改憨奸，代碼如下：
// 接口返回list賦值
this.setData({ list });
//局部更新
this.setData({
'list[0].name': list[0].name
});
首屏優(yōu)化
目前大多數(shù)電商小程序采用的都是骨架屏+首屏分屏渲染。在剛進(jìn)入頁面時(shí)候展示骨架屏凿试，然后展示首屏所需要的模塊排宰。比如一個(gè)電商小程序，首頁可能會(huì)分為：
banner+商品分類+特價(jià)優(yōu)惠+推薦產(chǎn)品列表那婉。我們第一屏看到的可能只有：banner+商品分類+特價(jià)優(yōu)惠這些板甘。當(dāng)拿到數(shù)據(jù)以后，我們優(yōu)先渲染首屏模塊详炬，等首屏模塊全部渲染完成后再渲染非首屏模塊盐类。
小程序性能檢測工具
小程序官方針對(duì)小程序性能表現(xiàn)制訂了權(quán)威的數(shù)值指標(biāo)，主要圍繞 渲染表現(xiàn)呛谜、
setData數(shù)據(jù)量在跳、元素節(jié)點(diǎn)數(shù)和網(wǎng)絡(luò)請(qǐng)求延時(shí) 這幾個(gè)維度來給予定義,參考文檔：小程序性能優(yōu)化。
同時(shí)小程序也提供了體驗(yàn)評(píng)分工具：Audits面板隐岛，使用方法也非常簡單猫妙，在調(diào)試區(qū)找到Audits,點(diǎn)擊運(yùn)行，然后依次打開每個(gè)頁面聚凹，點(diǎn)擊 “停止" 則結(jié)束檢測即可查看得分情況以及檢測報(bào)告割坠，可以快速定義到一些問題點(diǎn)齐帚，然后進(jìn)行優(yōu)化。
結(jié)尾
目前就總結(jié)這么多了彼哼，有新內(nèi)容會(huì)隨時(shí)進(jìn)行補(bǔ)充对妄，如果有其他內(nèi)容也可以評(píng)論提出來我進(jìn)行補(bǔ)充。最后希望大家能夠
點(diǎn)贊??+關(guān)注支持一下沪羔。
