草庐IT

微信小程序开发之——WebView

PGzxc 2024-02-09 原文

一 概述

微信小程序对WebView支持的库有：

  • wxParse：微信小程序富文本解析自定义组件，支持HTML及markdown解析(已过期，不提供支持)
  • web-view：微信官方提供，承载网页的容器(个人类型的小程序暂不支持使用)

二 web-view的基本使用

2.1 基本属性

属性类型说明
srcstringwebview 指向网页的链接
bindmessageeventhandler网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息
bindloadeventhandler网页加载成功时候触发此事件。e.detail = { src }
binderroreventhandler网页加载失败的时候触发此事件。e.detail = { src }

2.2 web-view加载网页

2.2.1 网页内容

<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: lightsalmon;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: auto 0;
            padding: 0 auto;
            height: 100%;
            text-align: center;
        }
    </style>
</head>
<div>
    <h1>网页内容</h1>
</div>
</html>

2.2.2 IIS(Internet Information Services)提供web服务

2.2.3 小程序使用web-view加载网页-1

webview.wxml中使用(src指定网页地址)
<web-view src="http://localhost:8081/html/my-webview.html"></web-view>

2.2.4 小程序使用web-view加载网页-2

webview.wxml中
<web-view  src="{{src}}"></web-view>
webview.js
var webSrc = [
  "http://localhost:8081/html/weichat-webview.html", //网页地址
  "http://localhost:8081/html/my-webview.html"
];

onLoad: function (options) {
    this.setData({
      src: webSrc[1]
    })
  },

2.2.5 效果图

三 web-view和小程序交互传值

3.1 通过bindmessage传值(小程序后退，销毁，分享)

3.1.1 说明

网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息

3.1.2 网页

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
<head>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <!--小程序调用-->
</head>
<body>
    <h1>JavaScript 事件</h1>
    <button onclick="getTime()">时间是？</button>
    <p id="demo"></p>
</body>
<script>
    function getTime() {
        var date = Date();
        document.getElementById('demo').innerHTML = date
        /**小程序调用 */
        wx.miniProgram.navigateBack({delta: 1}); 
        wx.miniProgram.postMessage({ data: date });
    }
</script>
</html>

3.1.3 小程序端-handleGetMessage

  handleGetMessage: function (e) {
    debugger;
    console.log("从WebView返回的数据为：" + JSON.stringify(e.detail.data[0]));
  }

3.1.4 返回结果(返回时，接收到的结果)

3.2 网页直接传值

3.2.1 网页(navigateTo后面拼接参数)

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
<head>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <!--小程序调用-->
</head>
<body>

    <h1>JavaScript 事件</h1>
    <button onclick="getTime()">时间是？</button>
    <p id="demo"></p>
</body>
<script>
    function getTime() {
        var date = Date();
        var data={date:null};
        document.getElementById('demo').innerHTML = date
        wx.miniProgram.navigateTo({url: '/pages/webjump/webjump?data='+JSON.stringify(data)})
    }
</script>
</html>

3.2.2 跳转到结果页面接收数值

webjump.wxml
<text>{{content}}</text>
webjump.js
  onLoad: function (options) {
    debugger
    var data=options.data;
    var con=JSON.stringify(options.data);
    this.setData({
      content:JSON.stringify(options.data)
    })
    console.log("从webview获得的值为：============="+JSON.stringify(options.data));
  },

3.2.3 效果图

四 参考

mdashWebViewgtlt微信小程序

有关微信小程序开发之——WebView的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  4. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

  5. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  10. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

随机推荐