微信小程序webview和小程序通讯

news2024/12/23 22:24:21

1.背景介绍

1.1需要在小程序嵌入vr页面，同时在vr页面添加操作按钮与小程序进行通信交互

1.2 开发工具：uniapp开发小程序

1.3原型图

        功能：.点击体验官带看跳转小程序的体验官带看页面

         功能：点击立即咨询唤起小程序弹窗打电话

2.组件及api介绍

uniapp官网：web-view | uni-app官网 (dcloud.net.cn)

web-view

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

属性说明

属性名类型说明平台差异说明
srcStringwebview 指向网页的链接
allowString用于为 iframe 指定其特征策略H5
sandboxString该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。H5
fullscreenBoolean是否铺满整个页面，默认值：true。H5 (HBuilder X 3.5.4+)
webview-stylesObjectwebview 的样式App-vue
update-titleBoolean是否自动更新当前页面标题。默认值：trueApp-vue (HBuilder X 3.3.8+)
@messageEventHandler网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。H5 暂不支持（可以直接使用 window.postMessage）
@onPostMessageEventHandler网页向应用实时 postMessageApp-nvue
@loadEventHandler网页加载成功时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序
@errorEventHandler网页加载失败的时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序

在小程序端，用法和iframe类似，直接在src赋值在线地址

<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

注意：

  • 小程序仅支持加载网络网页，不支持本地html
  • 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
  • 小程序平台， src 指向的链接需登录小程序管理后台配置域名白名单。
  • 小程序平台，个人类型与海外类型的小程序使用 web-view 组件，提交审核时注意微信等平台是否允许使用
  • 小程序的web-view使用的是小程序自带的浏览器内核，不同厂商不一样，详见
  • 各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

<web-view> 加载的网页中支持调用部分 uni 接口：

方法名说明平台差异说明
uni.navigateTonavigateTo
uni.redirectToredirectTo
uni.reLaunchreLaunch
uni.switchTabswitchTab
uni.navigateBacknavigateBack
uni.postMessage向应用发送消息抖音小程序不支持、H5 暂不支持（可以直接使用 window.postMessage）
uni.getEnv获取当前环境抖音小程序与飞书小程序不支持

uni.postMessage(OBJECT)

网页向应用发送消息，在 <web-view> 的 message 事件回调 event.detail.data 中接收消息。

Tips

  • 传递的消息信息，必须写在 data 对象中。
  • event.detail.data 中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小程序除外，支付宝小程序中以对象形式接受）

#uni.getEnv(CALLBACK)

callback 返回的对象

属性类型说明
plusBooleanApp
nvueBooleanApp-nvue, uni.webview.1.5.4.js+ 支持
miniprogramBoolean微信小程序
smartprogramBoolean百度小程序
miniprogramBoolean支付宝小程序

3.实际操作

下面直接来看示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <!-- 引入ui库vant的样式 -->
  <link rel="stylesheet" href="./vant.css">
  <!-- 引入自定义的全局样式 -->
  <link rel="stylesheet" href="./global.css">
  <!-- 引入页面样式文件 -->
  <link rel="stylesheet" href="./index.css">

</head>

<body>
  <div id="app">
    <div class="flex-1">
      <!-- 嵌入iframe展示vr页面 -->
      <iframe class="iframe" src="https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx" allowfullscreen="true"
        frameborder="0"></iframe>
    </div>
    <main>
      <!-- 底部操作按钮 -->
      <div class="ptb-10 flex-vcenter flex-between">
        <van-button type="info" @click="handleLook">体验馆带看</van-button>
        <van-button type="info" @click="handleRoom">看房型</van-button>
        <van-button type="info" @click="handleAsk">立即咨询</van-button>
      </div>
      <!-- 看房型的弹窗 -->
      <van-popup v-model="showRoomPopup" round position="bottom" :overlay="false"
        :style="{ minHeight: '10%',padding: '15px 10px 10px',background: 'rgba(0,0,0,.7)' }">
        <div class="co-white pb-15" style="position: relative;">
          <p class="text-center">房型预览</p>
          <div @click="showRoomPopup = false" class="arrow-down-wrap flex-vcenter">
            <span class="fs-12 mr-5">收起</span>
            <van-icon name="arrow-down" />
          </div>
        </div>
        <van-grid class="rooms-wrap" :column-num="3">
          <van-grid-item v-for="(item,index) in urlParams.rooms" :key="index">

            <div class="co-white rooms-item" @click="goRoom(item.url)">
              <p class="rooms-content">{{item.name}}</p>
              <van-image width="100%" height="100%" fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </div>
          </van-grid-item>
        </van-grid>
      </van-popup>
    </main>
  </div>

  <!-- 需要引入的文件 -->
  <!-- vue -->
  <script type="text/javascript" src="./vue.min.js"></script>
  <!-- vant ui库 -->
  <script type="text/javascript" src="./vant.min.js"></script>
  <!--  微信小程序 JS-SDK  -->
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <!-- 与uniapp建立连接 -->
  <script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
  <!-- 页面的js文件 -->
  <script type="text/javascript" src="./index.js"></script>
