微信小程序开发技巧以及性能优化
近一年写了挺多小程序，一直没有系统化整理过小程序相关知识体系，最近面试时候也有被问到小程序相关的一些问题。这里大体整理一下，内容也会不断补充，感兴趣的可以
先赞后看,顺便加个关注！
开发技巧
自定义TabBar
目前很多业务场景下，都不会用小程序原生的TabBar，一方面是微信提供的TabBar样式太过单一，另一方面可能业务需要根据用户用户类别展示不同的TabBar。
小程序官方自定义TabBar
此方法适用于仅是修改TabBar样式使用。
- 在
app.json中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/index/index",
"text": "首页"
}, {
"pagePath": "page/my/index",
"text": "我的"
}]
},
"usingComponents": {}
}
- 同时在小程序项目文件根目录下创建
custom-tab-bar文件夹：内容如图：
组件化实现TabBar
这种方式适合这样的业务场景：根据用户权限不同，展示相应的tabBar。之前做过一个小程序，普通用户登录的话进来是商城，tabBar对应的也是商城相关的页面，管理员登录的话展示的是管理端页面，tabBar对应也就是管理端相关页面。
- 我们可以新建一个
home文件夹，在home/index.wxml中写一个tabBar，然后把TabBar页面写成组件，然后点击****切换相应的组件展示就可以。
1rpx问题
小程序中有时候需要定义
border:1rpx,真机上有时候会显示不全，只需要改成border:1px即可
骨架屏
现在为了更好的用户体验，很多应用在loading时候会展示占位图，小程序中也提供了一键生成骨架屏代码。
- 下载并安装 1.03.2006032 或 1.04.2006032 以上版本的开发者工具，点击模拟器右下角生成骨架屏即可。
canvas图片下载后模糊
有时候我们用
canvas绘制的图片预览时候看起来很清晰，但是下载到本地还是会很模糊，我们可以在下载时候canvas输出图片宽高2*，核心代码如下：
wx.canvasToTempFilePath({
x: 0, //指定的画布区域的左上角横坐标
y: 0, //指定的画布区域的左上角纵坐标
width: 200, //指定的画布区域的宽度
height: 260, //指定的画布区域的高度
destWidth: 400, //输出的图片的宽度 指定的画布区域的宽度*2
destHeight: 520, //输出的图片的高度 指定的画布区域的高度*2
canvasId: 'posterCanvas',
fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
quality: 1,
success: function (res) {
...
}
})
小程序动画
写小程序肯定避免不了一些小动画，我们可以使用
animate.css来完成。
- (1) 首先下载
animate.css,然后修改后缀为wxss
(2) 在app.wxss中全局引入。
(3) 页面中加入对应类名即可使用。
@import '/animate.wxss';
直播功能
目前很多小程序商城都带有直播功能，然而如果从0到1写个直播的话，工作量还是非常大的，小程序官方也提供了直播组件，优点是开发难度低，能大大降低开发周期。针对不太复杂的业务场景还是够用的。 查看官方文档
配置直播
- 直接在app.json中引入插件
"plugins": {
"live-player-plugin": {
"version": "1.0.4", // 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
"provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
}
}
- 进入直播间
live:function(){
let roomId = [直播房间id] // 房间号
let customParams = { path: 'pages/index/index', pid: 1 } // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节
this.setData({
roomId,
customParams: encodeURIComponent(JSON.stringify(customParams))
})
}
创建直播
问题来了，在哪创建直播间啊？看图即可
首先登录微信小程序后台，找到直播。
- 创建直播
- 选择直播形式
- 填写基本信息
- 配置直播间样式
- 直播间样式
- 好了，一个直播就创建完成了，此时你会得到一个房间号，在自己搭建的小程序后台上传一下房间号，即可观看直播。这种对于单商户平台极其友好，开发也非常省事省力。
添加商品
- 后台建立商品库，填写相关参数即可。
推流直播
- 看这篇文章小程序推流配置
其他功能
- 直播间还可以创建抽奖，优惠券，以及拉黑用户等功能。也可以在后台设置管理员进行管理。
常用方法封装
开发过程中，我们可以把一些常用方法封装一下，这样在页面中调用会简洁很多。我们可以在根目录下建立
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请求
// 接口地址
const baseUrl='https://xxxx.com';
function https(method,url,data){
//loading
wx.showLoading({
title: '加载中...'
});
//设置请求头
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) {
//没有登录转跳到登录页面
wx.reLaunch({
url: '/pages/login/index'
})
}else{
wxshowToast('请求失败,请稍后重试');
}
}
})
})
};
//导出方法
module.exports = {
wxshowToast,
_https:https,
baseUrl,
};
// 页面中使用
//引入util.js
const util=require('../../utils/utils');
// 发送一个请求
util._https('get','/api/login')
.then((res)=>{
...
})
性能优化
大家应该发现有的小程序打开速度特别快，而有的则非常慢，所以为了用户体验，性能优化还是非常有必要的。之前也看过大佬的文章，受益匪浅，感兴趣的可以看一看京喜小程序的高性能打造之路。
整体优化
（1）上传代码时候进行压缩(开发工具中右侧可以勾选)。
（2） 尽量把无用代码删除，避免代码冗余。
（3）非必要图片放在服务器，不要放到代码包中，不用的本地图片尽量删除。
（4）压缩css文件。
（5）分包预加载，具体使用文档
代码层面优化
接口合并
- 在小程序中
wx.request最大并发是10个，如果超出10个就会阻塞后面的执行，所以把相似接口尽可能的合并。
setData优化
（1）在业务逻辑中，尽可能的合并setData调用
（2）页面渲染相关的数据放到data中
（3）避免更新重写setData中的值，比如我们在data中有一个list数组，修改数组某项我们可以进行局部修改，代码如下：
// 接口返回list赋值
this.setData({ list });
//局部更新
this.setData({
'list[0].name': list[0].name
});
首屏优化
目前大多数电商小程序采用的都是骨架屏+首屏分屏渲染。在刚进入页面时候展示骨架屏，然后展示首屏所需要的模块。比如一个电商小程序，首页可能会分为：
banner+商品分类+特价优惠+推荐产品列表。我们第一屏看到的可能只有：banner+商品分类+特价优惠这些。当拿到数据以后，我们优先渲染首屏模块，等首屏模块全部渲染完成后再渲染非首屏模块。
小程序性能检测工具
小程序官方针对小程序性能表现制订了权威的数值指标，主要围绕 渲染表现、
setData数据量、元素节点数和网络请求延时 这几个维度来给予定义,参考文档：小程序性能优化。
同时小程序也提供了体验评分工具：Audits面板，使用方法也非常简单，在调试区找到Audits,点击运行，然后依次打开每个页面，点击 “停止" 则结束检测即可查看得分情况以及检测报告，可以快速定义到一些问题点，然后进行优化。
结尾
目前就总结这么多了，有新内容会随时进行补充，如果有其他内容也可以评论提出来我进行补充。最后希望大家能够
点赞+关注支持一下。