外部资源

# 外部资源

# npm包

目前小程序已经支持使用 npm 安装第三方包，从而提高小程序的开发效率，但是在使用 npm 包中有限制

不支持依赖于 Node.js 内置库的包
不支持依赖于 浏览器内置对象 的包
不支持依赖于 C++插件 的包

# vant使用

# API - Promise

API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API ，升级改造为基于 Promise 的异步 API ，从而提供代码的可读性、维护性、避免回调地狱的问题

使用

安装：npm install --save miniprogram-api-promise

在 app.js 入口文件中配置

import {promisefyAll} from "miniprogram-api-promise"

const wxp = wx.p = {}

promisefyAll(wx,wxf)

1
2
3
4
5

# 全局数据共享

全局数据共享（状态管理）是为了解决组件之间数据共享的问题

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings实现全局数据共享

mobx-miniprogram 用来创建 Store 实例对象
mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法绑定到组件或页面中

# 基本使用

mobx-miniprogram 操作

安装两个依赖包

创建 Store 实例对象

在 store\store.js 文件夹下创建该文件

import {observable} from 'mobo-miniprogram'
export const store = observable({
  numA:1,
  numB:2
})

1
2
3
4
5

计算属性

import {observable} from 'mobo-miniprogram'
export const store = observable({
  numA:1,
  numB:2,
  get sum(){
    return this.numA+this.numB
  }
})

1
2
3
4
5
6
7
8

action 修改数据方法

import {observable,action} from 'mobo-miniprogram'
export const store = observable({
  numA:1,
  numB:2,
  get sum(){//计算属性
    return this.numA+this.numB
  },
  updateNumA:action(function(step){
    this.numA += step
  }),
  updateNumB:action(function(step){
    this.numB += step
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

mobx-miniprogram-bindings 操作

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} form '../../store/store'
Page({
  onLoad:function(){
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB'],//需要绑定的数据
      actions:['updateNumA'],//需要绑定的方法
    })
  },//组件卸载时需要清理相关的绑定
  onUnload:function(){
  	this.storeBindings.destoryStoreBindings()
	}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

page中使用该绑定的数据和方法

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type='primary' bindTap='btnHandler' data-step="{{1}}"></van-button>

btnHandler(e){
  this.updateNumA(e.target.dataset.step)
}

1
2
3
4
5
6

# 在组件中使用Mobx

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} form '../../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBingdings:{
    store,
    fields:{
      numA:"numA",
      numB:"numB",
      num:store.num
    },
    cations:{
      updataNumA:"updateNumA"
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 分包

分包指的是把一个完整的小程序项目，按照需求划分不同的子包，在构建时打包成不同的分包，用户在使用时按需加载

分包的加载规则

在小程序启动时，默认会下载主包并启动主包内页面

tabBar 页面需要放在主包中

当用户进入分包内某个页面时，客户端会把对应分包下载下来

非 tabBar 页面可以按照功能的不同，划分不通过的分包后按需下载

# 创建分包

在 app.json 配置文件中可以自动生成分包

{
 "subpackages":[
   {//分包1
     "root":"pkgA",//分包名
     "name":"p1",//别名
     "pages":[
       "pages/cat/cat",
       "pages/dog/dog"
     ]
   },
   {//分包2
     "root":"pkgB",
     //...
   }
 ] 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

打包原则

小程序会按照 subpackages 的配置进行分包，之外的目录会被打包到主包中
tabBar 页面必须在主包中

# 独立分包

普通分包必须依赖于主包才能运行
独立分包可以在不下载主包的情况下，独立运行

创建独立分包

 {//分包1
     "root":"pkgA",//分包名
     "name":"p1",//别名
     "pages":[
       "pages/cat/cat",
       "pages/dog/dog"
     ],
     "independent":true
   },

1
2
3
4
5
6
7
8
9

引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源

不能引用主包内的公共资源

# 分包预下载

配置

"preloadRule":{
  "pages/contact/contact":{
    "packages":{
      "pkgA"
    },
    "newwork":"all"
  }
}

1
2
3
4
5
6
7
8

同一个分包下的预下载大小限额为 2M

# 自定义tabBar

配置

{
  "tabBar":{
    "custom":true,
      
  }
}

1
2
3
4
5
6

创建文件夹

创建 custom-tab-bar 文件夹

引入vant的tabBar

编辑

上次更新: 2023/02/07, 14:51:48

← 组件 Spring基础01→