</body>

</html>
  • 因为使用的vantUi库，所以下载了vant.min.js，想用vue开发所以下载了vue.min.js，这2个不重要
  • 需要引入微信小程序 JS-SDK <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  • 与uniapp建立连接，引入hellouniapp.dcloud.net.cn/hybrid/html/uni.webview.1.5.5.js，可以下载到本地

调用api与小程序通信

new Vue({
  el: '#app',
  components: {
  },
  data () {
    return {
      urlParams: {
        rooms: []
      },
      showRoomPopup: false
    }
  },
  computed: {
  },
  created () {
  },
  watch: {
  },
  mounted () {
    const { params } = this.urlToObj(location.href)
    if (params) {
      this.urlParams = JSON.parse(decodeURI(params))
    }
    document.addEventListener('UniAppJSBridgeReady', () => {
      uni.getEnv((res) => {
        console.log('当前环境：' + JSON.stringify(res));
      });
    })
  },
  methods: {
    // url参数转对象
    urlToObj (url) {
      let obj = {};
      if (url.indexOf('?') >= 0) {
        let str = url.slice(url.indexOf('?') + 1);
        let arr = str.split('&');
        console.log(str, arr)

        for (let j = arr.length, i = 0; i < j; i++) {
          let arr_temp = arr[i].split('=');
          obj[arr_temp[0]] = arr_temp[1];
        }
      }
      return obj;
    },

    // 点击体验官带看
    handleLook () {
      // 跳转到小程序的某个页面
      uni.navigateTo({
        url: '/pages/vr/look'
      });
    },
    // 点击看房型
    handleRoom () {
      console.log(this.urlParams)
      this.showRoomPopup = true;
    },
    goRoom (url) {
      // 跳转到小程序的某个页面
      uni.navigateTo({
        url: `/pages/vr/room?url=${url}`
      });
    },
    // 点击咨询
    handleAsk () {
      // 发送消息给小程序
      uni.postMessage({
        data: {
          action: '咨询'
        }
      });
      // 因为网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 所以用uni.redirectTo触发小程序的重新加载实时接收消息
      uni.redirectTo({
        url: '/pages/vr/vr'
      });
    }
  }
})

页面预览效果：

小程序端代码参考

<template>
  <web-view :src="vrUrl" @message="onMessage"></web-view>
</template>

<script>
import { callPhone } from '@/utils';
export default {
  data() {
    return {
      vrUrl:
        // 这里要换成你的在线网页地址，我这里写的是本地的
        `http://127.0.0.1:5500/vr-demo/index.html?params=` +
        encodeURI(
          JSON.stringify({
            rooms: [
              {
                name: '房间1',
                url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx',
              },
              {
                name: '房间2',
                url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx',
              },
            ],
          })
        ),
    };
  },
  onLoad(props) {
    console.log(props);
  },
  methods: {
    // 接收webview传来的消息
    onMessage(e) {
      const { data } = e.detail;
      console.log(
        data,
        'web-view传来的信息,在小程序后退、组件销毁、分享会触发'
      );
      console.log(data.at(-1));
      if (data?.at(-1)?.action === '咨询') {
        callPhone('18205236589');
      }
    },
  },
};
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

React-RTK

