微信小程序开发技巧以及性能优化

微信小程序开发技巧以及性能优化

近一年写了挺多小程序,一直没有系统化整理过小程序相关知识体系,最近面试时候也有被问到小程序相关的一些问题。这里大体整理一下,内容也会不断补充,感兴趣的可以先赞后看,顺便加个关注!

开发技巧

自定义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文件夹:内容如图:

cHUpon.png

组件化实现TabBar

这种方式适合这样的业务场景:根据用户权限不同,展示相应的tabBar。之前做过一个小程序,普通用户登录的话进来是商城,tabBar对应的也是商城相关的页面,管理员登录的话展示的是管理端页面,tabBar对应也就是管理端相关页面。

  • 我们可以新建一个home文件夹,在home/index.wxml中写一个tabBar,然后把TabBar页面写成组件,然后点击****切换相应的组件展示就可以。

cHa54I.png

1rpx问题

小程序中有时候需要定义border:1rpx,真机上有时候会显示不全,只需要改成border:1px即可

骨架屏

现在为了更好的用户体验,很多应用在loading时候会展示占位图,小程序中也提供了一键生成骨架屏代码。

  • 下载并安装 1.03.2006032 或 1.04.2006032 以上版本的开发者工具,点击模拟器右下角生成骨架屏即可。

cHwiWt.png

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,点击运行,然后依次打开每个页面,点击 “停止" 则结束检测即可查看得分情况以及检测报告,可以快速定义到一些问题点,然后进行优化。

工具

结尾

目前就总结这么多了,有新内容会随时进行补充,如果有其他内容也可以评论提出来我进行补充。最后希望大家能够点赞+关注支持一下。

你可能感兴趣的:(微信小程序开发技巧以及性能优化)