VUE项目打包web5+APP第三方链接跳转

项目场景：

VUE项目打包web5+APP第三方链接跳转

---

问题描述：

VUE项目打包为web5+APP，跳转第三方链接，使用手机返回键返回时，直接退出APP

原因分析：

当前项目中的返回作用的范围为route中的数据，第三方链接实则为第三方项目，所以作用不到。（自己的粗略分析！）

---

解决方案：

1. 在VUE项目中引入mui
   1）在mui官网 下载dist文件夹，将文件夹名字改为mui
   2）放入VUE项目的src/assets中
   

   3）在main.js中添加以内mui

   import mui from './assets/mui/js/mui.js'
   import './assets/mui/css/mui.css'
   
   Vue.prototype.$mui = mui
   

   

   4）在 babel.config.js 文件中添加
   ignore: [“./src/assets/mui/js/mui.js”]

     ignore: ["./src/assets/mui/js/mui.js"]
   

   

   注意！
   如果出现了报错“Uncaught ReferenceError: mui is not defined”
   解决方法！
   在mui.js的源文件后最后加上 window.mui = mui;

   window.mui = mui;
   

2. 在需要进行第三方跳转的页面使用openWindow进行操作

   <template>
     	<div>
   		<div style="text-decoration:none" @click="toLink(link)">这是一个串文字</div>
   	</div>
   </template>
   
   js
   <script>
   	export default {
   		data() {
   			return {
   				openWebView: false
   			};
   		},
   		mounted() {
   			let _this = this
   			mui.init({
   				beforeback: function() {
   					if (_this.openWebView) {
   						//获得列表界面的webview jmyc
   						var viewObj = plus.webview.getWebviewById('jmyc')
   						//canBack查询窗口是否可退
   						viewObj.canBack((event) => {
   							var canBack = event.canBack
   							if (canBack) {//如可退，则返回上一页面
   								viewObj.back()
   							} else {//如不可退，则退出窗口
   								plus.webview.close('jmyc')
   								_this.openWebView = false
   							}
   						})
   						return false
   	          		}
   	          		return true
       			}
   			})
   		},
   		methods: {
   			toLink(url) {
   				this.openWebView = true
   				mui.openWindow({
   					url: url,
   					id: 'jmyc',
   					styles: {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
   						titleNView: {                       // 窗口的标题栏控件
   						autoBackButton: true,             //新打开的窗口是否有返回键
   						// titleText:"标题栏",                // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
   						titleColor: '#000000',             // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
   						titleSize: '17px',                 // 字体大小,默认17px
   						backgroundColor: '#F7F7F7',        // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
   						progress: {                        // 标题栏控件的进度条样式
   							color: '#00FF00',                // 进度条颜色,默认值为"#00FF00"
   							height: '2px'                    // 进度条高度,默认值为"2px"
   						},
   						splitLine: {                       // 标题栏控件的底部分割线，类似borderBottom
   							color: '#CCCCCC',                // 分割线颜色,默认值为"#CCCCCC"
   							height: '1px'                    // 分割线高度,默认值为"2px"
   						}
   					}
   				}
   			})
   		}
   	},
   }
   
   </script>
   

参考资料：

vue-打包为webapp，如何解决应用内跳转外部链接返回导致退出应用

在vuecli3中使用mui超详细教程（亲测有效）

vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”