Cao Note

外观

工程优化 ​

工程优化 ​

分包 ​

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

优势

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

配置分包结构 ​

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

  "subPackages": [{
    "root": "animal",
    "pages": [
      "pages/dog/dog",
      "pages/cat/cat"
    ]
  },{
    "root": "fruit",
    "pages": [
      "pages/apple/apple",
      "pages/orange/orange"
    ]
  }],
  "subPackages": [{
    "root": "animal",
    "pages": [
      "pages/dog/dog",
      "pages/cat/cat"
    ]
  },{
    "root": "fruit",
    "pages": [
      "pages/apple/apple",
      "pages/orange/orange"
    ]
  }],

打包原则 ​

  • 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包） 中
  • app（主包）也可以有自己的 pages（即最外层的 pages 字段）
  • subpackage 的根目录不能是另外一个 subpackage 内的子目录
  • tabBar 页面必须在 app（主包）内

引用原则 ​

  • packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件；使用 分包异步化 时不受此条限制
  • packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
  • packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

1.2.独立分包 ​

"subPackages": [{
    "root": "animal",
    "pages": [
      "pages/dog/dog",
      "pages/cat/cat"
    ],
    "independent": true
  },{
    "root": "fruit",
    "pages": [
      "pages/apple/apple",
      "pages/orange/orange"
    ]
  }],
"subPackages": [{
    "root": "animal",
    "pages": [
      "pages/dog/dog",
      "pages/cat/cat"
    ],
    "independent": true
  },{
    "root": "fruit",
    "pages": [
      "pages/apple/apple",
      "pages/orange/orange"
    ]
  }],
  • 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）
  • 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
  • App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
  • 独立分包中暂时不支持使用插件。

1.3.分包预下载 ​

"preloadRule": {

  "pages/index/index":{

   "network": "wifi",

   "packages": ["animal","fruit"]

  },

  "pages/detail/detail":{

   "network": "all",

   "packages": ["animal"]

  }

 },
"preloadRule": {

  "pages/index/index":{

   "network": "wifi",

   "packages": ["animal","fruit"]

  },

  "pages/detail/detail":{

   "network": "all",

   "packages": ["animal"]

  }

 },

基础库低版本处理 ​

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

版本号比较 ​

function compareVersion(v1, v2) {
    v1 = v1.split('.')
    v2 = v2.split('.')
    const len = Math.max(v1.length, v2.length)

    while (v1.length < len) {
      v1.push('0')
    }
    while (v2.length < len) {
      v2.push('0')
    }

    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
  }

  export default  compareVersion
function compareVersion(v1, v2) {
    v1 = v1.split('.')
    v2 = v2.split('.')
    const len = Math.max(v1.length, v2.length)

    while (v1.length < len) {
      v1.push('0')
    }
    while (v2.length < len) {
      v2.push('0')
    }

    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
  }

  export default  compareVersion

API 存在判断 ​

if(wx.showModal){
            wx.showModal({
              cancelColor: 'cancelColor',
              title:"系统提示"
            })
        }else{
            console.log("版本低")
        }
if(wx.showModal){
            wx.showModal({
              cancelColor: 'cancelColor',
              title:"系统提示"
            })
        }else{
            console.log("版本低")
        }

wx.canIUse ​

 wx.canIUse('view.hover-stop-propagation')
 wx.canIUse('view.hover-stop-propagation')

不给这部分用户服务 ​

在设置中设置最低版本。

骨架屏使用 ​

1 使用新版的微信开发者工具(大于 1.03.2006032 或 1.04.2006032 )

2 微信开发者工具上模拟器右下角有三个点，点击生成骨架屏--在对应的页面目录下产生骨架屏的 wxml 和 wxss

3 使用骨架屏(模板和引用)

<import src="./list.skeleton.wxml" />
<template is="skeleton" wx:if="{{loading}}"></template>
<import src="./list.skeleton.wxml" />
<template is="skeleton" wx:if="{{loading}}"></template>

Copyright © 2024-present xiaocao