小程序开发这些知识你都Get到了吗

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

开发技巧

自定义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) 页面中加入对应类名即可使用。

    <!-- app.wxss -->
    @import '/animate.wxss';

    <!-- 页面中 -->
    <view  class="animated fadeInLeft"> </view>

wxml中使用三元表达式

• 小程序中普通三元表达式

    <text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}"></text>

• 多个条件嵌套(需要加扩号)

    <view class="{{thmDialog?'class1':(haslogistics?'class1':'class2')}}"> </view>

直播功能

目前很多小程序商城都带有直播功能，然而如果从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,点击运行，然后依次打开每个页面，点击 “停止" 则结束检测即可查看得分情况以及检测报告，可以快速定义到一些问题点，然后进行优化。

结尾

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