背景:uniapp开发的小程序中使用web-view引入H5页面,这个H5也是uniapp开发 需求:(1)增加一个解读报告按钮,仅可以上下拖拽(2)点击后携带参数跳转到小程序页面
错误实践:
首先想到的是使用cover-view来写这个解读报告按钮,有两种局限性:
cover-view覆盖在原生组件上的文本视图
1、安卓手机touch事件没触发(目前没找到解决方案)
2、cover-view中不能包含其他元素,所以uniapp中的
movable-area和movable-view用不了
解决方案:
1、在uniapp的h5中写拖拽,使用movable-area和movable-view,
2、uniapp中点击按钮跳转到小程序(参考官方文档uniapp.dcloud.net.cn/component/w…
index.html中加入如下代码:放到body下面
<script type="text/javascript" src="./static/uni-webview-js.js"></script>
<script type="text/javascript" type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。注意uni sdk放到body下面
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
</script>
<movable-area v-if="pdfSrc">
<movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease" @click="freeInterpretation">
<view class="dragOuter">
<view>解读</view>
<view>报告</view>
</view>
</movable-view>
</movable-area>
freeInterpretation(){
uni.webView.navigateTo({
url: '/packageD/advanceReport/advanceReport?res_id='+this.options.res_id
});
},
还有一种想法,给cover-view外层的view标签添加touch事件,还没去尝试
附:原生h5跳转uniapp小程序解决方案
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script type="text/javascript" type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。注意uni sdk放到body下面
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
let editData = {
account:'',
sex:'男',
age:'2019-09-09',
cultural:'大专',
seniority:'',//工龄
is_agree:'',//是否同意知情同意书
}
document.querySelector('.editImg').addEventListener('click', function(evt) {
// editStatus==1代表修改个人信息 editData个人信息数据
uni.navigateTo({
url: '/subPackages/replyTo/freeMineReal?editStatus=1?editData='+JSON.stringify(editData)
});
})
});
</script>