Min
Min2.x 优化原生小程序支持 mixin、wx.api promise化、intercept 拦截器、似vue的computed、watch等
安装
- CLI工具
$ npm i -g @mindev/min-cli@2.0.0-beta.1- 基础库
$ cd ~/your_project_dir
$ npm i --save @minlib/min
$ npm i --save @minlib/minx
$ npm i --save @minlib/min-wxapi
$ npm i --save @minlib/min-async-await创建项目
注： 已有小程序项目可跳过此步骤，请前往 从 Min 1.x 迁移到 2.x 升级文档
使用
一、使用 mixin
- 定义一个 sayHello mixin 对象
// ~/mixins/sayHello.js
export default {
onShow () {
console.log('onShow in sayHello')
},
onHide () {
console.log('onHide in sayHello')
},
methods: {
sayHello (name) {
wx.showToast({
title: `say hello`
})
console.log(`${name} say hello`)
}
}
}- 在任何的 .wxp 文件里混入
// ~/pages/home/index.wxp
<template>
<!-- 省略... -->
</template>
<script>
import sayHello from './mixins/sayHello'
// min.Page 是页面构造器
// min 对象是由 min.init({global: true}) 设置可全局访问的
export default {
mixins: [sayHello],
onShow () {
this.sayHello('lingxiao')
}
}
</script>
<style>
/* 省略... */
</style>二、注册全局 Component、mixin
将公共基础组件放置全局模板内，并提供全局的mixin函数，通过 min dev 编译后让每个页面都能直接控制其组件实例
- 安装示例中用到的 MinUI 组件
$ cd ~/your_project_dir
# 安装 UI 组件
$ npm install --save @minui/wxc-loading
$ npm install --save @minui/wxc-toast- 创建 mixin
// 这里以 loading mixin 举例
// ~/mixins/loading.js
export default {
onLoad () {
console.log('init loading')
},
onShow () {
// 获取组件实例
this.$loading = this.selectComponent('#loading')
this.$toast = this.selectComponent('#toast')
},
methods: {
// 定义一个显示 loading 的 mixin 函数
showLoading () {
this.$loading.show()
},
// 定义一个隐藏 loading 的 mixin 函数
hideLoading () {
this.$loading.hide()
}
}
}- 在 app.wxa 内放置公共模板、注册全局 Component 和 mixin
// 全局模板
<template>
<view>
<!-- wxp template -->
<page></page>
<!-- global component -->
<wxc-loading id="loading"></wxc-loading>
<wxc-toast id="toast"></wxc-toast>
</view>
</template>
// app.js 逻辑 和 app.json 配置，以及包括 globalMin 配置。
<script>
import Min from '@minlib/min'
// 引用 mixin
import loading from './mixins/loading'
import toast from './mixins/toast'
// 注册全局 mixin
Min.mixin([loading, toast])
export default {
// app.json 配置
config: {
...
},
// 全局 min 配置
globalMin: {
// 经 min dev 编译后合并到每个 page.json 的配置
config: {
// 注册组件
usingComponents: {
'wxc-loading': '@minui/wxc-loading',
'wxc-toast': '@minui/wxc-toast'
}
}
},
...
}
</script>
<style>
/* 省略... */
</style>- 在任意的 .wxp 里可直接访问
经 min dev 编译后，全局 mixin 已混入到各个 .wxp 页面中
export default {
onShowLoading () {
// 调用 ~/mixins/loading.js 中的 showLoading 方法
this.showLoading() // 显示 loading
setTimeout(() => {
this.hideLoading() // 隐藏 loading
}, 2000)
},
onHideLoading () {
// 调用 ~/mixins/loading.js 中的 hideLoading 方法
this.hideLoading() // 隐藏 loading
}
}使用 async/await
- 在 app.wxa 中
// 使用 es7 的 async、await
import '@minlib/min-async-await'- 在 page.wxp 中
export default {
methods: {
async getData () {
try {
// wx.request 用 min.request 代替 ，支持promise
let data = await min.request({
url: 'http://mce.mogucdn.com/ajax/get/3?pid=104985'
})
console.log(data)
} catch (err) {
console.err('request error：', err)
}
}
}
}Minx
类 vuex 状态管理器
在 app.wxa 中
import Min from '@minlib/min'
import Minx from '@minlib/minx'// 注册插件
Min.use(Minx)// 创建一个 store
const store = new Minx.Store({
state: {
count: 1
},
mutations: {
increment (state) {
state.count++
}
}
})// 将 store 挂在 app 构造器选项中
export default {
store,
config: {...},
globalData: {...},
onLaunch () => {}
}在 page.wxp 中
import { mapState } from '@minlib/minx'
export default {
computed: {
...mapState({
count: state => state.count
})
},
methods: {
increment () {
this.$store.commit('increment')
}
}
}<template>
<view>{{count}}</view>
</template>注 更多使用姿势请参考 vuex 文档
wx.api
所有 wx.api 接口可通过 min.api 访问，并支持异步接口 promise 化
在 app.wxa 中
import '@minlib/min-async-await'
import Min from '@minlib/min'
import WxApi from '@minlib/min-wxapi'// 注册插件
Min.use(WxApi)// 创建一个WxApi
const wxApi = new WxApi({
promisify: true, // 使用 promise 化
requestfix: true, // request 请求优化
interceptors: [], // 拦截器
noPromiseAPI: []
})// 将 wxApi 挂在 app 构造器选项中
export default {
wxApi,
config: {...},
globalData: {...},
onLaunch () => {}
}在 page.wxp 中
export default {
getData1 () {
const { request } = this.$wxApi
// 返回一个 Promise
const promise = request('http://mce.mogucdn.com/ajax/get/3?pid=104985')
promise.then((data) => {
console.log(data)
})
}
async getData2 () {
const { request } = this.$wxApi
// 使用 async/await
const data = await request('http://mce.mogucdn.com/ajax/get/3?pid=104985')
console.log(data)
}
}min.intercept 拦截器格式
export default (min) => {
// Add a min.request interceptor.
min.intercept('request', {
// 发出请求前的回调函数
before (options, api) {
// 对所有request请求中的OBJECT参数对象统一附加时间戳属性
options.data = {
...(options.data || {}),
timestamp: +new Date()
}
console.log('request options: ', options)
return options
},
// 请求成功后的回调函数
success (res, options, api) {
// 可以在这里对收到的响应数据对象进行加工处理
console.log('request success: ', res)
return res
},
//请求失败后的回调函数
fail (err, options, api) {
console.log('request fail: ', err)
return err
},
// 请求完成时的回调函数(请求成功或失败都会被执行)
complete (res, options, api) {
console.log('request complete: ', res)
return res
},
})
}ChangeLog
-
2.0.0
- 支持 mixin
- 支持 全局访问 min 变量
- 支持 全局注册 Component、mixin
- 支持 min.api 接口 promise 化
- 支持 min.intercept 拦截器
- 优化 wx.request 并发次数限制
-
2.0.2
- 增加 似 vue 的 computed
- 增加 似 vue 的 watch
-
2.0.4
- 修复 data 属性可以作为一个函数
- 修复 在页面和组件上无法自定义一个方法
-
2.0.5
- 修复 app.wxa 支持自定义 method 方法，建议自定义方法放在 methods 对象里管理
- 优化 Min.mixin 支持混合多个，多个使用数组传递
- 修复 组件properties接受动态数据更新失败问题
-
2.0.6
- 修复 组件内不能使用 Behavior 问题
Tip
- min cli 2.x 版本开始支持
- 支持 wx.api promise 化，前提是依赖
@minlib/min-async-await