React-RTK

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-RTK 目录 1、介绍 2、安装 3、编写RTK使用示例 4、官方提供项目包示例 创建 Redux …
阅读更多...
uniapp中vue写微信小程序的生命周期差别

uniapp中vue写微信小程序的生命周期差别

根据uniapp官网里的生命周期&#xff0c;感觉不太对劲&#xff0c;就自己测试了几个&#xff0c;发现有所差别。 红字数字 为 实际测试生命周期顺序。 因为需要页面传参 后再 初始化数据&#xff0c;而onLoad(option)接收参数后&#xff0c;就已经过了create()了&#xff0c;所…
阅读更多...
tokio多任务绑定cpu(绑核)

tokio多任务绑定cpu(绑核)

tokio 是 rust 生态中流行的异步运行时框架。在实际生产中我们如果希望 tokio 应用程序与特定的 cpu core 绑定该怎么处理呢&#xff1f; 首先我们先写一段简单的多任务程序。 use tokio; use tokio::runtime; use core_affinity;fn tokio_sample() {let rt runtime::Builde…
阅读更多...
3.SpringCloud版本

3.SpringCloud版本

1.SpringCloud与SpringBoot之间版本对应 2.服务拆分的注意事项 1.不同微服务&#xff0c;不要重复开发相同业务。 2.微服务的数据独立&#xff0c;每个微服务都有自己独立的数据库&#xff0c;不要访问其他微服务的数据库。 3.微服务可以将自己的的业务暴露为接口&#xff…
阅读更多...
C++：基础语法

C++：基础语法

一、命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xff0c; 以避免命名冲突或名字污染&#xff0c;n…
阅读更多...
24V转2.8V2A降压芯片WT6030

24V转2.8V2A降压芯片WT6030

24V转2.8V2A降压芯片WT6030 WT6030是一种高效同步整流降压开关模式转换器&#xff0c;集成内部功率MOSFET。该器件在宽输入电源范围内提供3A峰值输出电流&#xff0c;展现出卓越的负载和线路调节性能。其设计仅需要最小数量的外部现成组件&#xff0c;并且采用了节省空间的ESO…
阅读更多...
GITHUB的VB代码无法加载的问题解决

GITHUB的VB代码无法加载的问题解决

GITHUB里有不少好的VB代码&#xff0c;但是下载之后&#xff0c;经常出现工程加载出错的问题&#xff0c;例如&#xff1a; LOG文件为&#xff1a; 不能加载 0 行 0: 不能加载文件 D:\xxxx\Semi VB API Loader\frmMain.frm 。 原因其实很简单&#xff0c;github里的换行符是u…
阅读更多...
如何在PostgreSQL中使用索引覆盖扫描提高查询性能？

如何在PostgreSQL中使用索引覆盖扫描提高查询性能？

文章目录 解决方案1. 创建合适的索引2. 确保查询能够使用索引覆盖扫描3. 调整查询以利用索引覆盖扫描4. 监控和调优 示例代码1. 创建索引2. 编写查询3. 检查是否使用索引覆盖扫描4. 调整索引 总结 在PostgreSQL中&#xff0c;索引是提高查询性能的关键工具之一。索引允许数据库…
阅读更多...
C# 字面量null对于引用类型变量✓和值类型变量×

C# 字面量null对于引用类型变量✓和值类型变量×

编译器让相同的字符串字面量共享堆中的同一内存位置以节约内存。 在C#中&#xff0c;字面量&#xff08;literal&#xff09;是指直接表示固定值的符号&#xff0c;比如数字、字符串或者布尔值。而关键字&#xff08;keyword&#xff09;则是由编程语言定义的具有特殊含义的标…
阅读更多...
积极探索新质生产力，九河云携手华为云技术交流引领数智跃迁

积极探索新质生产力，九河云携手华为云技术交流引领数智跃迁

4月18日&#xff0c;九河云携手华为云举办了华为云SA技术培训会议&#xff0c;培训邀请到华为云技术人员作为主讲人&#xff0c;通过理论讲解与案例结合的方式&#xff0c;围绕ECS和EBS之间的联动&#xff0c;调优和数据保护等方面展开&#xff0c;深入浅出地讲解了基于EBS部署…
阅读更多...
Python从0到100（十四）：高级函数及函数使用进阶

