分享主题:linux,nginx,php,mysql

小程序使用web-view打开网页,微信小程序打开html页面

小程序开发 0评论 现在加入小程序俱乐部QQ群:483987340
                   
上面视频出自《秦子恒微信课堂》 | 猛击这里,查看《小程序web-view高级用法》完整系列视频教程,下载视频中的源代码

经常有学员向子恒老师咨询:

我们有自己的web网站,

已经上传了很多网页信息,

微信小程序中能不能打开网页,

让客户看到内容。

以前小程序里是不支持的,

但是在昨天开始,

你可以在小程序里打开你的网页,

这是微信小程序团队,

11月2号开放的新功能。

小程序打开网页

小程序打开网页

一、 小程序打开网页的条件

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:58842997,我们会及时删除。
秦子恒公众号

来源:秦子恒博客,欢迎转载分享,请保留出处

小程序使用web-view打开网页,微信小程序打开html页面链接:https://www.qinziheng.com/xiaochengxudev/4222.htm

现在就加入微信开发QQ群2:483987340,跟同行探讨微信公众平台开发。群满就关闭,你得等到下一个群开通才能加入……

喜欢 (0)