应无所住,而生其心
排名
95
文章
2
粉丝
1
评论
0
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

uniapp中webview跳转到app内部页面

8222人阅读 2020/10/23 17:06 总访问:5185355 评论:0 收藏:0 手机
分类: 移动开发

官方文档:

https://ask.dcloud.net.cn/article/35083


第一步:在webview加载的页面引入Js

  1. <!-- uni 的 SDK,必须引用。 -->
  2. <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。

  1. document.addEventListener('UniAppJSBridgeReady'function({  
  2.     uni.getEnv(function(res{  
  3.         console.log('当前环境:' + JSON.stringify(res));  
  4.     });  
  5. });


第三步:实际调用

支持调用所有的 uni 路由方法,可以实现从 HTML 重新跳转回应用内的页面。

在 UniAppJSBridgeReady 后,调用路由方法跳转到应用内的页面。


官方例子:

  1. document.addEventListener('UniAppJSBridgeReady'function({  
  2.     document.querySelector('.btn-list').addEventListener('click'function(evt{  
  3.         var target = evt.target;  
  4.         if (target.tagName === 'BUTTON') {  
  5.             var action = target.getAttribute('data-action');  
  6.             if(action === 'navigateTo') {  
  7.                 uni.navigateTo({  
  8.                     url'/pages/component/button/button'  
  9.                 });  
  10.             }  
  11.         }  
  12.     });  
  13. });

自己使用,需要传参:

  1. //uniappwebview跳转到app内部页面
  2. document.addEventListener('UniAppJSBridgeReady'function ({
  3.     document.querySelector('.jump-uniapp').addEventListener('click'function (evt{
  4.         var target = evt.target;
  5.         var articleId = target.getAttribute('articleId');
  6.         var userName = target.getAttribute('userName');
  7.         //if (target.tagName === 'BUTTON') {
  8.             //var action = target.getAttribute('data-action');
  9.             //if (action === 'navigateTo') {
  10.                 uni.navigateTo({
  11.                     url'/pages/details/articleDetailWebView?id=' + articleId + "&userName=" + userName
  12.                 });
  13.             //}
  14.         //}
  15.     });
  16. });

参数就用自定义属于绑定好即可,然后使用target.getAttribute('xx')这种方式获取即可。一次成功!

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uniapp app开发基础

前言uniapp是基于vue.js实现的,代码实现方法不能用jQuery的思路去解决问题,基本使用template: 模板view: 视图,使用时把v...

uniapp页面跳转传递参数过长

前言页面传递参数过长如果需要传递的参数content过长,传递的时候会有问题所以使用encodeURIComponent来传递uni.navigateTo...

uniapp webview跳转到app内部页面

官方文档:https://ask.dcloud.net.cn/article/35083相关问题:https://ask.dcloud.net.cn/question/93777引入需要的Js:&lt...

uniapp返回上一级页面刷新页面

当前页面: //uniapp返回上一级页面刷新页面 let pages = getCurrentPages(); // 当前页面 let beforePage ...

uniapp uni.navigateBack无法返回

注意测试的时候,不要直接打开当前页进行测试。要从其他页面点进去在返回测试。不然你获取上一页是没有的,就会报错。

uniapp确认提示框

代码如下: uni.showModal({ title: &#39;提示&#39;, content: &#39;这是一个模态弹窗&#39;, success: fun...

uni-app 微信小程序 上传图片文件,uniapp。uni-file-picker 和数据一起上传图片,上传图片的时候携带数据。多图上传

[TOC]uni-app中上传图片可以使用方法uni.uploadFileuni.uploadFile官方文档:https://uniapp.dcloud.net.cn/api/request/ne...

uniapp预览图片详解

一、预览图片的基本用法在uniapp中,我们可以使用uni.previewImage()API对图片进行预览,具体使用方法如下: uni.previewI...

uniapp文档在线浏览,pdfexcelword等

示例代码uni.downloadFile({ url: &#39;https://example.com/somefile.pdf&#39;, success: function (res) { va...

uniapp 微信小程序 上传图片,上传文件,上传视频等,上传组件封装

上传图片文件还可以参考:https://www.tnblog.net/aojiancc2/article/details/8233 这个里边有关于.net6实现图片上传后端的...

uniapp vue3 引用样式表样式

这样即可: &lt;style scoped lang=&quot;scss&quot;&gt; @import &#39;@/static/css/report-box.scss&#39;; &lt;/style...

uniapp 离线打包配置

下载Android Studio 并配置好JavaSDK查看HBuilderX版本然后去下载对应的SDK版本https://pan.baidu.com/s/1ZYxRVH23EbldPQqO...

uniapp 离线打包配置高德地图

没有申请key的去高德开放平台申请的Android平台Keyhttps://console.amap.com/dev/key/app SHA1 在前面申请云端证书里面找 ...

uniapp 应用热更新,进度条/权限

/** * 检查安装应用权限 */ checkInstallPermission() { return new Promise((resolve, reject) =&gt; { tr...

uniapp plus.runtime.install 安装失败

APP 权限配置添加&quot;&lt;uses-permission android:name=\&quot;android.permission.REQUEST_INSTALL_PACKAGES\&quot;/&g...