Python从0到100（十四）：高级函数及函数使用进阶

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…
阅读更多...
【机器学习】分类与预测算法的评价与优化

【机器学习】分类与预测算法的评价与优化

以实际案例解析F1值与P-R曲线的应用 一、分类算法与性能评价的重要性二、F1值与P-R曲线的概念与意义三、实例解析&#xff1a;以垃圾邮件检测为例四、代码实现与结果分析五、结论与展望 在数据驱动的时代&#xff0c;机器学习算法以其强大的数据处理和分析能力&#xff0c;成为…
阅读更多...
day07 51单片机-18B20温度检测

day07 51单片机-18B20温度检测

18B20温度检测 1.1 需求描述 本案例讲解如何从18B20传感器获取温度信息并显示在LCD上。 1.2 硬件设计 1.2.1 硬件原理图 1.2.3 18B20工作原理 可以看到18B20有两根引脚负责供电&#xff0c;一根引脚负责数据交换。18B20就是通过数据线和单片机进行数据交换的。 1&#xf…
阅读更多...
PROSAIL模型前向模拟与植被参数遥感提取代码实现

PROSAIL模型前向模拟与植被参数遥感提取代码实现

原文链接&#xff1a;PROSAIL模型前向模拟与植被参数遥感提取代码实现https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247602140&idx7&sn7c4ca9239865d536ba81ba4c26a34031&chksmfa820e3bcdf5872d540c0dfe8c533c8696c8b4658427aab254f246a739f96b36bc37…
阅读更多...
GPT 在目标设定中的应用：实现梦想的技术方法

GPT 在目标设定中的应用：实现梦想的技术方法

在技术快速进步的时代&#xff0c;我们设定和实现目标的方式正在不断发展。 该领域最重要的创新之一是引入生成式预训练 Transformer (GPT)。 本文将探讨 GPT 技术如何彻底改变目标设定的艺术&#xff0c;提供实用的见解和案例研究来展示其影响。 GPT 和目标设定简介 ​ 了解 …
阅读更多...
Ansible安装基本原理及操作(初识)

Ansible安装基本原理及操作(初识)

作者主页&#xff1a;点击&#xff01; Ansible专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月23日15点18分 Ansible 是一款功能强大且易于使用的IT自动化工具&#xff0c;可用于配置管理、应用程序部署和云端管理。它使用无代理模式&#xff08;agentles…
阅读更多...
控制台居然可以这么玩？五分钟带你上手ANSI指令，实现一个log工具包

控制台居然可以这么玩？五分钟带你上手ANSI指令，实现一个log工具包

目录 前言 基础知识 进阶实践 ANSI参数 ANSI类 JSLog类 工具的使用说明 配置相关 全局配置项 默认配置 基本用法 打印字符 添加全局配置项 清空所有样式及操作行为 校验传入的参数是否正确 样式控制 Node环境 浏览器中 光标控制指令 光标位置偏移 滚动条控…
阅读更多...
Pytorch：张量的梯度计算

Pytorch：张量的梯度计算

目录 一、自动微分简单介绍1、基本原理2、梯度计算过程3、示例&#xff1a;基于 PyTorch 的自动微分a.示例详解b.梯度计算过程c.可视化计算图 4、总结 二、为什么要计算损失&#xff0c;为何权重更新是对的&#xff1f;1、梯度下降数学原理2、梯度上升 三、在模型中使用自动微分…
阅读更多...
力扣HOT100 - 199. 二叉树的右视图

力扣HOT100 - 199. 二叉树的右视图

解题思路&#xff1a; 相当于层序遍历&#xff0c;然后取每一层的最后一个节点。 class Solution {public List<Integer> rightSideView(TreeNode root) {if (root null) return new ArrayList<Integer>();Queue<TreeNode> queue new LinkedList<>…
阅读更多...
element中file-upload组件的提示‘按delete键可删除’，怎么去掉？

element中file-upload组件的提示‘按delete键可删除’，怎么去掉？

问题描述 element中file-upload组件会出现这种提示‘按delete键可删除’ 解决方案&#xff1a; 这是因为使用file-upload组件时自带的提示会盖住上传的文件名&#xff0c;修改一下自带的样式即可 ::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023