全局 API
全局对象 Mpx
@mpxjs/core
默认导出 mpx 全局实例对象,通过该实例对象我们可以访问部分应用实例 API
mixin
全局注入mixin方法接收两个参数:mpx.mixin(mixins, options)
- 第一个参数是要混入的mixins,接收类型
MixinObject|MixinObject[]
- 第二个参数是为全局混入配置,形如
{types:string|string[], stage:number}
,其中types
用于控制mixin注入的范围,可选值有'app'|'page'|'component'
;stage
用于控制注入mixin的插入顺序,当stage为负数时,注入的mixin会被插入到构造函数配置中的options.mixins
之前,数值越小约靠前,反之当stage为正数时,注入的mixin会被插入到options.mixins
之后,数值越大越靠后。
所有mixin中生命周期的执行均先于构造函数配置中直接声明的生命周期,mixin之间的执行顺序则遵从于其在
options.mixins
数组中的顺序
options的默认值为
{types: ['app','page','component'], stage: -1}
,不传stage时,全局注入mixin的声明周期默认在options.mixins
之前执行
import mpx from '@mpxjs/core'
// 只在page中混入
mpx.mixin({
methods: {
getData: function(){}
}
}, {
types:'page'
})
// 默认混入,在app|page|component中都会混入
mpx.mixin([
{
methods: {
getData: function(){}
}
},
{
methods: {
setData: function(){}
}
}
])
// 只在component中混入,且执行顺序在options.mixins之后
mpx.mixin({
attached() {
console.log('com attached')
}
}, {
types: 'component',
stage: 100
})
injectMixins
该方法是 mpx.mixin
方法的别名,mpx.injectMixins({})
等同于 mpx.mixin({})
observable
function observable(options: object): Mpx
用于创建响应式数据。
import mpx from '@mpxjs/core'
// 直接通过 mpx 对象访问
const b = mpx.observable(object)
- 注意: Mpx 2.8 版本后该 API 等同于
reactive
,同时不再支持具名导出方式,建议直接使用reactive
替代,请点击查看。
set
用于对一个响应式对象新增属性,会触发订阅者更新操作
。查看详情
delete
function delete(target: Object, key: string | number): void
用于对一个响应式对象删除属性,会触发订阅者更新操作
import mpx, { reactive } from '@mpxjs/core'
const person = reactive({name: 1})
mpx.delete(person, 'age')
- 注意:
mpx.delete
也可以使用具名导出的del
。查看详情
use
用于安装外部扩展, 支持多参数 方法接收两个参数:mpx.use(plugin, options)
- 第一个参数是要安装的外部扩展
- 第二个参数是对象,如果第二个参数是一个包含(prefix or postfix)的option, 那么将会对插件扩展的属性添加前缀或后缀
import mpx from '@mpxjs/core'
import test from './test'
mpx.use(test)
mpx.use(test, {prefix: 'mpx'}, 'otherparams')
watch
watch 可以通过全局实例访问,也可以使用具名导出的方式,二者逻辑相同,我们推荐使用具名导出的方式。查看详情
createApp
注册一个小程序,接受一个 Object 类型的参数
import {createApp} from '@mpxjs/core'
createApp({
onLaunch () {
console.log('Launch')
},
onShow () {
console.log('Page show')
},
//全局变量 可通过getApp()访问
globalDataA: 'I am global dataA',
globalDataB: 'I am global dataB'
})
// 或者
createApp(options)
createPage
类微信小程序(微信、百度、头条等)内部使用Component的方式创建页面,所以除了支持页面的生命周期之外还同时支持组件的一切特性。当使用 Component 创建页面时,页面生命周期需要写在 methods 内部(微信小程序原生规则),mpx 进行了统一封装转换,页面生命周期都写在最外层即可
function createPage(options: object, config?: object): void
options:
具体形式除了 computed、watch 这类 Mpx 扩展特性之外,其他的属性都参照原生小程序的官方文档即可。
config:
如果希望标识一个组件是最纯粹的原生组件,不用数据响应等能力,可通过 config.isNative 传 true 声明。 如果有需要复写/改写最终调用的创建页面的构造器,可以通过 config 对象的 customCtor 提供。
- 注意: mpx本身是用 component 来创建页面的,如果传page可能在初始化时候生命周期不正常导致取props有一点问题
import {createPage} from '@mpxjs/core'
createPage({
data: {test: 1},
computed: {
test2 () {
return this.test + 1
}
},
watch: {
test (val, old) {
console.log(val, old)
}
},
onShow () {
this.test++
}
})
createComponent
创建自定义组件,接受两个Object类型的参数。
function createComponent(options: object, config?: object): void
import {createComponent} from '@mpxjs/core'
createComponent({
properties: {
prop: {
type: Number,
value: 10
}
},
data: {test: 1},
computed: {
test2 () {
return this.test + this.prop
}
},
watch: {
test (val, old) {
console.log(val, old)
},
prop: {
handler (val, old) {
console.log(val, old)
},
immediate: true // 是否首次执行一次
}
}
})
nextTick
function nextTick(callback: Function): void
当我们在 Mpx 中更改响应性状态时,最终页面的更新并不是同步立即生效的,而是由 Mpx 将它们缓存在一个队列中, 等到下一个 tick 一起执行, 从而保证了组件/页面无论发生多少状态改变,都仅执行一次更新,从而减少 setData
调用次数。
nextTick()
可以在状态改变后立即调用,可以传递一个函数作为参数,在等待页面/组件更新完成后,函数参数会触发执行。
import {createComponent, nextTick, ref} from '@mpxjs/core'
createComponent({
setup (props, context) {
const showChild = ref(false)
// DOM 还没有更新
setTimeOut(() => {
showChild.value = true
}, 2000)
nextTick(function() {
context.refs['child'].showToast()
})
return {
showChild
}
}
})
toPureObject
function toPureObject(options: object): object
业务拿到的数据可能是响应式数据实例(包含了些其他属性),使用toPureObject
方法可以将响应式的数据转化成纯 js 对象。
import {toPureObject} from '@mpxjs/core'
const pureObject = toPureObject(object)
getMixin
专为ts项目提供的反向推导辅助方法,该函数接收类型为 Object
,会将传入的嵌套mixins对象拉平成一个扁平的mixin对象
import { createComponent, getMixin} from '@mpxjs/core'
// 使用mixins,需要对每一个mixin子项进行getMixin辅助函数包裹,支持嵌套mixin
const mixin = getMixin({
mixins: [getMixin({
data: {
value1: 2
},
lifetimes: {
attached () {
console.log(this.value1, 'attached')
}
},
mixins: [getMixin({
data: {
value2: 6
},
created () {
console.log(this.value1 + this.value2 + this.outsideVal)
}
})]
})]
})
/*
mixin值
{
data: {value2: 6, value1: 2},
created: ƒ created(),
attached: ƒ attached()
}
*/
createComponent({
data: {
outsideVal: 20
},
mixins: [mixin]
})
/*
以上执行输出:
28
2 "attached"
*/
implement
function implement(name: string, options: object): object
{Object} options
{Array} modes
:需要取消的平台{Boolean} remove
:是否将此能力直接移除{Function} processor
:设置成功的回调函数
以微信为 base 将代码转换输出到其他平台时(如支付宝、web 平台等),会存在一些无法进行模拟的跨平台差异,会在运行时进行检测并报错指出,例如微信转支付宝时使用 moved 生命周期等。使用implement
方法可以取消这种报错。您可以使用 mixin 自行实现跨平台差异,然后使用 implement 取消报错。
import {implement} from '@mpxjs/core'
if (__mpx_mode__ === 'web') {
const processor = () => {
}
implement('onShareAppMessage', {
modes: ['web'], // 需要取消的平台,可配置多个
remove: true, // 是否将此能力直接移除
processor // 设置成功的回调函数
})
}
内建生命周期变量
Mpx 在运行时自身有着一套内建生命周期,当开发者想使用内建生命周期时,可以通过内建生命周期变量进行对应生命周期的注册, 需要注意的是,这部分内建生命周期变量只能用于选项式 API 中。
BEFORECREATE
string
在组件实例刚刚被创建时执行,在实例初始化之后、进行数据侦听和 data 初始化之前同步调用,注意此时不能调用 setData。
import {createComponent, BEFORECREATE} from "@mpxjs/core"
createComponent({
[BEFORECREATE]() {
console.log('beforecreate trigger')
}
})
CREATED
string
在组件实例刚刚被创建时执行。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、事件/侦听器的回调函数。 然而,挂载阶段还没开始,注意此时不能调用 setData。
import {createComponent, CREATED} from "@mpxjs/core"
createComponent({
[CREATED]() {
console.log('beforecreate trigger')
}
})
BEFOREMOUNT
选项式 API 中使用,作用同onBeforeMount
MOUNTED
选项式 API 中使用,作用同onMounted
BEFOREUPDATE
选项式 API 中使用,作用同onBeforeUpdate
UPDATED
选项式 API 中使用,作用同onUpdated
SERVERPREFETCH
选项式 API 中使用,作用同onServerPrefetch
BEFOREUNMOUNT
选项式 API 中使用,作用同onBeforeUnmount
UNMOUNTED
选项式 API 中使用,作用同onUnmounted
ONLOAD
选项式 API 中使用,作用同onLoad
ONSHOW
选项式 API 中使用,作用同onShow
ONHIDE
选项式 API 中使用,作用同onHide
ONRESIZE
选项式 API 中使用,作用同onResize
响应式 API
详情请移步
组合式 API
详情请移步
store API
详情请移步