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

ゝ一纸荒年。 2022-12-22 09:24 236阅读 0赞

**最近公司有需求，需要点击小程序首页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.   
5.  `wx.navigateTo({`
6.  `url: '/pages/webview/webview?webview='+webview,`
7.  `})`
8.  `}`
9.  `})`

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'})//这里填要调到哪个小程序页面路径})

在微信公众平台需要配置一下业务域名,看一下教程吧[https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]

[https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html