微信小程序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

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

pages/index/index.js

Page({
dianji:function(e){
var webview=e.target.dataset.webview
wx.navigateTo({
url: '/pages/webview/webview?webview='+webview,
})
}
})

pages/webview/webview.wxml

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

pages/webview/webview.js

onLoad: function (options) {
console.log(options)
var webview=options.webview;
this.setData({
path: webview
})
}

问题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 | 微信开放文档

微信小程序web-view的使用教程相关推荐

控制微信小程序web view的返回按钮
需求:点击web-view页面的左上角返回按钮时,显示弹窗,点击取消或确认后才能返回.(实际上点击返回按钮会直接返回上一页) 解决方法:由于webview使用的是微信浏览器打开的,我们可以使用js的H ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
微信小程序云开发初学者入门教程二
微信小程序云开发初学者入门教程二-前端操作数据库模块如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的 ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
PbootCMS微信小程序API的封装使用教程
PbootCMS微信小程序API的封装使用教程原文网址:https://www.lkcms.top/rgcms/58.html 第一步:准备md5加密文件 PbootCMS的签名参数signatur ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结【文末附源码】
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 文章目录微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 1️⃣ 写在前面 2️⃣ 蓝牙连接流程 3 ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...

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

微信小程序web-view的使用教程相关推荐

最新文章

热门文章