小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下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.js
Page({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之类的操作。
一些可能的问题问题汇总

关于微信小程序webview的使用 1相关推荐

微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
关于微信小程序webview的使用
小程序微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.同时提供一系列工具帮助开发者快速接入并完成小程序开发.关于如何注册配置就不多言了,本文主要 ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
开发那点事（十五）微信小程序webView首次进入白屏优化方案
写在前面的话公司最近项目已经进入使用阶段,从用户那边反应过来的问题,说小程序打开太慢,中间白屏几秒,于是想办法来做一个等待效果. 优化后效果具体实现(已vue为例) 按照正常的思路,路由按需加载. ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
微信小程序web-view公众号与小程序支付的切换使用
微信小程序web-view公众号与小程序支付间的切换使用最近小程序开放了新功能,支持内嵌网页.html写的网页,官网,网站,运行在浏览器上的,有域名的那种,可以内嵌到小程序里了! 那么这意味着什么呢 ...
微信小程序 - webview 的使用
为什么80%的码农都做不了架构师?>>> 使用 webview 可以让小程序内嵌网页,利用这个功能可以实现些在微信小程序环境中受到局限的功能,当然也有一些坑,在此分享下. 介绍 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...

关于微信小程序webview的使用 1

小程序

web-view详解

web-view能力

兼容

使用

web-view实践

web-view采坑

关于微信小程序webview的使用 1相关推荐

最新文章

热门文章