推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
关于微信小程序webview的使用
发布时间:2020-12-24
小程序微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还 ...
小程序
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下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 指向网页的链接。需登录小程序管理后台配置域名白名单。
<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来授权，就和服务号开发类似。
用户分享时可获取当前的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 "{{url}}">web-view>在这个web-view中，指向的就是https://test.com的内容，所以在在https://test.com中跳转出回到小程序，需要修改https://test.com中的JavaScript,
<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>testtitle> <link rel="stylesheet" href="https://test.com/index.css" /> head> <body> <div class="app"> <h1>webview-wechat-detailh1> <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采坑由于很多使用中的一些问题
