微信小程序web-view的使用教程

最近公司有需求,需要点击小程序首页banner,跳转到别人的h5页面。

首先是域名的问题:

步骤:先登录小程序开发平台,将页面需要跳转的域名写上去,注意了,域名不是指服务器的域名,而是服务器下面的业务域名 !!!

配好了域名之后就可以开始调用web-view了。

1.如果你不需要通过点击小程序里面的按钮或者某个view,那么你可以直接在小程序里面直接调用下面的代码即可

<web-view src="https://hi.xxx.com/Tickets/html/getScanCode.html"></web-view>

2.如果你需要点击小程序里面的按钮或者某个view才能调转到不同的h5页面那么你需要在pages里面新增一个页面里面写

<web-view src="{ {path}}"></web-view>

在数据初始化化的时候先给一个默认值https://hi.xxx.com/Tickets/html/getScanCode.html,

在点击的时候把需要跳转的某个页面的路径写成参数传过来,在onload里面拿出来赋值就可以解决跳转到不同页面的问题啦。

pages/index/index.wxml

 
  1. <view class="container">

  2. <button bindtap='dianji' data-webview="https://mp.weixin.qq.com/">dianji</button>

  3. </view>

pages/index/index.js

 
  1. Page({

  2. dianji:function(e){

  3. var webview=e.target.dataset.webview

  4. wx.navigateTo({

  5. url: '/pages/webview/webview?webview='+webview,

  6. })

  7. }

  8. })

pages/webview/webview.wxml

<web-view src="{
   
   {path}}"></web-view>

pages/webview/webview.js

 
  1. onLoad: function (options) {

  2. console.log(options)

  3. var webview=options.webview;

  4. this.setData({

  5. path: webview

  6. })

  7. }

问题2:如何将h5页面跳转到小程序

<button class="btn">跳转到小程序页面</button>

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

//h5页面的按钮点击跳转到小程序 给按钮加点击事件 事件中写以下代码即可

// javascript

​​​​​​​$('.btn).click(function(){wx.miniProgram.navigateTo({url: '/path/share/share'})//这里填要调到哪个小程序页面路径})

如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序

在微信公众平台需要配置一下业务域名,看一下教程吧web-view | 微信开放文档

猜你喜欢

转载自blog.csdn.net/qq_42543264/article/details/109805857