关于微信小程序webview的使用
来源:互联网 发布:数据文件恢复软件 编辑:程序博客网 时间:2024/06/06 02:42
小程序
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本文主要还是体验了下web-view
的功能。
web-view详解
有了这个组件之后,小程序可以很好的嵌入一些页面,可以环境小程序size
告急的问题,同样也使开发更加便捷,毕竟小程序开发者基本都对前端开发较为了解。
web-view能力
说再多还是需要去看官方文档,web-view文档,
兼容
首先就需要注意:兼容问题,版本库和对应版本比例
基础库 1.6.4 开始支持,低版本需做兼容处理,
个人类型与海外类型的小程序暂不支持使用。
目前而言,基本80%
的用户会升级微信,所以其实不必担心版本问题,官方截止2017-12-01
提供的数据也说明88%
的用户支持web-view
。
使用
web-view
组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面;
属性:src
是String
类型,是一个网站的url
,默认值是none
,webview
指向网页的链接。需登录小程序管理后台配置域名白名单。
<!-- wxml --><!-- 指向微信公众平台首页的web-view --><web-view src="https://mp.weixin.qq.com/"></web-view>
可以配合Page
实例的onLoad
方法来获取url
的具体值,也就是一个微信小程序页面中只有一个web-view
,但是这个web-view
的内容可以根据上一个页面传递的参数来获取页面URL
,后面会讲如何实践,
官方提供如下接口:
web-view
和小程序的通信
1. 由小程序到`web-view`,其实本质上`WEB-VIEW`也是小程序的一个页面,所以小程序到`web-view`是正常的小程序间的通信,通过`wx.navigateTo`、`wx.redirectTo`,带上`url`参数,`query`参数就像正常`url`的参数一样跟着后面,然后在`web-view`的页面的`Page`实例里面通过`onLoad`的方法的参数来获取`url`的值,设置给`web-view`的`src`属性为改值即可。
2. 由`web-view`到小程序,由于在`web-view`的跳转通常是在`src`对应的网页中的操作来处理的,所以需要结合`jssdk`来处理,不需要`wx.config`配置,直接通过`script`标签来引入`https://res.wx.qq.com/open/js/jweixin-1.3.0.js`,就可以使用`wx.miniProgram.navigateTo`、`wx.miniProgram.navigateBack`、`wx.miniProgram.switchTab`、`wx.miniProgram.reLaunch`、`wx.miniProgram.redirectTo`接口,就像小程序之间的跳转一样,单是只能在当前小程序页面内跳转。
- 支持以下部分JSSDK接口图像、音频、摇一摇、地理位置等信息,具体可以查看web-view文档,不过这些需要通过
wx.config
来授权,就和服务号开发类似。 - 用户分享时可获取当前
<web-view/>
的URL
,即在onShareAppMessage
回调中返回webViewUrl参数。
Page({ onShareAppMessage(options) { console.log(options.webViewUrl) }})
- 在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。
// web-view下的页面内
console.log(window.__wxjs_environment === 'miniprogram') // true
web-view实践
在目前实践了部分web-view
的功能,
//index.jsPage({ data: { url: 'https://test.com' }, onLoad: function(options){ options.url ? this.setData({url: options.url}) : wx.navigateBack({delta: 2}); }});//index.wxml<web-view src="{{url}}"></web-view>
在这个web-view
中,指向的就是https://test.com
的内容,所以在在https://test.com
中跳转出回到小程序,需要修改https://test.com
中的JavaScript
,
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <link rel="stylesheet" href="https://test.com/index.css" /></head><body> <div class="app"> <h1>webview-wechat-detail</h1> <p> detail </p> <button type="button" id="btn">返回小程序</button> </div> <script src="https://test.com/jquery.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script> <script> /* eslint-disable */$(function(){ doucument.cookie = 'bb=bbbbbb'; $('#btn').on('click',function(s) { document.cookie = 'aa=ssssss'; wx.miniProgram.navigateTo({ url:'/pages/index?test=testtest', success: function(){ console.log('success') }, fail: function(){ console.log('fail'); }, complete:function(){ console.log('complete'); } }); }); }); </script></body></html>
如果需要使用一些其他的的jssdk
的方法,那就需要参照公众号的开发配置了。
web-view采坑
由于很多使用中的一些问题
1.打开的域名没有在小程序管理后台设置业务域名(注意是业务域名,不是服务器域名)
2.打开的页面必须为https服务
3.打开的页面302过去的地址也必须设置过业务域名
4.web-view空白问题,请升级微信客户端到 6.5.16
5.页面可以包含iframe,但是iframe的地址必须为业务域名
6.web-view不支持支付能力,web-view的API能力见web-view的文档说明
7.开发者自己检查自己的https服务是否正常,测试方法:普通浏览器打开对应的地址
8.如果web-view使用了公众号授权的服务,开发者工具提示网页开发者的问题,请见:公众号开发
其他的问题注意:
- 每个页面只能有一个<web-view/>,<web-view/>会自动铺满整个页面,并覆盖其他组件,小程序对webview的监控状态基本没有,只能设置src设置url。
- 关于小程序和web-view的通信,<web-view/> → 小程序只能通过JSSDK 1.3.0提供的接口返回小程序页面,设置参数来传值,反之,小程序到webview也是一样的,只能是src的路径带上参数;
- web-view不支持支付能力,是指无法唤起小程序的直接支付窗口,对于h5的那套支付应该是支持的,但是web-view 里边没法使用 微信支付的 JSAPI,也就是可能可以h5的相关的的支付中心来支付;
- 关于层级,在webview中可以无限跳转,对于导航条返回和物理键返回都会回到上一个页面直到退出webview,就像
history.back
。 - webview中的html的title会自动放到小程序的头部作为标题;
- webview中可以正常使用ajax之类的操作。
- 一些可能的问题问题汇总
本文作者:caoweiju
原文地址:关于微信小程序webview的使用-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
- 关于微信小程序webview的使用
- 关于WebView的使用
- 关于webview的使用
- webView的使用小程序
- 关于WebVIew的使用详解
- 关于webview的使用详解
- Android中关于WebView的使用办法
- 关于iOS8 webView的使用建议,
- 关于使用webview的一个注意项
- 关于使用webview的一些记录
- Android中关于WebView的使用总结
- 关于使用webView的一些细节问题
- 关于WebView使用,内存泄漏的问题
- 关于使用WebView的一些问题
- Android 关于WebView全方面的使用
- 关于android的WebView
- 关于webview的一切
- 关于webview的补充
- 用JavaScript阻止事件冒泡
- Datax 数据抽取同步
- java单例模式总结
- Linux端配置tomcat服务
- java | return break continue
- 关于微信小程序webview的使用
- numpy的函数用法
- 算法(4)计数排序
- GNOME3输入法
- 结构体排序问题
- 使用JDK自带工具jstat发现内存泄露问题
- eclipse Java 内存溢出内存溢出(java.lang.OutOfMemoryError)的解决方法
- 经久不衰的Spring框架:Spring+SpringMVC+MyBatis 整合
- 物联网、云计算、大数据、人工智能之间关系浅析