web-view 是一个可以承载 web 网页的容器,当 WXML 文件中存在 web-view 组件时,其他组件会自动全部失效,而且 web-view 承载的组件会自动铺满小程序的整个页面。其他组件的内容将不再显示。

使用方法:

  <web-view src="https://baidu.com"></web-view>

注意事项:

  1. src 属性的值是一个网页链接,且该链接必须在小程序管理后台中的域名白名单中。

  2. 用户在分享是可以获取当前页面 <web-view> 的 src 的值,在页面的 onShareAppMessage 事件中可以获取到该值。

    即:onShareAppMessage:function( options ){

        console.log( options.webVIewUrl );

        // 可进行下一步操作

      }

其他功能(主要是 JSSDK 1.3.0 提供的功能):

  1. 功能描述:

     在 web-view 内嵌的网页中可以使用 JSSDK 1.3.0 提供的接口返回小程序页面。前提是必须在网页中引入 js 文件。

   使用方法:

     1. 页面中引入 js 文件:<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

     2. 使用提供的接口返回小程序页面:

       wx.miniProgram.navigateTo,参数与用法和小程序中的 wx.navigateTo 用法一致。

       wx.miniProgram.navigateBack,参数与用法和小程序中的 wx.navigateBack 用法一致。

       wx.miniProgram.switchTab,参数与用法和小程序中的 wx.switchTab 用法一致。

       wx.miniProgram.reLaunch,参数与用法和小程序中的 wx.reLaunch 用法一致。

       wx.miniProgram.redirectTo,参数与用法和小程序中的 wx.redirectTo 用法一致。

         示例:   wx.miniProgram.navigateTo({

               url: "pages/personal/personal"

             })

  2. 功能描述:

     在 web-view 内嵌的网页中可以使用 JSSDK 1.3.0 提供的方法判断当前页面是否存在于小程序环境中。

    使用方法:

     wx.ready(function() {

       // console.log(window.__wxjs_environment === 'miniprogram') // true
       if(
window.__wxjs_environment === 'miniprogram' ){
         // 如果在小程序中,做相应处理
       }
     })

     

微信小程序中的 web-view 组件的更多相关文章

  1. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  2. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  3. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  4. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  5. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  6. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  7. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  8. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  9. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  10. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

随机推荐

  1. [2018HN省队集训D1T1] Tree

    [2018HN省队集训D1T1] Tree 题意 给定一棵带点权树, 要求支持下面三种操作: 1 root 将 root 设为根. 2 u v d 将以 \(\operatorname{LCA} (u ...

  2. Alpha 冲刺报告

    Alpha 冲刺报告(4/10) 队名:洛基小队 峻雄(组长) 已完成:继续行动脚本的编写 明日计划:尽量完成角色的移动 剩余任务:物品背包交互代码 困难:具体编码进展比较缓慢 ----------- ...

  3. Hive学习之路 (十五)Hive分析窗口函数(三) CUME_DIST和PERCENT_RANK

    这两个序列分析函数不是很常用,这里也练习一下. 数据准备 数据格式 cookie3.txt d1,user1, d1,user2, d1,user3, d2,user4, d2,user5, 创建表 ...

  4. Hive学习之路 (十)Hive的高级操作

    一.负责数据类型 1.array 现有数据如下: 1 huangbo guangzhou,xianggang,shenzhen a1:30,a2:20,a3:100 beijing,112233,13 ...

  5. Odoo发送短信

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9281581.html 一:阿里云短信服务注册 1:开通短信业务:实名认证的个人用户是免费开通:企业用户需要提供 ...

  6. glusterfs分布式文件系统

    第一:安装依赖包: yum install libibverbs librdmacm xfsprogs nfs-utils rpcbind libaio liblvm2app  lvm2-devel ...

  7. 20145203盖泽双 《Java程序设计》第7周学习总结

    20145203盖泽双 <Java程序设计>第7周学习总结 教材学习内容总结 1.如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 2.在只有Lambda表达式的情况下,参数 ...

  8. MySQL插入emoji表情失败问题的解决方法

    前言 之前一直认为UTF-8是万能的字符集问题解决方案,直到最近遇到这个问题.最近在做新浪微博的爬虫, 在存库的时候发现只要保持emoji表情,就回抛出以下异常: Incorrect string v ...

  9. 【转】python中的对象拷贝

    转自:https://www.cnblogs.com/bhlsheji/p/5352330.html python中.进行函数參数传递或者返回值时,假设是一般的变量,会拷贝传递.假设是列表或字典则是引 ...

  10. C#反射使用时注意BindingFlags的用法(转载)

    最近刚刚开始用反射做项目,遇到一个小的知识点,记录一下. c#反射查找方法时,默认只能查到public方法.如果想要查找private方法,需要设定BindingFlags.    即: Bindin ...