精华内容
下载资源
问答
  • 小程序web-view使用方法是子恒老师《子恒说小程序开发》视频...详细讲解了小程序web-view组件的使用,内容包含web view打开网页,网页与小程序之间的跳转,在web view中实现微信支付等等。欢迎反馈,微信号:QQ68183131
  • 1、web-view分享好友 2、 跳转到小程序页面展示分享按钮 3、 点击分享记录分享操作(分享无回调,可在配置分享里执行记录分享操作,不足之处是唤起好友列表时就执行了) 4、分享后用户主动返回web-view页面刷新...

    场景:

    1、web-view分享好友

    2、 跳转到小程序页面展示分享按钮

    3、 点击分享记录分享操作(分享无回调,可在配置分享里执行记录分享操作,不足之处是唤起好友列表时就执行了)

    4、分享后用户主动返回web-view页面刷新分享次数

    分享后点击左上角返回按钮,web-view页面无法监听到页面返回事件

    解决方案:

    在web-view的onShow函数随机生成一个随机数

    web-view的url上加上生成的随机数,因为onShow在页面回退的时候也会执行,这样每次加载的web-view都是不一样的路径,实现页面返回web-view页面时刷新到最新数据。

    <web-view src="{{url+'&random='+random}}"></web-view>
    
    data = {
        url: 你的h5地址,
        random: '',
    }
    
    onShow(){
        this.random = Math.random()
        this.$apply()
    }

     

    展开全文
  • web-view的src只能带一个参数src=”…..?a=1” h5页面 h5页面加入 &lt;script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"&gt;&lt;/...

    web-view的src只能带一个参数src="…?a=1"

    h5页面

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

     var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {   //判断是否是微信环境
      
    //微信环境
    wx.miniProgram.getEnv(function (res) {
      if (res.miniprogram) {
        // 小程序环境下逻辑
        //小程序发送信息```
        var info = {
          title: '11', //参数一
          value: '22', //参数二
        };
    
        wx.miniProgram.postMessage({
          data: info
        });
    
      } else {
        window.location.href = 'https://www.baidu.com';
        //非小程序环境下逻辑
    
      }
    })
      } else {
        //非微信环境逻辑
        window.location.href = 'https://blog.csdn.net/qq_37235231/article/details/82053062';
    
      }
    

    小程序页面
    index.wxml页面
    <web-view src="{{webUrl}}" bindmessage="msgHandler"></web-view>
    index.js页面

     Page({
       msgHandler: function (e) {    //(h5像小程序传递参数)
        console.log(e.detail.data) //获取到来自也页面的数据
         var info = (e.detail.data)[0]
    	    this.setData({
    	      value: info.value
    	    });
    	    this.setData({
    	      title: info.title
    	    });
        },
     onShareAppMessage: function (options) {   //转发时执行
        var that = this;
        console.log(this.data.webUrl);
        return {
          title: that.data.title,
          path: '/pages/index/index?value=' + that.data.value,//小程序像h5传递参数
          success(e) {
            // shareAppMessage: ok,
            // shareTickets 数组,每一项是一个 shareTicket ,对应一个转发对象
            // 需要在页面onLoad()事件中实现接口
            wx.showShareMenu({
              // 要求小程序返回分享目标信息
              withShareTicket: true
            });
          },
        }
      },
      onload:function(options){
        var webUrl = '';
        if (options.value) {//获取转发过来的参数
          webUrl = "https://www.jsssser.com/vity/gdsen.xhtm?value=" + options.value;
        } else {
          webUrl = "https://www.jsssser.com/vity/gdsen.xhtm"
        }
        this.setData({
          webUrl: webUrl
        })
     }
      })
    

    h5的js页面(获取并处理小程序传递过来的参数)

    function getParamer() {
    
    	var url = window.location.href.split("?")[1]; /*获取url里"?"后面的值*/
    	if (url) { /*判断是否是一个参数还是多个参数*/
    		url = url.split("=")
    		return url[1]; /*返回想要的参数值*/
    	} else {
    		return '';
    	}
    }
    

    以上是个人做web-view转发所用到的知识,若有不很正确的地方,愿意改之

    展开全文
  • 小程序web-view覆盖原生组件

    千次阅读 热门讨论 2019-06-30 13:11:56
    小程序web-view覆盖原生组件 web-view 一、web-view的使用 官方文档 <web-view class="map-box" src="https://www.forguo.com"> </web-view> ** 官方指出,小程序默认会覆盖其它所有的组件** 二、...

    小程序web-view覆盖原生组件


    打个广告

    最近做了一款小程序,有兴趣也可以做了解,微信扫码查看

    趣婚礼

    趣婚礼 Logo

    【Github】基于Taro2 + 云开发 打造婚礼邀请函


    web-view

    一、web-view的使用

    官方文档
    在这里插入图片描述

    <web-view class="map-box" src="https://www.forguo.com"> </web-view>
    

    ** 官方指出,小程序默认会覆盖其它所有的组件**

    二、解决需求

    需要在web-view页面上面加一个按钮,用来跳转到小程序的页面,

    • 1.通过web-view的接口实现
    // <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    
    // javascript
    wx.miniProgram.navigateTo({url: '/path/to/page'})
    wx.miniProgram.postMessage({ data: 'foo' })
    wx.miniProgram.postMessage({ data: {foo: 'bar'} })
    wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
    

    但是需要等到web-view页面完全加载结束,这样对于小程序页面跳转的操作就有一定的延时了,
    会导致跳转好多次的情况,而且不及时。

    • 2.通过在web-view上面覆盖小程序的标签来实现了;
      该方式官方没有指出(但亲测有效)
      选择cover-view覆盖在web-view上面,将coevr-view写到web-view里面

    需要将该coevr-view样式fixed,层级z-index: 99999(越大越好)

       .tool-bar {
            color: #fff;
            position: fixed;
            bottom: 13%;
            right: 0rpx;
            width: 136rpx;
            height: 236rpx;
            border-radius: 8rpx;
            z-index: 999999;
            /*box-shadow: 0px 0px 15px 4px  rgba(0,0,0,0.15);*/
    
            .nav-bg {
                width: 136rpx;
                height: 236rpx;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -1;
                border-radius: 8rpx;
            }
    
            .tool-btn {
                width:100rpx;
                height: 200rpx;
                position: absolute;
                top: 18rpx;
                left: 18rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }
        }
    
            <web-view src="https://www.forguo.com">
                <cover-view class="tool-bar">
                    <cover-image src="../../common/imgs/nav-bg.png" class="nav-bg"></cover-image>
                    <cover-view class="tool-btn">
                        <cover-view>我的</cover-view>
                        <cover-view>订单</cover-view>
                    </cover-view>
                </cover-view>
            </web-view>
    

    Tips: cover-view默认是不可以设置背景图及box-shadow的,如需:使用cover-image实现

    当然,如果你写了发现,开发者工具没有显示,(调试样式可以先删掉src)

    用手机打开试试,发现是可以的,(用不同的手机试试)

    最终效果如图红色部分:

    在这里插入图片描述

    三、继续采坑(如何兼容更多的手机)

    当你发现在IOS可以显示以为就可以了,其实不是;

    上面的写法,我用华为荣耀(安卓9和8)、Vivo(安卓7)、Oppo(安卓4)、三星S9(安卓8)都是可以的,

    唯独在三星S6(安卓6)的手机不显示,然后就继续采坑了;

    去网上找,说可以给cover-view的显示加个延时,一试果然有效

    html加一个wx:if即可

              <web-view src="https://www.forguo.com">
                <cover-view class="tool-bar" wx:if={{showNav}}>
                    <cover-image src="../../common/imgs/nav-bg.png" class="nav-bg"></cover-image>
                    <cover-view class="tool-btn">
                        <cover-view>我的</cover-view>
                        <cover-view>订单</cover-view>
                    </cover-view>
                </cover-view>
            </web-view>
    
        data = {
                showNav: false, // 默认不显示
    	}
    
    	// wepy 下开发,不用setData就可以
    	onLoad() {
              setTimeout(() => {
                   this.showNav = true;
                   this.$apply();
               }, 300);
    	}
    

    好了,大功告成;

    如果大家用这种方式在某些手机不显示,欢迎留下手机型号一起探讨;

    ending…

    展开全文
  • 小程序进入web-view后,我打印getCurrentPages() ,之前的页面栈被清空,重写生成了web-view为首页的页面栈 如:当前的页面栈(栈低->栈顶) A ,B,C。在C页面点击按钮进入web-view后,打印页面栈,之前的A,B,...
  • uni-app web-view内嵌网页

    千次阅读 2020-06-06 10:56:46
    首先附上uni-app web-view官网链接web-view介绍 1、网页向应用传值 应用中监听 web-view 的 message 事件 <template> <view> <web-view src=...

    内嵌网页 应用与网页间的通信

    在使用uni-app开发的app应用里内嵌非应用内的静态文件的网页,相互通信分两种情况
    首先附上uni-app web-view官网链接web-view介绍

    1、网页向应用传值

    应用中监听 web-view 的 message 事件

    <template>  
        <view>  
            <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
        </view>  
    </template>  
    
    <script>  
        export default {  
            methods: {  
                handleMessage(evt) {  
                    console.log('接收到的消息:' + JSON.stringify(evt.detail.data));  
                }  
            }  
        }  
    </script>
    

    从 网页 向应用发送消息

    document.addEventListener('UniAppJSBridgeReady', function() {  
        uni.postMessage({  
            data: {  
                action: 'postMessage'  
            }  
        });  
    });
    

    详情可参考链接 网页传值应用

    2、应用传值网页

    实质上就算 解析 window.location.search路径获取参数
    应用代码

    <template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png"></image>
    		<view class="text-area">
    			<text class="title">{{title}}</text>
    		</view>
    		<view>
    			<web-view :webview-styles="webviewStyles" :src="url"></web-view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    				webviewStyles: {
    					progress: {
    						color: '#FF3333'
    					}
    				},
    				url:'http://localhost:9004?data=' + '123456'
    			}
    		},
    		onLoad(options) {
    			if(options && options.url){
    				console.log(options.url)
    			}
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>
    

    网页代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>beego api aplication demo</title>
    </head>
    <body>
        <div class="demo">
        <input type="text" value="" onchange="inptt1(this.value)">
            <input type="password" value="" onchange="inptt2(this.value)">
            <button type="submit" class="btn" onclick="submint()">确定</button>
        </div>
    </body>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script>    
        var userName = '';
        var userPhone = '';
        function inptt1(val){
            if(val){
                this.userName = val
            }
        }
        function inptt2(val){
            if(val){
                this.userPhone = val;
            }
        }
        function submint(){
            console.log(this.userName,this.userPhone)
            if(this.userName && this.userPhone){
                var ajax = new XMLHttpRequest();
                ajax.open('get','http://192.168.1.33:8080');
                ajax.send();
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4 && ajax.status == 200){
                        console.log(ajax.response)
                    }
                }
            }
        }
        console.log(getQuery('data'));  //获取 uni-app 传来的值
        function getQuery(name) {
        // 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if(r != null) {
            // 对参数值进行解码
            return unescape(r[2]);
        }
        return null;
    }
    </script>
    <style>
        .btn{
            width: 80px;
            height: 30px;
        }
    </style>
    </html>
    

    这里搭建了node本地服务器 使用一个index.html作为网页

    展开全文
  •  博主这边的小程序大部分都使用了web-view,众所周知,使用web-view最大的问题就是和小程序之间进行交互的问题。我这边主要是从web-view跳转回小程序的demo。 二、通过web-view跳转到小程序页面 1、微信官方...
  • 百度小程序-web-view内嵌h5页

    千次阅读 2019-08-05 03:12:36
    开发文档 ...开发方式 小程序内 <...-- 首页的 web-view --> <web-view src="https://m.baidu.com"></web-view> 复制代码使用 web-view 打开限定域名内的网页 进入智能小程序开...
  • uni-app web-view缩放

    千次阅读 2020-07-20 19:26:38
    web-view :src="goToUrl()" progress></web-view> </view> </template> <script> var wv; //计划创建的webview export default { components: {}, data() { return { }; ...
  • 1、web-view官方文档 2、web-view是小程序提供的一个可以直连h5页面的组件,只要传递一个h5页面的地址,就可以在小程序里直接打开预览该h5页面。 3、如果已有移动端h5版本的模块,要开发小程序版本,使用web-view...
  • 微信小程序web-view组件 打开外部url

    万次阅读 2018-07-30 16:45:49
    微信小程序团队推出一个新组件web-view, 可以在这个组件中打开你的html5网页, 而且可以在web-view里面打开网页的a标签, 也就是说可以实现链接跳转。 例如: wxml 内容 &lt;...
  • uniapp使用web-view跳转外部链接

    千次阅读 2020-08-12 13:56:57
    2.在文件夹里放置web-view <view> <web-view :src="url" :progress="false"> </web-view> </view> 3.在js里接收传递过来的链接 <script> export default { data() { return...
  • 小程序怎么调试web-view

    千次阅读 2019-08-13 17:52:51
    开发者工具中,在web-view出现的页面,点击鼠标右键,然后出现一个调试气泡提示信息,点击它就会跳出web-view的调试工具
  • 微信小程序跳转外链web-view用法

    万次阅读 多人点赞 2018-04-03 18:12:22
    小程序已经开放了,跳转外链的功能,意思是,在小程序里面...基本的配置结束之后,我们就来开始用web-view这个插件了。 &lt;web-view src="https://hx.qq.com/zlkdatasys/mct/proj_1/download.shtm...
  • uni-app中web-view的使用

    千次阅读 2020-06-10 14:50:22
    web-view :src="url" @message="handleMessage"></web-view> </template> <script> export default { data() { return { url: null //要打开的外部链接 }; }, methods: { //通过 ...
  • 支付宝小程序跳转到h5页面web-view

    万次阅读 2018-12-25 15:10:03
    支付宝小程序跳转到h5页面web-view 基础库 1.6.0 开始支持,低版本需做兼容 组件是一个可以用来承载H5网页的组件,会自动铺满整个小程序页面。 web-view 要渲染的H5网页URL。H5网页URL需要登录小程序管理后台-小...
  • web-view 基础库 1.6.4 开始支持,低版本需做兼容处理 web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 客户端 6.7.2 版本开始,naviga...
  • 小程序web-view传值通讯

    千次阅读 2018-08-03 11:40:57
    路径传值 ...web-view src="{{url}}"></web-view> 小程序page页 onLoad: function (options) { var that = this that.setData({ videoId: options.videoId, url: 'https://api...
  • 小程序web-view的神坑

    万次阅读 2018-03-15 16:45:36
    微信小程序的web-view可以外链站点,只要该站点在小程序的后台设置即可。站点需要https的站点。原本是很简单的一件事,只要将url放到web-view的src中就可以了。实际也是跑起来了。可是在安卓中跑没有问题,而在苹果...
  • 小程序系列之web-view的页面引入交互实现方案 需求如下: 小程序商城引入web-view页面,要求web-view呈现的H5页面里面带上一个"返回首页"按钮,点击重新返回小程序首页。 解决方案如下: 根据微信小程序文档,...
  • 小程序web-view组件

    千次阅读 2018-01-19 16:41:54
    不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪。近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件。 1,web-view这个组件是什么鬼?官网的介绍:web-view 组件是一个可以...
  • 微信小程序文档中提到,web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。web-view的出现,可以缓解小程序size告急的问题。 web-view的使用方法: &lt;!-- wxml --&gt; &lt;!--...
  • 最近在和同事做支付宝小程序开发,为了之后在微信小程序上使用,减少开发时间,大部分页面操作都在web-view运行,通过web-view打开网页,因为打开的是一个网页,所以在进行多次跳转时,点击返回操作,页面会回到之前...
  • 小程序web-view的使用与调试

    千次阅读 2017-11-07 10:16:32
    基本语法: 其中,url必须在管理后台加进业务域名,并且是... 使用了web-view,页面将不能放置其他元素,因为web-view会铺满整个页面 电脑端调试,需要在开发者工具的项目设置里把基础库版本改为最新的(1.6.4)
  • 1、不传参数的使用 // 平台差异请关注 https://uniapp.dcloud.io/component/web-view?id=...注意: uniapp 的 web-view 的参数传递 的字必须要用 encodeURIComponent(str) 转码; encodeURIComponent() ...
  • 微信小程序web-view的简单思考和实践

    万次阅读 2017-12-08 16:43:35
    关微信小程序web-view的知识点,目前最全的总结。
  • 小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码 效果图: html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...
  • 最近在一个项目中用到了小程序的新组建web-view,先来看看组件官方介绍,明显功能是承载html的网页 类似于Android的webview组件。 在个人小程序后台配置好request域名,然后写到了我自己注册的测试环境中;   ...
  • 小程序web-view内嵌网页分享获取标题

    千次阅读 2019-02-27 23:36:03
    首先在web-view组件上绑定bindmessage事件 &lt;web-view wx:if="{{url!=''}}" src='{{url}}' bindmessage="bindmessage"&gt;&lt;/web-view&gt; 在js文件中定义好bindmessage...
  • 微信小程序web-view跳转h5 安卓白屏

    千次阅读 2020-07-07 18:02:07
    web-view src='{{src}}' ></web-view> 跳转到h5时 安卓白屏 ios正常 跳转的过程非常慢 跳转去web-view.js代码 gotoWebview(toUrl) { wx.navigateTo({ url: '/pages/webview/webview', success: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 518,836
精华内容 207,534
关键字:

web-view