uniapp webview通信

更新日期: 2022-10-27阅读: 1.4k标签: uniapp

从webview页面传值到uniapp中

官方文档已经很详细了,这里给大家上我的实战代码,首先在webview页面中引入相关依赖:

<!-- uniapp各平台依赖 -->
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

然后通过uni.postMessage向uniapp传值:

document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'message'
}
});

uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});

在uniapp中监听message:

<template lang="pug">
view
web-view.webview(:src="url" @message="getMessage")
</template>

<script>
export default {
data() {
return {
url: "https://www.fly63.com?data=123",
}
},
methods: {
getMessage(event) {
let data = event.detail.data
console.log(data);
}
}
}
</script>

<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>


从uniapp中动态传值到webview页面

按照官方文档,从uniapp传值到webview中,只能通过query:

<template lang="pug">
view
<!-- #ifdef APP-PLUS -->
web-view.webview(:src="url")
<!-- #endif -->
</template>

<script>
export default {
data() {
return {
url: "https://www.fly63.com?data=123",
}
}
}
</script>

<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>

在webview中解析query:

let data = getQuery('data')
console.log(data); // 获取 uni-app 传来的值

// 取url中的参数值
function getQuery(name) {
// 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}

但是,我发现,通过向web-view的src中传值,只能传一次,如果参数改变了,没法动态传到webview。对于这种需要动态传递参数的需求,我们可以使用动态创建webview达到目的,而不是通过webview组件。

实现如下:

<template lang="pug">
view
</template>

<script>
export default {
data() {
return {
url: "https://www.fly63.com",
}
},
mounted() {
// #ifdef APP-PLUS
var w = plus.webview.create(this.url + '?data=good');
w.show();

setTimeout(() => {
plus.webview.close(w);
setTimeout(() => {
w = plus.webview.create(this.url + '?data=123');
w.show();
}, 1000)
}, 1000)
// #endif
}
}
</script>

以上,通过plus.webview.create创建一个webview,然后显示。如果数据更新了,可以先关闭之前的一个webview,然后重新创建一个,再显示。

也可以直接使用open刷新页面:

// #ifdef APP-PLUS
var w = plus.webview.open(this.url + '?data=good');
setTimeout(() => {
w = plus.webview.open(this.url + '?data=123');
}, 1000)
// #endif

相关api

// 创建窗口
WebviewObject plus.webview.create( url, id, styles, extras );

// 创建并打开窗口
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

// 显示窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

// 隐藏窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras );

// 关闭窗口
void plus.webview.close( id_wvobj, aniClose, duration, extras );


调用webview中的方法

动态传值还有一种解决方案,就是通过evalJs方法直接调用webview中方法。具体实现如下:

在模板中,通过ref暴露web-view元素:

<template lang="pug">
web-view(:src="url" ref="wb")
</template>

在mounted生命周期的时候获取此元素:

// #ifdef APP-PLUS
this.wb = this.$refs.wb
// #endif

在需要调用webview中方法的时候使用evalJs:

// #ifdef APP-PLUS
this.wb.evalJs(`showAlert(${this.num})`)
// #endif

在webview页面定义对应的方法即可:

function showAlert(num) {
alert(num)
}

从uniapp动态传值,可以使用这种方式。

注意:

在nvue中,只有通过ref暴露webview节点才能拿到webview本身
注意evalJs的拼写方式,官方文档是evalJS,但通过ref获取时,S应该为小写


链接: https://www.fly63.com/article/detial/12224

uni-app 微信小程序授权登录

uni.getUserInfo 接口调用方式起初通过button 来获取用户信息,或者 直接调用 uni.getUserInfo 来获取信息 在当前微信更新接口后,这2个接口将直接返回匿名用户数据,不在弹窗提示

uniapp之this作用域

发现了点击按钮1可以更新title内容,但是点击按钮2却无法更新title内容。这个究竟是为什么呢?在changeTitle2方法的success方法中,该success方法指向闭包,所以this属于闭包

uniapp 页面跳转传值和接收

首先介绍最原始的跳转方法,类似于html中的 a 标签,不过在uniapp中需要将 a 标签换成 <navigator url=跳转的地址>……</navigator>

uniapp开发注意事项

static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。css、less/scss 等资源同样不要放在 static 目录下

uniapp验证码倒计时60s的实现

发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;

uni-app中使用computed计算属性

computed里面的属性不能在data属性中出现,用来监控computed中自定义的变量 ,computed合适多个变量或对象处理后返回一个结果值,其中一个值发生变化则computed监控的属性值就会发生变化

uni-app开发经验分享: 多页面传值的三种解决方法

开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家:问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新

uni-app开发注意事项

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关

uniapp页面通信方法总汇

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

uniapp/小程序实现Url生成二维码图片

基于QR.createQrCodeImg方法生成二维码,在使用uniapp开发的小程序,app应用,某一页面需要将网页Url生成的二维码进行展示,即将Url生成为base64的二维码图片。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!