处理uni-app编译APP-PLUS 引入浙里办扫码登录（例子）
- 效果图展示
- h5 引入通讯方式
- app 引入通讯方式 使用plus.webview操作
- 尝试过的其他方法（renderjs 未成功)
效果图展示
最近工作安排用uniapp开发App项目，涉及到多种登录方法。由于uni-app除H5外 均不支持document、window等浏览器的js API，所以扫码成功之后，监听消息通知返回事件window.addEventListener(‘message’, function(event) {}） 无法在App中直接使用。
h5 引入通讯方式
vue页面代码
//使用的是iframe 标签
<iframe id="myframe" style="border: none" :src="浙政钉二维码地址" height="330">
</iframe>
//使用的是web-view标签
<web-view id="myframe" style="border: none" :src="浙政钉二维码地址" height="330">
</web-view>
onLoad(option) {
// #ifdef H5
this.ewmListener()
// #endif
},
methods: {
ewmListener() { //扫码返回的数据
window.addEventListener('message', function(event) {
// 这里的event.data 就是登录成功的信息
console.log(event, 'data')
})
}
}
app 引入通讯方式 使用plus.webview操作
由于uni-app除H5外 均不支持document、window等浏览器的js API，App无法监听消息通知返回事件window.addEventListener(‘message’, function(event) {}）
尝试过很多方法 目前找到的方式就是 写个html页面通过webview把页面嵌套进去，html页面写入监听事件，通过uni.postMessage 把消息参数传到vue页面中，vue页面写入plus.globalEvent.addEventListener(‘plusMessage’) 就可以接收到html页面传递过来的参数。
阅读官方文档 uniapp 关于 webView标签介绍
data() {
return {
wv:null,
}
}
methods: {
// 渲染webview页面
init(){
let _this=this
// App打开本地verify页面（uni-app本地html存放在根目录/hybrid/html中）
if (_this.wv) {
return _this.wv.show()
}
// #ifdef APP-PLUS
// 设置 webview样式
//App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下
_this.wv = plus.webview.create('/hybrid/html/zzdScanCodes.html', '' , { top:'100px' ,bottom：'200px' ,height:330,with:'400px',background:'transparent',mask: 'none'})
var currentWebview = _this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
currentWebview.append(_this.wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
//重点: 监听子页面uni.postMessage返回的值
plus.globalEvent.addEventListener('plusMessage', function(msg){
const result = msg.data.args.data
if(result.name == 'postMessage'){
console.log('app接收到消息为:'+JSON.stringify(result .arg));
}
});
// #endif
},
}
本地页面存放的位置是固定的 必须 放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下，其他的文件路径地址是读取不到页面的！！
<body style="overflow: hidden;">
<iframe
id="myframe"
style="border: none;"
src="浙里办二维码地址"
height="330"
></iframe>
<!-- uni 的 SDK -->
<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script>
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
var wv = plus.webview.currentWebview()
//监听扫码结果
window.addEventListener('message', function(event) {
// 这里的event.data 就是登录成功的信息
if (event.data && event.data.code) {
uni.postMessage({
data:event.data
})
}
})
})
</script>
</body>
尝试过的其他方法（renderjs 未成功)
监听消息方法中是不能用的 this.$ownerInstance会报undefined ！！！！！
网上说this.$ownerInstance.callMethod方法必须通过点击事件执行
<script module="test" lang="renderjs">
export default {
data(){
return {
info:null
}
},
mounted() {
window.addEventListener('message',(event)=>{
console.log(event)
var loc = event.data;
if(loc && loc.mounted == 'locationPicker'){
this.$ownerInstance.callMethod('receiveRenderData', this.loc)
}
})
}
}
</script>
<script>
export default {
data(){
return {
info:null
}
},
methods() {
receiveRenderData(val){
console.log(val)//renderjs返回的值
}
}
}
</script>
但 要是处理 uniapp中使用不了window对象问题可以试试使用renderjs
主要服务于APP，因为uni-app为vue+js+html进行编写，整个是h5的技术栈。而app上并没有document等基础对象。那么，涉及到这些的前端类库就无法使用，例如html2、canvas、canvas2、image。这是用就出现了renderjs这种视图层工具来进行渲染。运行在视图层的js。
注意：1.在renderjs层不能使用uni或其他框架的API，例如uni.request、uni.getlocation等等方法，需在原生层调用后触发监听将数据传入。
2.在APP端renderjs层的data与原生层的data互不相干
3.this.$ownerInstance.callMethod方法必须通过点击事件执行
详细可查看 uniapp 官网 renderjs
