uniapp 使用webview
返回的数据：{
"type": "message",
"target": {},
"currentTarget": {},
"timeStamp": 1593413171731,
"detail": {
"data": [{
"action": "message",
"id": "2020",
"type": "copy"
}]
}
}{
"action": "message",
"id": "2020",
"type": "copy"
}
>
var wv;
//计划创建的webview
export default {data() {
return {
webviewStyles: {
progress: {
color: '#3e3adc'
}
},
url:'',
}
},
onLoad() {
console.log('x')
// http://api.chexiang365.net/activety/test.html?ext_code=11111
// this.url='http://api.chexiang365.net/activety/test.html?ext_code=2020ax'
var u_id = this.$userFind.u_id
console.log(u_id)
// return
// var data = https://www.it610.com/article/btoa(btoa(u_id))var data_old = this.$myApi.base64_encode_api(u_id)
var data = this.$myApi.base64_encode_api(data_old)
// console.log(data_new)
const url ='http://myphpmy.vip/web/demo.html'// const url = 'file:///C:/Users/deng/Desktop/wwwa/demo.html'
// const url = 'http://192.168.5.56:8080/#/h5/invit/'+data
// const url = 'https://api.chexiang365.net/#/h5/invitInput/'+dataconsole.log(url)
this.url = url},
onShow(){
},
methods:{
onPostMessage(){
console.log('xxxonPostMessage')
},
demo(){
console.log('xxxxxxxxxx')
},
message(event){
console.log('触发事件')
const data = https://www.it610.com/article/event.detail.data[0]
console.log(data)
console.log('___________')
const action = data.action
console.log(action)
console.log('messagemessagemessagemessagemessage')
uni.showModal({
title: '提示',
content: data.type,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
console.log(event)
console.log('xxx')
}
}
}
>
H5：
网络网页 - 锐客网
="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}.btn-red {
background-color: #dd524d;
}.btn-yellow {
background-color: #f0ad4e;
}.desc {
padding: 10px;
color: #999999;
}.post-message-section {
visibility: hidden;
}
web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。
网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。
="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('+ '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<\/script>');
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write('<\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<\/script>');
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function() {
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
switch (action) {
case 'switchTab':
uni.switchTab({
url: '/pages/tabBar/API/API'
});
break;
case 'reLaunch':
uni.reLaunch({
url: '/pages/tabBar/component/component'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
default:
uni[action]({
url: '/pages/component/button/button'
});
break;
}
}
});
document.getElementById('postMessage').addEventListener('click', function() {
uni.postMessage({
data: {
action: 'message',
id:'2020',
type:'copy'
}
});
});
});
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页，计算网页数据大小