排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
分类:
移动开发
官方文档:
https://ask.dcloud.net.cn/article/35083
第一步:在webview加载的页面引入Js
<!-- uni 的 SDK,必须引用。 --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
还有一个微信小程序的,如果不考虑微信小程序,则无需引入微信的 JS-SDK。
第二步:注意调用时机
在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() { uni.getEnv(function(res) { console.log('当前环境:' + JSON.stringify(res)); }); });
第三步:实际调用
支持调用所有的 uni 路由方法,可以实现从 HTML 重新跳转回应用内的页面。
在 UniAppJSBridgeReady 后,调用路由方法跳转到应用内的页面。
官方例子:
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'); if(action === 'navigateTo') { uni.navigateTo({ url: '/pages/component/button/button' }); } } }); });
自己使用,需要传参:
//uniappwebview跳转到app内部页面 document.addEventListener('UniAppJSBridgeReady', function () { document.querySelector('.jump-uniapp').addEventListener('click', function (evt) { var target = evt.target; var articleId = target.getAttribute('articleId'); var userName = target.getAttribute('userName'); //if (target.tagName === 'BUTTON') { //var action = target.getAttribute('data-action'); //if (action === 'navigateTo') { uni.navigateTo({ url: '/pages/details/articleDetailWebView?id=' + articleId + "&userName=" + userName }); //} //} }); });
参数就用自定义属于绑定好即可,然后使用target.getAttribute('xx')这种方式获取即可。一次成功!
欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739
评价