小程序开发领域，有不少既有趣又实用的功能。比如TabBar，在众多业务场景中，人们很少直接使用小程序自带的TabBar。这其中的原因何在？主要是因为微信提供的TabBar样式较为单一，而且根据不同用户类别，业务需求可能需要展示不同的TabBar样式。
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/index/index",
"text": "首页"
}, {
"pagePath": "page/my/index",
"text": "我的"
}]
},
"usingComponents": {}
}
小程序官方自定义TabBar的应用
这个小程序官方提供的TabBar功能，非常实用。举个例子，我之前开发的小程序，普通用户登录后看到的是商城页面，TabBar显示的也都是商城相关的内容。而管理员登录后，则看到的是管理端界面，TabBar同样展示的是管理端相关的信息。这样的设计能很好地满足不同用户的需求。此外，自定义TabBar还能根据用户的权限灵活调整，对具有不同权限的用户有很好的区分效果。
小程序中的样式问题
小程序的样式调整有些小问题。比如，设置边框为1rpx时，在真机上可能显示不完整。遇到这种情况，其实很简单，只需将边框改为1px即可。这类问题在开发过程中很常见。再比如，用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) {
...
}
})
小程序的用户体验提升
@import '/animate.wxss';
用户体验现在非常关键。许多应用在加载过程中会显示占位图，小程序也能轻松生成骨架屏代码。这样一来，用户在等待时就不会感到焦虑。此外，许多小程序商城都具备直播功能。若是从零开始开发直播功能，工作量会非常庞大，但幸运的是，小程序官方提供了直播组件，降低了开发难度，大大节省了时间，使我们能更迅速地完成小程序的开发。
"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.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)=>{
...
})
小程序性能优化的必要
大家普遍了解，有些小程序启动迅速，而有些则较为缓慢。因此，对性能进行优化显得尤为重要。例如，在上传代码时，我们可以对代码进行压缩（在开发工具的右侧有勾选选项），同时将非必要的图片存放在服务器上，而不是代码包中。此外，还应删除不再使用的本地图片。另外，还需注意避免在更新时重写setData中的值，比如data中有一个list数组，只需修改其中的一项即可实现局部更新。
小程序性能指标与检测工具
小程序官方设有性能评估的数值标准，涵盖渲染效果、setData数据量、元素节点数量以及网络请求的延迟等方面。此外，还有一个简便易用的体验评分工具——Audits面板。只需在调试区域找到它，点击运行，浏览每个页面后点击“停止”，即可查看得分和检测报告，帮助我们迅速发现并解决问题，进行优化。
// 接口返回list赋值
this.setData({ list });
//局部更新
this.setData({
'list[0].name': list[0].name
});
我想请教各位，在开发小程序的过程中，是否遇到过特别棘手的问题？期待大家的评论和交流，同时也欢迎点赞和转发。