108 lines
2.7 KiB
Markdown
108 lines
2.7 KiB
Markdown
# zp-mixins
|
||
本插件，基本无法单独使用。
|
||
|
||
为方便miniprogram-to-uniapp(小程序转uniapp项目)工具后续升级，特单独摘出做成插件，便于后续更新。
|
||
|
||
|
||
注意：
|
||
|
||
1.本插件仅限于miniprogram-to-uniapp(小程序转uni-app项目)转换工具使用，
|
||
|
||
2.如果是新项目或uni-app项目，建议还是使用vue/uni-app它自身支持的方式实现，效率更高些。
|
||
|
||
3.目前仅支持vue2/vue3的options写法。至于setup，因其天生弱化mixin，也无this，建议直接import导入按需使用吧~
|
||
|
||
# 安装
|
||
|
||
点击右侧 “使用 HBuilderX 导入插件” 按钮，并选择对应项目。
|
||
|
||
# 使用
|
||
|
||
在main.js文件里面增加引用，即可全局使用这些函数，如下所示：
|
||
|
||
|
||
```
|
||
import App from './App'
|
||
|
||
// 添加zpMixins
|
||
import zpMixins from '@/uni_modules/zp-mixins/index.js'
|
||
|
||
// #ifndef VUE3
|
||
import Vue from 'vue'
|
||
|
||
Vue.use(zpMixins)
|
||
|
||
Vue.config.productionTip = false
|
||
App.mpType = 'app'
|
||
const app = new Vue({
|
||
...App
|
||
})
|
||
app.$mount()
|
||
// #endif
|
||
|
||
// #ifdef VUE3
|
||
import { createSSRApp } from 'vue'
|
||
export function createApp() {
|
||
const app = createSSRApp(App)
|
||
app.mixin(zpMixins)
|
||
return {
|
||
app
|
||
}
|
||
}
|
||
// #endif
|
||
```
|
||
|
||
注意：vue3项目仅支持Options API方式(setup API写法有点不同，不支持这种方式使用，建议直接通过import引入使用)。
|
||
|
||
# 功能介绍
|
||
|
||
## pageLifetimes(组件所在页面的生命周期)
|
||
处理组件里的pageLifetimes
|
||
|
||
## clone(深拷贝)
|
||
深拷贝的简单版本，未处理循环引用。
|
||
|
||
## handleDataset
|
||
用于处理dataset
|
||
|
||
在自定义组件的事件里，是获取不到e.currentTarget.dataset的
|
||
|
||
因此收集data-参数，手动传进去
|
||
|
||
## html2Escape 普通字符转换成转义符
|
||
用于替换wxParse为mp-html时使用
|
||
|
||
## escape2Html 转义符换成普通字符
|
||
暂未用上
|
||
|
||
## parseEventDynamicCode
|
||
解析事件里的动态函数名，这种没有()的函数名，在uniapp不被执行
|
||
|
||
比如：<view bindtap="{{openId==undefined?'denglu':'hy_to'}}">立即</view>
|
||
|
||
## getTabBar
|
||
实现小程序自定义组件的this.getTabBar().setData()函数
|
||
|
||
## getRelationNodes
|
||
获取组件间关系this.getRelationNodes()
|
||
|
||
注意：
|
||
|
||
1.须与p-f-unicom配合使用！
|
||
|
||
2.并不能与小程序的getRelationNodes相提并论，因为底层实现不一样
|
||
|
||
## selectComponent
|
||
## selectAllComponents
|
||
抹平各平台差异，实现类似于小程序的selectComponent和selectAllComponents函数。
|
||
|
||
使用方式与小程序一致。
|
||
|
||
注：新项目建议还是使用ref这种方式，获取组件实例。
|
||
|
||
## setData
|
||
1.实现setData函数，让uni-app也能支持使用setData函数。
|
||
2.实现微信“简易双向绑定”
|
||
|
||
注意：本函数仅为小程序转换uniapp项目所作的支撑，如uni-app项目里，最好还是使用this.xx这种方式。
|