作者:凡人 | 来源:互联网 | 2023-09-24 16:24
小程序开发的时候会遇到有些功能或者页面很难做到小程序页面里面,或者说要图简单,不想花那么多钱来开发小程序,那么可以有一个办法,利用web-view来调用网页显示就好了一、小程序打开
文章目录[隐藏]
- 一、 小程序打开网页的条件
- 二、 小程序web-view组件打开网页示例代码
- 三、 web-view组件相关接口
- web-view接口1
- web-view接口2
- web-view接口3
- 四、 小程序使用web-view打开网页需要注意的地方
小程序开发的时候 会遇到有些功能或者页面很难做到小程序页面里面,或者说要图简单,不想花那么多钱来开发小程序,那么可以有一个办法,利用web-view来调用网页显示就好了
一、 小程序打开网页的条件
1) 小程序基础库版本要大于 1.6.4,低版本的小程序需要做兼容处理
2) 网页内容只能在组件中显示,它会自动铺满整个小程序页面
3) 个人类型与海外类型的小程序暂不支持使用web-view组件打开网页
二、 小程序web-view组件打开网页示例代码
三、 web-view组件相关接口
web-view接口1
网页中可使用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 |
参数与小程序接口一致 |
即将开放 |
示例代码:
// Javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
web-view接口2
网页中仅支持以下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
用户分享时可获取当前
的URL,即在onShareAppMessage
回调中返回webViewUrl
参数。 示例代码:
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})
四、 小程序使用web-view打开网页需要注意的地方
1) 每个页面只能有一个
2) 在iOS中,若存在JSSDK接口调用无响应的情况,可在的src后面加个#wechat_redirect解决。