webview 个人小程序_关于微信小程序webview的使用

小程序

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本文主要还是体验了下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 指向网页的链接。需登录小程序管理后台配置域名白名单。

可以配合Page实例的onLoad方法来获取url的具体值,也就是一个微信小程序页面中只有一个web-view,但是这个web-view的内容可以根据上一个页面传递的参数来获取页面URL,后面会讲如何实践,

官方提供如下接口:

web-view和小程序的通信

由小程序到web-view,其实本质上WEB-VIEW也是小程序的一个页面,所以小程序到web-view是正常的小程序间的通信,通过wx.navigateTo、wx.redirectTo,带上url参数,query参数就像正常url的参数一样跟着后面,然后在web-view的页面的Page实例里面通过onLoad的方法的参数来获取url的值,设置给web-view的src属性为改值即可。

由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

在这个web-view中,指向的就是https://test.com的内容,所以在在https://test.com中跳转出回到小程序,需要修改https://test.com中的JavaScript,

test

webview-wechat-detail

detail

返回小程序

/* 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');

}

});

});

});

如果需要使用一些其他的的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使用了公众号授权的服务,开发者工具提示网页开发者的问题,请见:公众号开发

其他的问题注意:

每个页面只能有一个,会自动铺满整个页面,并覆盖其他组件,小程序对webview的监控状态基本没有,只能设置src设置url。

关于小程序和web-view的通信, → 小程序只能通过JSSDK 1.3.0提供的接口返回小程序页面,设置参数来传值,反之,小程序到webview也是一样的,只能是src的路径带上参数;

web-view不支持支付能力,是指无法唤起小程序的直接支付窗口,对于h5的那套支付应该是支持的,但是web-view 里边没法使用 微信支付的 JSAPI,也就是可能可以h5的相关的的支付中心来支付;

关于层级,在webview中可以无限跳转,对于导航条返回和物理键返回都会回到上一个页面直到退出webview,就像history.back。

webview中的html的title会自动放到小程序的头部作为标题;

webview中可以正常使用ajax之类的操作。

一些可能的问题问题汇总

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/557968.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

音频服务器未运行怎么办,音频服务未运行怎么办 音频服务未运行解决方法【详细介绍】...

最近许多网友在使用电脑时遇到了“音频服务未运行”的错误提示,出现这种提示的原因有很多,症状也不尽相同。今天我们就针对不同的“音频服务未运行”症状进行分析解答,希望能对大家有所帮助。由于音频服务未运行可能是硬件配置不正确造成的&a…

jquery查找父窗体id_Vue父组件获取子组件中的变量

全世界只有不到3 % 的人关注了我你真是个特别的人在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的某个值的问题。之前有说过通过ref来让父组…

服务器固态硬盘接口类型,固态硬盘接口都有哪些类型

其实固态硬盘拥有几种接口,根据不同应用场合的固态硬盘一般会有不同的接口。固态硬盘与传统机械硬盘相比,接口规格较多也容易被初用者混淆,因此小编特意整理了一篇名叫“怎么看固态硬盘接口?固态硬盘接口都有哪些类型?”的文章,…

汉字为什么能流传至今_能让历史重新活起来的中国舞,再次席卷而来

如果那些耳熟能详的故事,通过舞蹈重新出现在你的眼前。不再让你仅凭想象,去体会它独一无二的魅力时,你愿意静下心,去重新定义“舞蹈”吗?当书本上的汉字跳跃到你的眼前,当一切虚幻的想象,用舞蹈…

css1vh等于多少px,CSS3 使用 calc() 计算宽度高度vw vh px

windowsr打开运行对话框,输入regedit,点击确定打开注册表 按CtrlF键打开查找对话框,输入C:\Windows\system32\notepad.exe,-469 找到后双击打开 修改其值为T文本文档 然后右键,按W,按T。就可以快速新...PHP去除BOM头的…

php实现小说字典功能_PHP实现生成数据字典功能示例

本文实例讲述了PHP实现生成数据字典功能。分享给大家供大家参考,具体如下:最近时间紧迫,没有时间发博客,趁现在有点时间向大家分享一个知识点。在咱们做开发的时候 ,也许经常会遇到对数据库分析,做一个数据…

我的世界服务器的文件名叫什么,我的世界 外国服务器叫什么名字 | 手游网游页游攻略大全...

发布时间:2015-11-15COD5服务器里改名字颜色 改名字颜色方法1:1. 搜索config_mp.cfg 文件2. 用记事本打开该文件 搜索seta clanName ""3. 在&qu ...标签:使命召唤5:世界战争发布时间:2015-11-10伤害世界Hurtworld服…

java整数翻转_Java程序反转数字

Java程序反转数字在此程序中,您将学习在Java中使用while循环和for循环来反转数字。示例:在Java中使用while循环反转数字public class ReverseNumber {public static void main(String[] args) {int num 1234, reversed 0;while(num ! 0) {int digit n…

友盟消息推送服务器demo,友盟消息推送总结

分享的文章连接1 http://blog.csdn.net/shenjie12345678/article/details/411206372;http://dev.umeng.com/push/ios/integration重点解析:1:如何获得友盟推送的AppKey?1.1登陆到友盟的消息推送界面——>添加应用,出现如下界面…

乒乓球十一分制比赛规则_乒乓球的基本比赛规则

乒乓球是中国国球,是一种世界流行的球类体育项目,包括进攻、对抗和防守。下面小编为大家分享乒乓球的基本比赛规则,欢迎大家参考借鉴。得分和交手流程1、赛前双方互相交换球拍进行检视乒乓球比赛前,为了检查对方的胶皮是否有违规之…

cocos creator 方法数组_基于 Cocos 游戏引擎的音视频研发探索

本文转载自公众号:流利说技术团队(lls_tech)版权归原作者所有本文主要介绍了流利说团队基于 Cocos 游戏引擎进行音视频相关需求开发过程中所遇到的问题和解决方案。文章中将依次阐述 Cocos 引擎直接渲染视频的方案,继而引申出多线程环境下 OpenGL 环境的…

华为服务器双系统教程,服务器上安装双系统

服务器上安装双系统 内容精选换一换Atlas 800 训练服务器(型号 9000)安装上架、服务器基础参数配置、安装操作系统等操作请参见《Atlas 800 训练服务器 用户指南 (型号9000, 风冷)》或《Atlas 800 训练服务器 用户指南 (型号9000, 液冷)》。Atlas 800 训练服务器(型号 9000)适配…

线程销毁_多线程(2)-Java高级知识(9)

前面有一篇文章写的是多线程的基本知识,以及线程实现的两种方式,一种是继承Thread类,另一种实现Runnable 接口,今天沿着前面的多线程,继续分享多线程的第三种创建方法,以及第三种创建方法的优势&#xff0c…

怎么查看服务器系统内存,怎么查看服务器系统内存

怎么查看服务器系统内存 内容精选换一换确认服务器服务是否开启。登录虚拟机内部。执行如下命令,查看系统的端口监听状态,如图1所示。netstat -ntplWindows虚拟机可以在命令行中执行netstat -ano查看系统的端口监听状态,或者查看服务端软件状…

as工程放到源码编译_Flutter源码剖析(二):源码的阅读与调试环境配置

综述 Flutter从架构上来说有3部分:用Dart写的Framework层,面向开发者用Java/Kotlin写的Embdder层(For Android,iOS是OC/Swift),纯Flutter App不需要关心用C写的Engine层,提供Dart运行环境和底层绘制能力针对每个部分&a…

万州哪里有维修服务器,网关可以设在服务器、微机或大型机上

网关可以设在服务器、微机或大型机上。由于网关具有强大的功能并且大多数时候都和应用有关,它们比路由器的价格要贵一些。另外,由于网关的传输更复杂,它们传输数据的速度要比网桥或路由器低一些。正是由于网关较慢,它们有造成网络…

workbook加载文件路径_【Python】文件重命名(按照Excel清单)

问题:1、扫描了很多文件,想批量加上文件编号2、网页下载了一堆图片,批量加上图片分类3、文件命名不规范,想批量调整效果图:需求解析:1、想重命名,就要有原名字和修改后的名字,清单准…

ppap文件过程流程图制作_收藏 | 据说PPAP的精华都在这个PPT里!一起来鉴定下

一组数字的PPAP3种情况必须提交8种情况通知提交5种提交等级3种提交状态18份提交内容“3”——以下3种情况,必须向顾客提交PPAP:1)一种新的零件或产品;2)对以前所提供不符合零件的纠正;3)由于设计记录、规范或材料方面的工程变更从…

++实现 ipv6数据报_IPV6报文格式和IPV4有什么区别?

前言RFC2460定义了IPv6数据报格式。总体结构上,IPv6数据报格式与IPv4数据报格式是一样的,也是由IP报头和数据(在IPv6中称为有效载荷)这两个部分组成的。但在IPv6数据报数据部分还可以包括0个或者多个IPv6扩展报头(Extension header)。正文1IPV6报文格式如…

曲面设计步骤pdf_3dmax模渲大师|室外设计师怎么用3dmax疯狂模渲大师制作室内设计效果图的外景天空?...

3dmax模渲大师|室外设计师怎么用3dmax疯狂模渲大师制作室内设计效果图的外景天空?这次食住玩讲的是第十三章的第1节,3dmax疯狂模渲大师室外设计篇的第1课——“外景天空”的使用方法。在室内设计效果图领域,也有要涉及室外的时候。…