下面内容小编就为大家带来一篇说小程序使用web-view打开网页,微信小程序打开html页面。小编觉得挺不错的,现在就分享给大家,如果你在找在线小程序二维码,滚动商品,小程序关键词,也可以做个借鉴。一起跟随小编过来看看吧。
小程序使用web-view打开网页,微信小程序打开html页面
作者:小程序分析员 发布时间:2017-11-03
经常有学员向子恒老师咨询:
我们有自己的web网站,
已经上传了很多网页信息,
微信小程序中能不能打开网页,
让客户看到内容。
以前小程序里是不支持的,
但是在昨天开始,
你可以在小程序里打开你的网页,
这是微信小程序团队,
11月2号开放的新功能。
[caption id="attachment_4223" align="alignnone" width="1108"] 小程序打开网页[/caption]
示例代码:
一、 小程序打开网页的条件
1) 小程序基础库版本要大于 1.6.4,低版本的小程序需要做兼容处理 2) 网页内容只能在<web-view/>组件中显示,它会自动铺满整个小程序页面 3) 个人类型与海外类型的小程序暂不支持使用web-view组件打开网页二、 小程序web-view组件打开网页示例代码
<!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>三、 web-view组件相关接口
web-view接口1
<web-view/>
网页中可使用JSSDK 1.3.0提供的接口返回小程序页面。 支持的接口有:
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 即将开放 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 即将开放 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 即将开放 |
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
web-view接口2
<web-view/>
网页中仅支持以下JSSDK接口有:
接口模块 | 接口说明 | 具体接口 |
---|---|---|
判断客户端是否支持js | checkJSApi | |
图像接口 | 拍照或上传 | chooseImage |
预览图片 | previewImage | |
上传图片 | uploadImage | |
下载图片 | downloadImage | |
获取本地图片 | getLocalImgData | |
音频接口 | 开始录音 | startRecord |
停止录音 | stopRecord | |
监听录音自动停止 | onVoiceRecordEnd | |
播放语音 | playVoice | |
暂停播放 | pauseVoice | |
停止播放 | stopVoice | |
监听语音播放完毕 | onVoicePlayEnd | |
上传接口 | uploadVoice | |
下载接口 | downloadVoice | |
智能接口 | 识别音频 | translateVoice |
设备信息 | 获取网络状态 | getNetworkType |
地理位置 | 使用内置地图 | getLocation |
获取地理位置 | openLocation | |
摇一摇周边 | 开启ibeacon | startSearchBeacons |
关闭ibeacon | stopSearchBeacons | |
监听ibeacon | onSearchBeacons | |
微信扫一扫 | 调起微信扫一扫 | scanQRCode |
微信卡券 | 拉取使用卡券列表 | chooseCard |
批量添加卡券接口 | addCard | |
查看微信卡包的卡券 | openCard | |
长按识别 | 小程序圆形码 | 无 |
web-view接口3
用户分享时可获取当前<web-view/>
的URL,即在onShareAppMessage
回调中返回webViewUrl
参数。 示例代码:
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})
四、 使用web-view打开网页需要注意的地方
1) 每个页面只能有一个<web-view/> 2) 在iOS中,若存在JSSDK接口调用无响应的情况,可在<web-view/>的src后面加个#wechat_redirect解决。五、 web-view打开网页视频教程
请关注《秦子恒微信课堂》最新课程声明:部分文章或图片未能及时与原作者取得联系,若来源标注错误或侵犯到您的权益烦请告知QQ:2334512685,我们会及时删除。
发布:秦子恒博客,欢迎转载分享,请保留出处。
小程序使用web-view打开网页,微信小程序打开html页面链接:https://www.qinziheng.com/details/4222/
小程序使用web-view打开网页,微信小程序打开html页面相关文章