标签归档 用户体验

小程序开发领域，有不少既有趣又实用的功能。比如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
    });

我想请教各位，在开发小程序的过程中，是否遇到过特别棘手的问题？期待大家的评论和交流，同时也欢迎点赞和转发。