PHP群：95885625 Hbuilder+MUI群：81989597 站长QQ：634381967
     | 积分获取 | 给我留言 | tag标签
    全站搜索
    关键字： 鼠标悬停 日期计算 CSS 菜单导航代码 全屏广告 经过 网站运营 拍照
    您现在的位置： 首页 > 开发编程 > HBuilderX教程 > 正文

    uniapp 与 webview 在app中参数传递

    作者：admin来源：网络浏览：次时间：2021-12-30 13:03:40我要评论
    导读：webview默认占用全屏，建议使用uniapp原生导航栏，不然还要自己画，全局关闭的，可以单独页面开启，新增时设置top和bottomuniapp页面<templ...
    webview默认占用全屏，建议使用uniapp原生导航栏，不然还要自己画，全局关闭的，可以单独页面开启，新增时设置top和bottom

    uniapp页面

    1. <template> 
    2.     <view class="selectPipeline"> 
    3.         <view class="btn"> 
    4.             <button @click="changeBtn" type="default">确认</button> 
    5.         </view> 
    6.     </view> 
    7. </template> 
    8.  
    9. <script> 
    10.     export default { 
    11.         data() { 
    12.             return { 
    13.                     // 状态栏高度+原生导航高度 
    14.               topHeight: '', 
    15.               ifrSrc: '/hybrid/html/selectPipeline.html',  
    16.          } 
    17.         }, 
    18.         onLoad() { 
    19.             this.gpsPosition() 
    20.              
    21.         }, 
    22.         methods:{ 
    23.             // 获取经纬度 
    24.             gpsPosition(){ 
    25.                 uni.getLocation({ 
    26.                     type: 'gcj02', 
    27.                     success: (res) => { 
    28.                         console.log('当前位置：' , res); 
    29.                         console.log('当前位置的经度：' + res.longitude); 
    30.                         console.log('当前位置的纬度：' + res.latitude); 
    31.                                 this.ifrSrc = this.ifrSrc + '?lng=' + res.longitude + '&lat=' + res.latitude; 
    32.                                 this.getSystemInfo() 
    33.                         } 
    34.                 }); 
    35.             }, 
    36.             // 渲染webview页面 
    37.             init(){ 
    38.                 // #ifdef APP-PLUS 
    39.                 // 空出导航栏高度和按钮高度 
    40.                 var wv = plus.webview.create(this.ifrSrc,'',{top:this.topHeight,bottom:'55px'}) 
    41.                 var currentWebview = this.$scope.$getAppWebview();    
    42.                 currentWebview.append(wv);   
    43.                  
    44.                 //重点: 监听子页面uni.postMessage返回的值   
    45.                 plus.globalEvent.addEventListener('plusMessage', function(msg){   
    46.                     if(msg.data.args.data.name == 'postMessage'){    
    47.                         console.log('子页面返回的数据为:'+JSON.stringify(msg.data.args.data.arg));   
    48.                     }   
    49.                 }); 
    50.                 // #endif 
    51.             }, 
    52.             // 获取系统信息 
    53.             getSystemInfo(){ 
    54.               let _this = this 
    55.               uni.getSystemInfo({ 
    56.                 success: function (res) { 
    57.                   console.log('res:',res) 
    58.                   _this.topHeight = (res.statusBarHeight+44) + 'px' 
    59.                         _this.init() 
    60.                 } 
    61.               }) 
    62.             }, 
    63.             changeBtn(){ 
    64.                 console.log("确认选择") 
    65.                  
    66.             } 
    67.         } 
    68.     } 
    69. </script> 
    70.  
    71. <style lang="less" scoped> 
    72.     .btn{ 
    73.         position: fixed; 
    74.         left: 0; 
    75.         right: 0; 
    76.         bottom: 0; 
    77.         padding: 5px 10px; 
    78.         button{ 
    79.             height: 45px; 
    80.             background-color: #0081ff; 
    81.             color: #fff; 
    82.         } 
    83.     } 
    84. </style> 

    html，需要引入uni.webview.1.5.2.js

     

    1. <!DOCTYPE html> 
    2. <html lang="en"> 
    3. <head> 
    4.   <meta charset="UTF-8"> 
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    6.   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> 
    7.   <title>Document</title> 
    8.   <style> 
    9.     body { 
    10.       background-color:greenyellow; 
    11.              
    12.     } 
    13.         #btn{ 
    14.             margin: 200px auto; 
    15.             width: 300px; 
    16.             height: 200px; 
    17.             font-size: 140px; 
    18.         } 
    19.   </style> 
    20. </head> 
    21. <body> 
    22.   <button id="btn">按钮</button> 
    23.     <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> 
    24.   <script> 
    25.     var a=1; 
    26.     console.log(getQuery('lng'),getQuery('lat'));  //获取 uni-app 传来的值 
    27.     //取url中的参数值 
    28.     function getQuery(name) { 
    29.         // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在） 
    30.         let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
    31.         let r = window.location.search.substr(1).match(reg); 
    32.         console.log(r); 
    33.         if(r != null) { 
    34.             // 对参数值进行解码 
    35.             return decodeURIComponent(r[2]); 
    36.         } 
    37.         return null; 
    38.     } 
    39.         document.addEventListener('UniAppJSBridgeReady', function() { 
    40.                 //向uniapp传值 
    41.                 document.querySelector("#btn").addEventListener("click", function () { 
    42.                     uni.postMessage({ 
    43.                         data: { 
    44.                             action: ++a, 
    45.                         }, 
    46.                     }); 
    47.                 }); 
    48.         }); 
    49.   </script> 
    50. </body> 
    51. </html> 




     

    转载请注明（B5教程网）原文链接：https://b5.mxunkeji.com/content-146-6656-1.html
    相关热词搜索： uniapp传递参数
    分享按钮
    上一篇：原生小程序和uniapp的不同点
    下一篇：最后一页

    最新推荐

    关于我们

    关于我们

    赞助我们

    加入我们

    版权声明

    联系我们

    联系我们

    QQ技术群

    合作方式

    广告服务

    业务合作

    常见问题

    意见反馈

    网站地图

    在线投稿

    积分获取

    在线充值

    本站不承担任何版权问题，如果我们侵犯了您的利益，请来信
    告知(634381967@qq.com)，我们会在第一时间处理！
    © 苏ICP备20040182号
    B5教程网 版权所有