精华内容
下载资源
问答
  • 微信小程序打开h5页面
    千次阅读
    2022-04-01 14:49:35

    前言

    本文将从 0 到 1,一步步拆分,详细介绍如何实现该功能。

    这种需求在小程序中很常见,如下图所示:

    在这里插入图片描述

    第一步

    首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。

    page 目录新建一个页面(与创建普通页面方法一致),如下图所示:
    在这里插入图片描述

    第二步

    设置 webview 页面,用于接收业务跳转的网页链接。

    打开刚刚创建的文件,您只需动 wxml / js 文件即可,复制以下代码:

    <web-view
    src
    更多相关内容
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 微信小程序H5页面

    2021-03-29 17:13:33
    web-view中设置跳转h5的链接,可以加上需要的参数: (此图片来源于网络,如有侵权,请联系删除! ) tips: 1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的...
  • 微信小程序嵌入 H5 页面(web-view)

    千次阅读 2022-05-13 15:53:38
    页面中的 iframe ,方便我们在微信小程序打开一个 H5 页面; 官网描述: 承载网页的容器;会自动铺满整个小程序页面,个人类型的小程序暂不支持使用;所以使用这个组件,必须是在企业号小程序里面; 使用: 1、...

    在开发微信小程序的时候,我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况;微信小程序自带的 web-view 组件相当于 HTML
    页面中的 iframe ,方便我们在微信小程序中打开一个 H5 页面;

    官网描述:

    承载网页的容器;会自动铺满整个小程序页面,个人类型的小程序暂不支持使用;所以使用这个组件,必须是在企业号小程序里面;

    使用:

    1、配置业务域名

    在微信小程序后台,开发-开发管理-开发设置-业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名(最多200个);

    2、使用组件

    每个页面只能有一个 web-view组件,并且 web-view组件将默认展示在最高层级;

    <web-view src="xxxxxxxxxx"></web-view>
    

    它的属性如下:
    1、原生小程序提供属性
    在这里插入图片描述
    2、uni-app提供属性
    在这里插入图片描述

    3、H5 跳转回小程序

    在内嵌网页中跳回小程序,需引入JS-SDK;这里以vue项目为例:

    //安装插件
    npm i -S weixin-js-sdk 
    //引入
    import wx from 'weixin-js-sdk'
    

    在需要返回小程序的H5页面使用下面代码:

    wx.miniProgram.navigateTo({
      url: "/pages/index", //小程序地址
    });
    

    注意
    1、web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信;
    2、在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 web-view 的 src 后面加个#wechat_redirect解决;
    3、避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent;

    4、小程序和H5之间传参

    小程序和H5之间互相跳转,我们如果需要传递参数的话可以通过 url 路径拼接的方式来传递参数;

    url:'/page/index?id=1'
    

    参数传递之后,下面是参数的获取:
    1、微信小程序

    onLoad:function(options){
    	console.log(options)
    }
    

    2、H5

    mounted(){
    	let name = this.getQueryString('name')
    	console.log(name )
    },
    methods:{
    	//解析url获取指定参数的值
    	getQueryString(name)  {
    	    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    	    const search = window.location.search.split('?')[1] || '';
    	    const r = search.match(reg) || [];
    	    return r[2];
       }
    }
    
    展开全文
  • 微信小程序内含H5页面实现方式

    千次阅读 2022-01-13 14:12:12
    微信小程序内含H5页面实现方式 一、背景 众所周知,我们写完小程序,发到线上,是需要经历设置版本、提交代码审核、等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过,又要...

    微信小程序内含H5页面实现方式

    一、背景

    众所周知,我们写完小程序,发到线上,是需要经历设置版本、提交代码审核、等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过,又要重新提交审核。这个流程走下来,到线上,可能会有诸多的不确定因素而导致延迟上线时间,并且对某个模块业务上需要频繁改动,那就需要经常发版了,以此如何可以减少发版的频率呢?那么就油然而生了微信小程序中插入h5页面,这个h5就专门写频繁改动的模块,引入这个模块的变动,并没有导致微信小程序内部的变动,所以就不需要发版了。这就是我们项目微信小程序中内写h5页面的背景了。

    二、具体使用

    1、实现的条件

    1.1、实现微信小程序内含H5页面所需要用的容器标签是:web-view,这个在使用时需要注意:

    • 个人类型的小程序暂不支持使用。
    • 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
    • 小程序插件中不能使用。
    • web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面

    1.2、在h5项目中需要导入wx-jssdk包,要使用到h5页面跳到小程序内的页面(例如h5页面的产品跳到小程序内的产品详情。):wx.miniProgram.navigateTo、wx.miniProgram.switchTab等API;

    微信小程序的文档

    2、微信公众平台配置

    h5的域名需要在该小程序下的微信公众平台中配置为其业务域名:
    登录微信公众平台=》开发管理=》业务域名 (个人版本时没有业务域名设置的)

    3、创建h5项目

    创建完该项目后,在html文件中导入wx-jssdk包

    4、在创建的小程序的处理

    以我的项目为例:

    • 在根文件下创建的config,创建web-view-config.js文件
      在这里插入图片描述

    • 下面为web-view-config文件内容,导出的是为web-view标签加载的链接
      在这里插入图片描述

    • 使用web-view,提供了几个事件如:bindmessage、binderror等,可见微信开发文档,这几个事件可用可不用,视具体情况而论

    // webViewUrl 为跳转的链接
    <web-view wx:if="{{webViewUrl}}" src="{{webViewUrl}}" bindmessage="bindMsg"></web-view>
    

    在对相应链接拼接参数,可能需要特殊处理,拼接小程序的cookie值。

    // 将object转换成webViewUrl
    
    import WebViewConfig from '../../../config/web-view-config.js';
    //拼接参数
    this.setData({
              webViewUrl: `${WebViewConfig.newsDetail}${convertWebViewUrl(webViewParams)}`,
            	});
    const convertWebViewUrl = (obj = {}) => {
      let url = '';
    
      // url添加登录态
      const caizhi_key = wx.getStorageSync('cookie').split(';')[0].split('=')[1];
    
      // 经理id
      let staffId = '';
      const { isManager, managerInfo = {}, customerInfo = {} } = getApp().globalData;
      if (isManager) {
        staffId = managerInfo.staffId;
      } else {
        staffId = customerInfo.visitManagerStaffId;
      }
      url += `?caizhi_key=${caizhi_key}&staffId=${staffId}`;
    
      // url格式化参数
      const params = Object.keys(obj).reduce((prev, curr) => {
        return `${prev}&${curr}=${obj[curr]}`;
      }, '');
      url += encodeURIComponent(params);
    
      // url添加时间戳,清缓存
      url += `&timestamp=${new Date().getTime()}`;
      return url;
    };
    
    • 看业务域名有没有成功,可以看开发工具中的详情
      在这里插入图片描述
      实现以上步骤,即可打开小程序就可以加载到h5写的页面

    三、总结

    使用h5页面来减少发版的频次,是挺好的方式,但是这样的实现也是有一定风险的,导致小程序被封,例如h5内的页面内容是第三方的,不可控,出现一些风险内容导致使得小程序被关闭。在实际开发中也会有些问题,h5页面在小程序内操作有一定限制的或标签的兼容(小程序提供标签和常规标签)等问题。总的来说,这样的使用有一定的好处的,就你所需来论了

    展开全文
  • 微信小程序跳转h5页面的方式

    千次阅读 2021-11-23 14:08:32
    通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1、使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二步是 或者 2、通过bindtap方法在js文件中使用wx的api...

    通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充:
    1、使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml
    在这里插入图片描述
    第二步是
    或者

    2、通过bindtap方法在js文件中使用wx的api方法跳转,比如

     wx.navigateTo({
           url: '/pages/webview/index?url=https://域名/order/detail&orderNo=232822323',
         })
    

    tips1. 需要注意的是,这两种方法都是先到/pages/webview/index.js文件的onload方法中,需要处理一下参数,

      onLoad: function (options) {
    
        let { url } = options
        // url = decodeURIComponent(url)
        if(options.orderNo){
          url = url +"?orderNo="+options.orderNo
        }
    
        this.setData({
          url : decodeURIComponent(url) 
        })
      },
    

    tips2. 域名需要在微信小程序的后台开发设置中配置
    在这里插入图片描述

    展开全文
  • 微信小程序跳转到H5(打开H5页面

    万次阅读 2020-07-28 10:33:18
    在我们实际开发的过程中,有些场景需要从微信小程序跳转到H5页面,使用web-view组件就可以了; 实现的方式也很简单,具体实现方式如下: 1 小程序如果要正式发布的话,需要配置业务域名并上传验证文件。 a 域名...
  • 这篇文章主要介绍了微信小程序H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram ...
  • 微信小程序怎么跳转H5页面

    千次阅读 2020-11-27 16:07:01
    可以看到微信官方文档中,微信小程序提供了承载网页的容器: web-view,通过这个容器,其实可以实现在小程序内打开一个H5页面。也就是可以在小程序中设置一个空白页面,专门用于打开此类外部H5页面。具体做法如下: ...
  • 微信小程序H5页面传值

    千次阅读 2021-12-13 11:54:45
    微信小程序使用获取坐标与websocket链接
  • 小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付 目前的流程,外链发送订单请求拿到预支付的prepay_id和其他参数,小程序这边只需要将它传过来...
  • H5页面打开微信小程序

    千次阅读 2022-04-27 20:56:44
    背景:用于实现外部H5页面中实现打开微信小程序的功能(微信内打开请使用微信开放标签方式),用户在网页中一键唤起小程序,能够给用户提供更好的体验。采用的技术是URL Scheme,是微信小程序后台生成一种地址,适用于...
  • 前段时间在产品等人的怂恿下,接手了公司一个使众人闻风丧胆的陈年老h5项目。打开项目细细的看,细细的品,果然惊喜不断,处处都是祖传宝藏(ps:我现在退出还来得及吗)。这让我想起了前段时间比较火的一首歌,歌名**...
  • 主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序内嵌h5页面

    千次阅读 2020-12-19 11:51:55
    概况使用 标签能在小程序打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的。如果开发工具上勾选了‘不校验域名’,在开发的...
  • 主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序H5之间相互跳转的几种情况
  • 小程序web-view调用H5页面发起小程序抽取微信地址示例代码。 这接口是我熬夜写出来的,可以用于ECtouch的H5发起小程序调用微信收货地址,如果看不懂的话,可以进微信>>发现>>小程序搜索:“春意谷成人用品商城”进...
  • H5页面跳转微信小程序
  • 微信小程序webview内嵌h5页面

    千次阅读 2020-11-03 17:17:03
    首先登录小程序管理后台,把 web-view 直连的 h5 页面地添加到配置域名白名单中 比如我想要小程序直连地址为https://me.csdn.net/weixin_39550080的页面,那就应该把https://me.csdn.net添加到 webview 业务域名白...
  • web项目PC端和移动端H5,微信小程序在线预览base64格式的pdf文件 本人项目实用实测可行
  • UNI-APP之微信小程序H5

    千次阅读 2022-01-01 06:16:09
    最近有个需求,需要将微信小程序中一些页面和功能改成h5,这次功能开发的时间有点紧,而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处,所以打算直接转成uni-app。uni-app官网上也有从微信小...
  • WXML: hotrecommend 是接口返回的数组 0}}'> 热门推荐 bindtap="routerview" class="pick_item_wrap" wx:for="{{hotrecommend}}" wx:key=... */ } 效果:点击跳转,左右可以滑动 H5页面 打开小程序 的坑: 待完成
  • 接下来介绍具体怎么完成微信小程序与vue内嵌页面实现地图定位功能。1.首先在index.html中引入微信jssdk2.在小程序中3.在vue组件中,点击获取地图位置按钮,触发事件。//携带参数进入小程序,使...
  • H5唤起微信小程序

    千次阅读 2021-08-04 21:46:22
    此文章讲述H5唤起微信小程序(可指定页面并携带参数) 一、H5微信外部浏览器唤起小程序(App里面嵌入的H5也可以唤起) 注意:生成URL Scheme的必要前提:小程序不能是个人的,小程序必须已经上线发布了 1、第一种:...
  • 微信小程序内嵌H5页面

    万次阅读 多人点赞 2018-06-05 23:19:38
    标签能在小程序打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名一致,否则在真机上是打不开的。如果开发工具上勾选了‘不校验域名’,在开发的时候还是能打开的,但也没用,线上是打不开的。实例:1...
  • h5打开微信小程序

    千次阅读 2021-09-14 19:17:40
    ​​​​​​​获取 URL Scheme | 微信开放文档微信开发者平台文档...《URL Scheme打开小程序》 2. 《获取 access_token》 请求地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&am
  • 前言:在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,这两个端都是使用uniapp编写的,查资料后决定使用webview来嵌入完成,然后考虑到还可能有参数(数据)需要传递,所以实现后记录一下...
  • 微信小程序跳转到H5页面实战篇

    千次阅读 2020-12-19 13:35:47
    有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信小程序:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,431
精华内容 3,372
关键字:

微信小程序打开h5页面

微信小程序 订阅