在PHP中可以使用内置函数rand()、mt_rand()来随机生成一个数
php数组中增加元素的方法：1、使用array_unshift()函数，向数组头插入新元素；2、使用array_push()函数，向数组末尾插入一个或多个新元素；3、使用array_splice()函数，向数组任意位置插入新元素。
引入的H5文件
这个H5的例子官方是已经有了的,需要注意的就是引入的uni.webview.1.5.4.js
引入外部cdn(https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.4.js) 会失效，所以需要将js下载下来,进行本地引入
H5的源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="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;
}
</style>
</head>
<body>
<p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
<div class="mui-content">
<div id="div1"></div>
</div>
<input type="file" capture='camera' accept='image/*'>
<div class="btn-list">
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
<button class="btn" type="button" data-action="switchTab">switchTab</button>
</div>
<p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
<div class="btn-list">
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
<!-- uni 的 SDK -->
<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
<script type="text/javascript" src="uni.js"></script>
<script type="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/API/API'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
default:
uni[action]({
url: '/pages/component/button/button'
});
break;
}
}
});
document.querySelector("#postMessage").addEventListener('click', function() {
uni.postMessage({
data: {
action: 'message'
}
});
})
});
function ajaxRequest(a){
alert('接收到的参数: ', a);
}
</script>
</body>
</html>H5 发送数据到 uniapp
- H5使用uni.postMessage发送数据
uni.postMessage({
data: {
action: 'message'
}
});- webview使用@message进行监听
<template>
<view>
<web-view ref='webview' src="/hybrid/html/local.html" @message="handleMessage" ></web-view>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
}
}
};
</script>H5页面的postMessage就是向uniapp发送消息
$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)
uniapp 发送数据到 H5
百度上大部分的答案都是 通过url就可以向H5进行传参，这种当然也可以,在H5中,再去获取url中的参数值,但是这种方法只能用在第一次
接下来后续应该怎么传递参数呢
在PHP中可以使用内置函数rand()、mt_rand()来随机生成一个数
因为百度到的都是this.$mp.page.$getAppWebview()这样的方法
但是 uniapp编译app时使用的都是webview,this.$mp.page.$getAppWebview()获取的是父webview. 所以一直没有evalJS方法
需要打点.children()[0];获取到子级,才是当前的webview
const webview = this.$mp.page.$getAppWebview().children()[0];
var name = 'mike';
webview.evalJS("ajaxRequest('" + name + "')");然后使用evalJS去调用方法就行
在H5中,只要有对应的方法就可以了
function ajaxRequest(a){
alert('接收到的参数: ', a);
}获取当前的webview,也可以使用下面这种方法
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var webview = page.$getAppWebview(); //页面栈最顶层就是当前webview2.H5端接受值
console.log(getQuery('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;
}本文来自转载，文章内容不代表随笔博客立场。
原文链接：uniapp与webview之间的相互传值
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
原文链接：uniapp与webview之间的相互传值
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 
