小程序-npm安装，分包，等

使用npm 安装插件

初始化npm init

• 在对应小程序的app.json文件同目录下进行cmd命令，npm init 生成 package.json文件

安装对应的组件

安装插件

通过 npm 安装

• npm i @vant/weapp -S --production

通过 yarn 安装

• yarn add @vant/weapp --production

安装 0.x 版本

• npm i vant-weapp -S --production

设置npm模块

• 在 详情-> 本地设置 -> 使用npm设置

构建npm

• 在 工具 -> 构建npm 等待成功

• 之后的node_modules可以删除

使用组件

• 在需要组件的页面(index.json)中组测相应的组件，进行调用，也可以全局(app.json)中注册

// json不能注释
"usingComponents": {
	// 这是需要调用的组件button，用那个，调用那个
  "van-button": "@vant/weapp/button/index"
}

使用分包

为什么需要使用分包？

• 因为小程序主包最大只有2M
• 分包可以达到16M
• 可以实现懒加载
• 可以使得页面更快，小程序秒开等
• 提高首次显示速度，提升用户体验

注意

• 主包不能引用分包的内容，如果引用，那么，分包就没有必要了
• 分包可以引用分包
• 分包可以引用主包

怎么分包

• 底部栏对应的页面是主分包，底部栏对应的子页面，可以做成对应分包

分包

• 在根目录下新建文件夹 --包

• 在新建的文件夹下，创建pages文件夹

• 在pages文件夹下新建需要的文件页面文件夹—正常创建页面的方法

• 目录结构

- 根目录
	- 你创建的分包文件夹
		- pages文件夹
			- 你的需要在分包中创建的页面
			...
	- pages
		- index文件夹
		...
	- utils
		- utis.js
	- app.js
	- app.json
	- app.wxss
	- package-lock.json
	- package.json
	- project.config.json
	- sitemap.json

配置分包

• 在app.json文件中进行配置
• subpackages 分包的配置
• preloadRule 什么情况下加载分包

// json不能注释
// 分包的配置
"subpackages" : [
	{
		// root 代表 分包的根目录
		"root" : "news",
		// 分包需要引用的页面
		"pages" : [
			"pages/actical/actical"
		]
	}
],
// 什么情况下加载分包
 "preloadRule" : {
	 // 当需要进入这个页面的时候
    "pages/yidian/yidian" : {
		// 在任何网络下 4G,5G,3G,WIFI..
      "network" : "all",
	  // 加载分包
      "packages" : ["news"]
    }
  },

• 因为创建分包的时候会app.json中的pages中自动生成一个对应分包的页面，所以需要删除

"pages": [
    "pages/index/index",
    "pages/jok/jok",
    "pages/todo/todo",
    "pages/base/base",
    "pages/logs/logs",
    "pages/yidian/yidian",
	// 这个是分包，需要删除
    // "news/pages/actical/actical"
],

局部更新

• 利用ES6的属性可以动态创建["list[0]"] 这种方法