1. 使用npm包
目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用
npm包有如下3个限制:
- 不支持依赖于Node.js内置库的包
- 不支持依赖于浏览器内置对象的包
- 不支持依赖于C++插件的包
2. npm-Vant Weapp
Vant Weapp
Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是
MIT开源许可协议,对商业使用比较友好。
在小程序项目中,安装Vant组件库主要分为如下3步:
- 通过npm安装(建议指定版本为@1.3.3)
- 构建npm包
- 修改app.json
安装
项目目录启动shell终端
# 初始化 package.json 包管理配置文件
F:\wxapplet\mp_05>npm init -y
{
"name": "mp_05",
"version": "1.0.0",
"description": "",
"main": ".eslintrc.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
# 安装vant/weapp 包,这里指定了1.3.3版本
F:\wxapplet\mp_05>npm i @vant/weapp@1.3.3 -S --production
完成上述步骤后,在小工具中通过工具->构建npm
防止样式冲突,删除app.js 下的 v2
详细的操作步骤,大家可以参考Vant官方提供的快速上手教程:
使用
安装完Vant组件库之后,可以在app.json的usingComponents节点中引入需要的组件,即可在wxml中
直接使用组件。示例代码如下:
// app.json
"usingComponents":{
"van-button":"@vant/weapp/button/index"
}
//页面的.wxml结构
<van-button type="primary">按钮</van-button>
CSS变量
Vant Weapp使用CSS变量来实现定制主题。关于CSS变量的基本用法,请参考MDN文档
用vscode来写个例子:
<!--vsprojects\mp_05\test\01.html-->
<style>
/*这里使用html,是说网页根节点下所有地方都能引用该变量,也可以使用特定class定义范围*/
html{
/*定义CSS变量*/
--main-color:#C00000;
}
.box1, .box2{
/*background-color:#C00000;*/
background-color:var(--main-color);
}
.box3{
/*color:#C00000;*/
color:var(--main-color);
}
</style>
回到我们的微信小工具,可以参考定制主题 - Vant Weapp (youzan.github.io)获取相应的css变量
/*app.wxss*/
/*小工具的根节点是page,类比html节点*/
page{
/*定制警告按钮的背景颜色和边框颜色*/
--button-danger-background-color:#C00000;
--button-danger-border-color:#D60000:
}
3. npm-API Promise化
基于回调函数的异步API的缺点:
-
默认情况下,小程序官方提供的异步AP!都是基于回调函数实现的,例如,网络请求的AP!需要按照如下的方
式调用:wx.request({ method:'', url:'', data:{}, success:()=>{},//请求成功的回调函数 fa11:()=>{},//请求失败的回调函数 complete:()=>{}//请求完成的回调函数 })
-
缺点:容易造成回调地狱的问题,代码的可读性、维护性差!
API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步APl,从而提高代码的可读性、维护性,避免回调地狱的问题。
实现
在小程序中,实现API Promise化主要依赖于miniprogram-api-promise
这个第三方的npm包。它的安装
和使用步骤如下:
# 建议指定版本号
npm install --save miniprogram-api-promise@1.0.4
安装后,先把项目目录下的miniprogram_npm
目录删除掉,再通过小工具中工具->构建npm去配置
// 在小程序入口文件中(app.js),只需调用一次promisifyAll()方法,
// 即可实现异步API的Promise化
// 使用es6按需导入
import promisifyAll from 'miniprogram-api-promise'
// 定义个空白对象,并赋值给了wx的自定义属性p
const wxp wx.p ={}
// promisify all wx's api
promisifyAll(wx,wxp)
调用promise化后的异步API
//页面的 wxml 结构
<van-button type="danger"bindtap="getInfo">vant</van-button>
//在页面的 js 文件中,定义对应的tap事件处理函数
async getInfo(){
// 把服务器data属性重命名为res
const {data:res } = await wx.p.request({
method:'GET',
url:'https://www.escook.cn/api/get',
data:name:'zs',age:20
})
console.log(res)
},
4. 全局数据共享
全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有:VueX、Redux、MobX
等。
在小程序中,可使用mobx-miniprogram
配合mobx-miniprogram-bindings
实现全局数据共享。其中:
- mobx-miniprogram用来创建Store实例对象
- mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用
安装
在项目中运行如下的命令,安装MobX相关的包:
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意:MobX相关的包安装完毕之后,记得删除miniprogram_npm目录后,重新构建npm。
下面以store.js为例说明下用法:
创建store
// store\store.js
// es6按需导入action,observalbe 方法
import { action, observable } from 'mobx-miniprogram'
// es6按需导出 store 方法
export const store = observable({
// 数据字段
numA: 1,
numB: 2,
//计算属性
get sum() {
return this.numA + this.numB
},
// actions 方法,用来修改store 找那个的数据
updateNum1: action(function (step) {
this.numA += step
}),
updateNum2: action(function (step) {
this.numA += step
})
})
绑定store的成员
// pages/message/message.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
// 绑定store的成员到当前页面
onLoad(options) {
this.storeBindings = createStoreBindings(this,{
store,
fields:['numA','numB','sum'],
actions:['updateNum1']
})
},
onUnload() {
this.storeBindings.destroyStoreBindins()
},
})
在页面中使用store中的成员
// pages/message/message.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
data: {
},
btnHandler1(e){
console.log(e)
this.updateNum1(e.target.dataset.step)
},
// 将store的成员绑定到当前页面
onLoad(options) {
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA', 'numB', 'sum'],
actions: ['updateNum1']
})
},
onUnload() {
this.storeBindings.destroyStoreBindins()
},
})
<!--pages/message/message.wxml-->
<view>{{numA}}+{{numB}}={{sum}}</view>
<!-- 通过data-step给按钮step绑定数据 -->
<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>
注:上面代码中 data-step
可以参考基础组件 | 微信开放文档 (qq.com)中的公共属性data-*
将store中的成员绑定到组件中文章来源:https://www.toymoban.com/news/detail-616074.html
// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
// 通过 storeBindingsBehavior 实现与组件的绑定
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
// 指定要绑定的字段数据
fields: {
numA: ()=>store.numA, // 绑定字段第1种方式
numB: (store)=>store.numB, // 绑定字段第2种方式
sum: 'sum', // 绑定字段第3种方式
},
// 指定要绑定的方法
actions: {
updateNum2: 'updateNum2'
}
},
})
在组件中使用store中的成员文章来源地址https://www.toymoban.com/news/detail-616074.html
<!--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>
// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: {
// 组件自定义的名字 :'store中定义的成员'
numA: () => store.numA,
numB: (store) => store.numA,
sum: 'sum',
},
actions: {
updateNum2: 'updateNum2'
}
},
methods: {
btnHandler2(e) {
console.log(e)
this.updateNum2(e.target.dataset.step)
}
}
})
到了这里,关于微信小程序使用npm包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!