微信小程序打开H5页面并传参

在微信小程序打开H5页面并传参

准备工作

• 需要有一个企业类的微信小程序，个人类型与海外类型的小程序暂不支持使用。因为不能登录小程序管理后台，以至于没有办法为小程序添加h5的合法域名，就实现不了跳转
• 需要有该小程序管理后台的权限

  开始

• 在小程序新建一个页面，这个页面用来打开h5页面
  小程序中的 web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。就可以用来实现将需要打开的 h5 页面展示在小程序的页面上
  这是讲h5链接到这个页面的代码

  <!-- pageH5页面 -->
  <!-- 先展示这个文案，加载成功后消失 -->
  测试在小程序里面打开合法域名的H5页面
  <view class="container">
  	<view class="pageH5">
  		<web-view src="{{src}}?user={{name}}&id={{id}}"></web-view>
  	</view>
  </view>
  src、name、和id都是js data里定义的数据, src是h5链接，name和id是需要传给h5的参数
  <!-- 例： -->
  data: {
  	src: 'https://kepu.ihuyue.net/2018Yeartest/test/h5ToWx/index.html',
  	// src: 'https://baidu.com',
  	name: 'caijuan',
  	id: '001'
  },

• 属性 src String类型 webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

• 如果不是一进到小程序就打开H5页面，那就需要一个跳转打开H5的按钮，在另一个页面上

  <view class="tiaoH51">
      <navigator url="/pages/view-h55/view-h55" hover-class="navigator-hover">测试打开H5并传参</navigator>
  </view>
  <!-- /pages/view-h55/view-h55  就是上面链接h5的小程序页面 -->

业务域名

• 当没有添加这个h5的域名 http://www.ihuyue.cn 为小程序的合法域名的时候，页面会呈现
  
  这个时候就需要在 小程序管理后台( https://mp.weixin.qq.com/ )去配置业务域名了，这个账号密码是该小程序唯一的，需要找管理员要，然后登录进去会有个二维码就是用自己的微信扫一扫登录，但是你的微信账号需要有这个管理权限，也需要让管理员给你加，然后就可以操作了，在设置中的开发设置的下方有业务域名，点击开始配置按钮
  
  在设置中添加业务域名，按照步骤添好就可以访问了

• 如果因为各种原因添加不了可以不能添加也可以直接访问

  1. 在小程序开发者工具中菜单栏的右侧更多下的详情中
     
     找到下方的
     
     勾选上即可

  2. 这样在开发者工具操作后在手机上是预览不到效果的，需要在手机上也进行设置一下，打开手机上的调试
     
     点击打开调试，我现在已经是打开的状态了
     然后退出小程序再进去就可以了

h5接受参数

在小程序打开h5页面并传参，在h5代码里可以直接用window.location.herf 获取
为了验证，我在h5页面上打印出了结果

var ht = window.location.href.split('h5ToWx')[1];
$('.para').html(ht);

获取到参数后根据需要获取即可

赏

谢谢你请我吃糖果

支付宝

微信