[移动开发] 微信小程序开发之—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序开发之——WebView -> 正文阅读

[移动开发]微信小程序开发之——WebView

一概述

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

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

二 web-view的基本使用

2.1 基本属性

属性	类型	说明
src	string	webview 指向网页的链接
bindmessage	eventhandler	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息
bindload	eventhandler	网页加载成功时候触发此事件。e.detail = { src }
binderror	eventhandler	网页加载失败的时候触发此事件。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));
  },