微信小程序优化

1.优化-自定义组件的Behavior及computed

1.Behavior组件代码共享特性

地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behav iors.html

1.介绍

behavior是用于组件间代码共享的特性，意思就是定义一部分公共代码特性，每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被和顶到组件中，生命周期函数也会在对应的时机被调用，方便管理与统一修改，每个组件可以引用多个behavior，behavior也可以引用其他behaviod

2.创建

类似于模块创建一样，可以创建专属的behavior目录，用于存放多个behavior

//模块中的内容完全同自定义组件内容
module.exports = Behavior({
  // 使用behaviors模块
  behaviors:[],
  //属性
  properties: {
    name: {
      type:String,
      value:'张三'
    }
  },
  //数据
  data: {
    age:20
  },
  //生命周期
  attached:function() {
    console.log('触发生命走起函数')
  },
  //方法 事件
  methods: {
    change() {
      this.setData({age:30,name:'lisi'})
    }
  }
})

3.使用

在自定义组件中，可以是require的方式引入

注：如果有同名的属性（properties）或方法（methods）

若组件本身有这个属性或方法，则组件的属性或方法会覆盖behavior中的同名属性或方法

若组件本身没有这个属性或方法，则在组件的behaviors字段中定义靠后的behavior的属性或方法会覆盖靠前的同名属性或方法

//引入beha共享模块
let beha = require('../../beha.js')
Component({
    //使用beha模块
  	behaviors:[beha]
    ...
})

4.内置behaviors

如何获取所有表单控件 wx://form-group wx://form-field-button

新建form组件使用formbaha
Component({
    behaviors:['wx://form-field-group','wx://form-field-button']
})

姓名:<input type="text" name="username"/>
性别：<radio-group name='usersex'>
   <radio value='0'>男</radio>
   <radio value='1'>女</radio>
</radio-group>
<button form-type="submit">
   提交
</button>

2.computed计算属性

1.概述

computed是小程序自定义组件扩展的behavior模块，通过该模块能够在小程序组件中实现计算属性computed和监听器watch，当组件中的data或者properties改变时，会重新计算computed字段或者是触发watch监听器，目前针对的实在组件中的使用

2.安装

1.初始化环境 npm init -y
2.在项目的根目录执行安装npm install --save miniprogram-computed
3.构建npm即可 微信小程序-->菜单栏-->构建npm
4.点击工具栏详情-->本地设置-->设置npm模块(勾选)
5.在需要的组件引入const computedBehavior=require('miniprogram-computed').behavior

注意：需要小程序基础库版本>= 2.6.1的环境

computed和watch的实现都是基于miniprogram-computed模块，所以安装一次即可

3.computed基本用法

可以监听属性和数据

注意：不能直接访问this

const computedBehavior = require('miniprogram-computed').behavior
Component({
  behaviors:[computedBehavior],
  //使用计算属性不能操作this
  computed: {
    sum(data) {
      console.log('计算属性')
      return data.num1+data.num2
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    num1: {
      type:Number,
      value:3
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num2: 2,
    num3:0
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    num1Add() {
      console.log(this.data);
      this.setData({
        num1:this.data.num1+1
      })
    },
    num2Add() {
     this.setData({
       num2:this.data.num2+2
     })
    },
  }
})

<button bindtap="num1Add">num1+1:{{num1}}</button>
<button bindtap="num2Add">num2+2: {{num2}}</button>
<view>{{sum}}</view>

4.watch基本用法

可以监听属性和数据

 watch: {
    'num1,num2'(param1,param2){
      console.log(param1,param2);
      this.setData({sum:this.data.num1+this.data.num2})
    }
  },

5.computed vs watch

从原理上说，watch的性能比computed更好，但computed的用户更简洁干净

此外，computed字段状态只能依赖于data和其他computed字段，不能访问this，如果不可避免要访问this，使用watch代替

6.watch vs observers

无论字段是否针对改变，observers都会被触发，而watch只在字段值改变了的时候触发

2.优化-分包加载

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，每个使用分包小程序必定还有一个主包，所谓的主包，即放置默认启动页面/TabBar页面，以及一些所有分包都需要用到公共资源/JS脚本，而分包则是根据开发者的配置及逆行划分

一般可以按照功能划分：如：会员模块，购物车模块 订单模块 商品模块等

优势

能够提高项目首次加载速度

能够解决项目包大小受限2M问题(20M)

能够方便团队协作开发

注意

整个小程序所有分包大小不超过20M

单个分包/主包大小不能超过2M

注意测试时需要将基础库版本调低到2.19左右

1.配置分包结构

使用语法：每个分包都可以有自己的公共的静态文件 css js images还有自己的页面目录(page)

开发者通过在app.json subpackages字段声明项目分包结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sLkdVY7F-1640932821328)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211231113106947.png)]

使用注意

打包原则

声明subpackages后，将按subpackages配置路径进行打包，subpackages配置路径外的目录将被打包到app（主包）中

app（主包）也可以有自己的pages（即最外层的pages字段）

subpackage的根目录不能是了另一个subpackage内的子目录

tabBar页面必须在app（主包）内

引用原则

packageA无法require packageB js文件，可以require app、自己package内的js文件

packageA无法import packageB的template，但可以reuiqre app、自己package内的template

packageA无法使用packageB的资源，但可以使用app、自己的package内的资源

低版本兼容

由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。新客户端用分包、老客户端用的整包，完整包会把各个subpackage里面的路径放到pages中

