小程序对npm 的支持与限制目前,小程序中已经支持使用npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用npm 包有如下3 个限制:
①不支持依赖于Node.js 内置库的包
②不支持依赖于浏览器内置对象的包
③不支持依赖于C++ 插件的包
1.什么是Vant Weapp
Vant Weapp 是有赞前端团队开源的一套小程序UI 组件库,助力开发者快速搭建小程序应用。它所使用的是MIT 开源许可协议,对商业使用比较友好。官方文档地址
2.安装Vant 组件库
在小程序项目中,安装Vant 组件库主要分为如下3 步:可以参考Vant 官方提供的:快速上手教程
①通过npm 安装(建议指定版本为@1.3.3)
首先在项目目录处右键,点击【在外部终端窗口中打开】
在终端管理器中键入npm init -y
键入命令:npm i @vant/weapp@1.3.3 -S --production
②构建npm 包
点击工具-》构建npm
找到本地设置,勾选使用npm 模块
③修改app.json详细的操作步骤
将 app.json 中的 "style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
3.使用Vant 组件
安装完Vant 组件库之后,可以在app.json 的usingComponents节点中引入需要的组件,即可在wxml 中直接使用组件。示例代码如下
// app.json "usingComponents": { "van-button": "@vant/weapp/button/index", }
// 页面的.wxml <van-button type="primary">按钮</van-button>
4.定制全局主题样式
Vant Weapp 使用CSS 变量来实现定制主题。关于CSS 变量的基本用法,请参考:MDN 文档
在app.wxss 中,写入CSS 变量,即可对全局生效:
// app.wxss page { --button-danger-background-color: #C00000; --button-danger-border-color: #D60000; --button-primary-background-color: #13A7A0; --button-primary-border-color: #15B4AA; }
所有可用的颜色变量,请参考Vant 官方提供的:配置文件
npm install --save miniprogram-api -promise@1.0.4
miniprogram_npm
//app.js import { promisifyAll } from 'miniprogram-api-promise' const wxp = wx.p = {} promisifyAll(wx, wxp)
4.调用Promise 化之后的异步API
//页面的.wxml文件 <van-button type="danger" bindtype="getInfo">vant按钮</van-button>
// 在页面的.js文件 async getInfo() { const {data: res} = await wx.p.request({ method: 'GET', url: 'https://www.escook.cn/api/get', data: { name: 'zs', age: 20 } }) console.log(res) },
安装MobX 相关的包
在项目中运行如下的命令,安装MobX 相关的包:
npm i --save mobx-miniprogram@4.13.2 mbox-miniprogram-bindings@1.2.1
注意:MobX 相关的包安装完毕之后,记得删除miniprogram_npm 目录后,重新构建npm。
2.创建MobX 的Store 实例
新建store文件夹
// 在这个 JS 文件中,专门来创建 Store 的实例对象 import { observable, action } from 'mobx-miniprogram' export const store = observable({ // 数据字段 numA: 1, numB: 2, activeTabBarIndex: 0, // 计算属性 get sum() { return this.numA + this.numB }, // actions 函数,专门来修改 store 中数据的值 updateNum1: action(function (step) { this.numA += step }), updateNum2: action(function (step) { this.numB += step }), })
3.将Store 中的成员绑定到页面中
// 页面的.js文件 import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from '../../store/store' onl oad: function (options) { this.storeBindings = createStoreBindings(this, { store, fields: ['numA', 'numB', 'sum'], actions: ['updateNum1'] }) }, onUnload: funtion(){ this.storeBindings.destroyStoreBindings() }
4.在页面上使用Store 中的成员
<view>{{numA}} + {{numB}} = {{sum}}</view> <van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button> <van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA - 1</van-button>
// 按钮tap事件的处理函数 btnHandler1(e) { this.updateNum1(e.target.dataset.step) },
5.将Store 中的成员绑定到组件中
// 组件 import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import { store } from '../../store/store' Component({ behaviors: [storeBindingsBehavior], storeBindings: { // 数据源 store, fields: { numA: 'numA', numB: 'numB', sum: 'sum' }, actions: { updateNum2: 'updateNum2' } }, }
6.在组件中使用Store 中的成员
<!--components/numbers/numbers.wxml--> <view>{{numA}} + {{numB}} = {{sum}}</view> <van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button> <van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>
// 组件的方法列表 methods: { btnHandler2(e) { this.updateNum2(e.target.dataset.step) } }
"pages": [ "pages/index", "pages/logs", ], "subpackages": [ { "root": "pkgA", "name": "p1", "pages": [ "pages/cat/cat", "pages/dog/dog" ] }, { "root": "pkgB", "name": "p2", "pages": [ "pages/apple/apple" ], } ],
2.打包原则
①小程序会按subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中
②主包也可以有自己的pages(即最外层的pages 字段)
③tabBar 页面必须在主包内
④分包之间不能互相嵌套
3.引用原则
①主包无法引用分包内的私有资源
②分包之间不能相互引用私有资源
③分包可以引用主包内的公共资源
{ "root": "pkgB", "name": "p2", "pages": [ "pages/apple/apple" ], "independent": true //通过independent声明独立分包 }
5.引用原则
独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源!
例如:①主包无法引用独立分包内的私有资源②独立分包之间,不能相互引用私有资源③独立分包和普通分包之间,不能相互引用私有资源④特别注意:独立分包中不能引用主包内的公共资源
"preloadRule": { "pages/contact/contact": { // 触发分包预下载的路径 "packages": [ "p1" ], "network": "wifi" // 可选值all 和 wifi,表示在指定的网络模式下进行预下载。 } },
5.分包预下载的限制
同一个分包中的页面享有共同的预下载大小限额2M
详细步骤,可以参考小程序官方给出的文档:自定义tabBar