mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案

wx这个对象我们可以结合router和vux封装一下其中的navigateTo，redirectTo等路由及模态框和toast，并在webpack.base.conf配置wx指向该文件,这样我们就能直接使用wx这个对象面的方法不用修改

/*webpack.base.conf*/

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

'wx': resolve('src/utils/wxSimulate.js')

}

},

/*模拟wx的自己写的wxsimilate.js*/

import router from '../router'

import Vue from 'vue'

import { ConfirmPlugin, ToastPlugin } from 'vux'

Vue.use(ConfirmPlugin)

Vue.use(ToastPlugin)

const wx = {

navigateTo ({ url }) {

console.log(url)

router.push({ path: url })

},

redirectTo ({url}) {

router.replace({ path: url })

},

navigateBack () {

router.go(-1)

},

showToast ({title}) {

Vue.$vux.toast.show({

// 组件除show外的属性

text: title

})

},

// 模态框显示

showModal ({title, content, success}) {

Vue.$vux.confirm.show({

title,

content,

// 组件除show外的属性

onConfirm () {

success && success({confirm: true, cancel: false})

},

onCancel () {

success && success({confirm: false, cancel: true})

}

})

}

}

window.wx = wx

export default wx