2.独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于珠宝和其他分包运行，从独立分包中页面进入小程序时，不需要下载主包，当用户进入普通分包或主包内页面时，主包才会被加载

一个小程序中可以由多个独立分包

使用语法：

开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包

{
      "root": "pageB",
      "name": "B",
      "pages": [
        "index/index"
      ],
      "independent": true
    }

使用注意：

独立分包获取不到app实例问题，通过默认实现解决

通过默认实现结局：const app = getApp({allowDefault:true})

注意:虽然能够通过默认实现获取app实例但是只能通过实例去设置实例中的一些公共的函数或者是全局变量，不能获取app实例中的函数和变量

3.分包预下载

开发者可以通过配置，在进入小程序某个页面时，由框架中自动与下载可能需要的分包，提升后续分包页面时的启动速度，对于独立分包，也可以预下载主包

使用语法：

  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["A"]
    }
  }

3.优化-基础库兼容性处理

在小程序中因为基础库版本的不同会导致项目中组件或者api函数调用失败，从而影响项目正常运行，小程序的功能不断的增加，但是旧版的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容

1.版本号比较

获取用户的微信基础版本号，再次和开发者的版本号进行比对，如果版本号低就提示请跟新微信客户端，引导用户更新微信客户端后再使用该小程序

/*
	比对基础库版本号
	v1:开发者版本号 (2.21.2)
	v2:用户版本号 (2.20.1)
*/
const compV = (v1,v2) =>{
	v1 = v1.split('.')
    v2 = v2.split('.')
    for(var i=0;i<v1.length;i++) {
        let num1 = parseInt(v1[i])  //开发者
        let num2 = parseInt(v2[i])  // 用户
        if(num1>num2) {
            retrun -1  //用户版本低
        }else if(num1<num2) {
            return 1  //用户版本高
        }
    }
    return 0  //版本一致
}


//获取用户的基础版本号、开发正版本号
let v1 = '2.22.2'
let v2 = wx.getSystemInfoSync().SDKVersion
let info = compV(v1,v2)
//如果 版本低提示用户更新微信客户端
if(info == -1) {
    wx.showModal({
        title:'版本升级提示',
        content: '是否要更新微信版本',
        success：res=>{
        if(res.confirm) {
        	//用户同意更新
        wx.updateWechatApp()
    }else {
        wx.showToast({
            title:"注意危险",
            icon: 'none'
        })
    }
    }
    })
}

2.API存在判断

if判断api是否可用
if(wx.getUserProfile){
    console.log('可以使用最新的获取用户信息的方法')
}else {
    //wx.getUserInfo()
    console.log('使用了老版本获取用户信息的方法')
}

3.wx.canIUse检测api

wx.canIUse可以判断组件和api是否可用及其属性是否可用

检测某个组件是否可用
console.log(wx.canIUse('share-element'))
检测某个组件属性是否可用
console.log(wx.canIUse('share-element.transfrom'))
检测某个api是否可用
console.log(wx.canIuse('getUserProfile'))
检测某个api是否可用
console.log(wx.canIUse('openSetting.object.winthSubscriptions'))

4.优化-骨架屏使用

工具可以为当前正在预览的页面生成骨架屏代码，工具入口位于模拟器面板左下角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4WfwckES-1640932821335)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211231141420075.png)]

点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码，确定后将在当前页面同级目录下生成pahe.skeleton.wxml和page.skeleton.wxss两个文件，分别为骨架屏代码和模板样式

骨架屏代码通过小程序模板(template)的方式引入 以pages/parent/parent页面为例，引入方式如下
/*引入骨架样式文件*/
@import './parent.skeleton.wxss'

使用骨架屏
引入骨架屏模板
<import src="..."></import>
使用模板
<template is="skeleton" wx:if="{{buffer}}"></template>

与普通模板相同，通过wx;if控制显示与隐藏

可在project.config.json增加字段skeleton-config进行骨架屏相关配置

注意配置完毕后需要重新生成骨架屏才能生效

使用注意：

1.骨架屏仅包括页面首屏中的可见区域，对于横向滚动的 swiper等容器，超出屏幕的子元素将被忽略
2.骨架屏的布局复用开发者的页面布局，需要骨架屏自适应页面尺寸时，页面布局应采用rpx等自适应方案
3.部分组件如 'movable-view' 'movable-area' 'roch-text' 'editor' 'picker' 'picker-view' 'picker-view-column' 'ad' 'officail-account'和'open-data'无法生成理性的骨架效果，可通过添加一个父容器，结合grayBlock、empty等配置，将其置灰
4.请勿修改自动生成的骨架屏代码，当效果不理想时，建议调整相关配置，这样当页面变更时，仍可自动生成
5.生成的骨架屏代码中会包含预览时的页面数据，将被用来填充页面
6.骨架屏通常用于商品列表、新闻列表等页面，对于动画/原生组件较多的页面展示效果不佳
7.该能力除用于展示首屏骨架外，也可以作为局部加载的loading样式，可以灵活使用

5.小程序项目发布

1.确认项目中没有bug，不能是demo

2.查看项目包大小，2M，分包20M

3，填写小程序基本信息，如名称 头像 介绍 服务类目

4.注意配置域名白名单

5.如果项目使用云开发，注意切换云环境id 本地环境dev 线上环境pro

6.通过微信开发者工具提交即可

​ 开发版本：只能被项目成员访问

​ 审核版本:需要微信团队审核1-7 人工审核

​ 线上版本：可退回，暂停业务