vue|微信小程序中的web-view，实现微信小程序与h5页面间跳转 webview|小程序|javascript|uniapp

一、从小程序跳转webview
文章图片

二、从webview（h5）跳转小程序 1.先引入微信JS-SDK

/*方式一*/ const script = document.createElement('script') script.type = 'text/javascript' script.src = '/uploads/allimg/220623/0U9535C9-1.jpg' document.body.appendChild(script) /*方式二*/ ="text/javascript" src="http://img.readke.com/220623/0U9535C9-1.jpg">

由于我使用了eslint，导致报错 ‘wx’ is not defined no-undef，
解决方案：在.eslintrc.js文件中加入以下内容，就不报错了
【vue|微信小程序中的web-view，实现微信小程序与h5页面间跳转】globals: { wx: true },

文章图片

2.判断是否在小程序的webview中打开，还是在浏览器中打开，如果webview中打开显示跳转到小程序的按钮

// 跳转小程序按钮是否显示，由于我使用wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) }) //获取当前环境好像有点bug(如果有知道的小伙伴，可以评论区或者私信告诉我哦~感谢), //就采用了让小程序在跳转的时候加了一个参数intoType = webview,如果有此参数就显示，否则不显示 showWebView() { var ua = navigator.userAgent.toLowerCase() if ( ua.match(/MicroMessenger/i) && ua.match(/MicroMessenger/i).toString() === 'micromessenger' && this.getUrlParam('intoType') && this.getUrlParam('intoType') === 'webview' ) { // ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器） this.isShowWebView = true return false // wx.miniProgram.getEnv(res => { //if (res.miniprogram) { //this.isShowWebView = true //alert('在小程序里') //return false //} else { //this.isShowWebView = false //alert('不在小程序里') //return false //} // }) } else { this.isShowWebView = false return false } },

3.this.getUrlParam(‘intoType’) 方法

// h5页面获取小程序传参 getUrlParam(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') var r = window.location.search.substr(1).match(reg) if (r != null) return unescape(r[2]) return null }

4.点击跳转

// webview 跳转小程序 backWebView() { const script = document.createElement('script') script.type = 'text/javascript' script.src = '/uploads/allimg/220623/0U9535C9-1.jpg' document.body.appendChild(script) wx.miniProgram.reLaunch({ url: '/pages/agent/goods/list/index', success: function () { console.log('success') }, fail: function () { console.log('fail') } }) },