小程序原生5

三、组件代码特性共享Behavior及计算属性computed

1.Behavior组件间代码共享特性

1.1介绍

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

1.2创建

Behavior --- 》 Component
1.开发者自己封装
2.内置（小程序提供的）
3.第三方的

1.3使用

自定义

创建：单独的js文件

const behavior = Behavior({
    // 当前结构和Component的结构保持一致
    properties:{
        behaMsg:{
            type:String,
            value:"我是behavior的prop属性"
        }
    },
    data:{
        behaMsg:"我是behavior的data属性"
    },
    methods:{
        behaClick(){
            console.log("我是behavior的tap事件")
        }
    }
})

module.exports = behavior

使用：1.引入到要使用的组件中，2，进行注册

// components/one/one.js
// 导入behavior
const  common = require("../../behaviors/common");
Component({
    // 注册behavior
    behaviors:[common],
    /**
     * 组件的属性列表
     */
    properties: {
        propMsg:{
            type:String,
            value:"我是组件自己本身的prop属性"
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        dataMsg:"我是组件自己本身的data属性"
    },

    /**
     * 组件的方法列表
     */
    methods: {
        comClick(){
            console.log("我是组件自己本身的tap事件")
        }
    }
})

1.4内置 behaviors

自定义组件中单个表单组件

自定义组件.wxml

<input type="text" model:value="{{ value }}" placeholder="组件标签-用户名" />

自定义组件.js

Component({
    behaviors:["wx://form-field"],
    data: {
        value:""
    },
})

页面.wxml

<form bindsubmit="formSubmit">
    <my-form name="user" ></my-form>
    <input type="text"  name="pass" placeholder="密码" />
    <radio-group name="sex">
        <radio value="m">男</radio>
        <radio value="w">女</radio>
    </radio-group>
    <button form-type="submit">提交</button>
</form>

自定义组件中多个表单组件

自定义组件.wxml

<!-- 多个表单组件 -->

<input type="text"  name="name" placeholder="组件标签-用户名" />
<input type="text"  name="pass" placeholder="组件标签-密码" />

自定义组件.js

Component({
    behaviors:["wx://form-field-group"],
})

页面.wxml

<!-- 多个表单组件对额使用 -->
<form bindsubmit="formSubmit">
    <my-form></my-form>
    <radio-group name="sex">
        <radio value="m">男</radio>
        <radio value="w">女</radio>
    </radio-group>
    <button form-type="submit">提交</button>
</form>

2.computed计算属性

1.1概述

computed是小程序自定义组件扩展 behavior,在小程序组件中，计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时，会重新计算 computed 字段并触发 watch 监听器。目前针对的是component，在页面使用需要引入其他的三方库;

1.2安装

进入小程序端根目录
1.npm init -y
2.npm install --save miniprogram-computed
3.进行构建
	位置：  菜单栏--工具--构建npm
4.正常使用即可

1.3computed 基本用法

// Page 切换成Component构造器
const computedBehavior = require("miniprogram-computed").behavior;
Component({
    behaviors:[computedBehavior], //注册
    properties:{},
    data:{
        numA:1,
        numB:2
    },
    // 在computed不能直接使用this
     computed:{
         sum(data){
            return data.numA + data.numB;
         }
    },
    methods:{
        change(){
            this.setData({
                numA:++this.data.numA,
                numB:++this.data.numB,
            })
        },
      
    }
})

1.4watch 基本用法

// Page 切换成Component构造器
const computedBehavior = require("miniprogram-computed").behavior;
Component({
    behaviors:[computedBehavior], //注册
    properties:{},
    data:{
        numA:1,
        numB:2
    },
    attached(){
        this.setData({
            sum:this.data.numA + this.data.numB
        })
    },
    observers:{

    },
    // watch监听器
    watch:{
        "numA,numB":function(a,b){
            // console.log(a,b)
            this.setData({
                sum:a+b
            })
        }
    },
    methods:{
        change(){
            this.setData({
                numA:++this.data.numA,
                numB:++this.data.numB,
            })
        },

      
    }
})

1.5computed vs watch

从原理上说， `watch` 的性能比 `computed` 更好；但 `computed` 的用法更简洁干净。
此外， `computed` 字段状态只能依赖于 `data` 和其他 `computed` 字段，不能访问 `this` 。如果不可避免要访问 `this` ，则必须使用 `watch` 代替

1.6watch vs observers

无论字段是否真的改变， `observers` 都会被触发，而 `watch` 只在字段值改变了的时候触发，并且触发时带有参数。·

四、工程优化

1.分包

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

优势

1.在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
2.单个分包/主包大小不能超过 2M,整个小程序所有分包大小不超过 20M,能够将工程大小扩充到20M
3.对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

1.主包
	所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本
2.普通分包
	有自己的分包页面及自己的静态资源；
	
	如果直接进入主包，则只加载主包，但是如果直接进入普通分包，则先加载主包，再去加载分包；
	主包中的数据在普通分包是可以直接使用的；
3.独立分包
	有自己的分包页面及自己的静态资源；
	  "independent": true  设置独立分包，独立分包不依赖于主包；

1.1.配置分包结构

app.json

{
     "subPackages": [
        {
            "root":"pageA",
            "pages": [
                "apple/apple",
                "banana/banana"
            ]
        },
        {
            "root":"pageB",
            "pages": [
                "dog/dog"
            ]
        }
    ]
}

1.2.独立分包

{
    "subPackages": [
        {
            "root":"pageA",
            "pages": [
                "apple/apple",
                "banana/banana"
            ]
        },
        {
            "root":"pageB",
            "pages": [
                "dog/dog"
            ],
            "independent": true // 设置为独立分包
        }
    ]
}

1.3.分包预下载

{
    "pages": [
        "pages/test/test",
        "pages/cart/cart",
        "pages/behavior/behavior",
        "pages/index/index"
    ],
    "subPackages": [{
            "root": "pageA",
            "pages": [
                "apple/apple",
                "banana/banana"
            ]
        },
        {
            "name":"animal",
            "root": "pageB",
            "pages": [
                "dog/dog"
            ],
            "independent": true
        }
    ],
    "preloadRule": {
        "pages/test/test": {
            "network": "all",
            "packages": ["pageA","animal"]
        }
    }
}

2.基础库低版本兼容

小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。

2.1版本号比较

比较函数

 // 版本号比较
    // v1   基础库版本   2.19.6
    // v2   要求最低版本 2.10.4   2.10.0
    // 返回值  res >=0 支持  res<0 不支持
    compareVersion(v1, v2) {
        v1 = v1.split('.')// [2,19,6]
        v2 = v2.split('.')// [2,10,4]  
        // 获取v1  v2最大长度
        const len = Math.max(v1.length, v2.length)
        // 循环处理，目的是为了保证V1和V2一样长
        while (v1.length < len) {
            v1.push('0')
        }
        while (v2.length < len) {
            v2.push('0')
        }
        // 直接利用循环进行比较 3
        for (let i = 0; i < len; i++) {
            const num1 = parseInt(v1[i])
            const num2 = parseInt(v2[i])
            if (num1 > num2) {
                return 1
            } else if (num1 < num2) {
                return -1
            }
        }
        return 0
    }

执行比较

onLoad(){
        // 获取用户信息
        var v1 = wx.getSystemInfoSync().SDKVersion;
        var v2 = "2.10.4";
        var res = this.compareVersion(v1,v2);
        // console.log(res)
        if(res >=0){
            wx.getUserProfile({
              desc: '123',
              success(){

              }
            })
        }else{
            // 做提示
        }
    },

2.2API 存在判断

参考获取用户信息api

2.3wx.canIUse

wx.canIUse("page-container")

3.骨架屏使用

传统开发：
小程序：	

五、小程序发布

1.设置真实的appid
2.完善小程序的基本信息
	名称，头像，简介，服务类目
3.设置服务器配置
	把所有涉及的数据请求域名在后台配置好（经过备案，https开头）
4.检测代码项目的大小
	分包，不超过20M， （每一个包不能超过2m）
5.微信开发者工具，点击上传

mpvue  vue
wepy   组件化开发
taro   react
uni-app vue语法