小程序端

<template>
<div>
<web-view :webview-styles="webviewStyles" :src="webViewUrl" @message="getMessage"></web-view>
</div>
</template> <script>
export default {
data() {
return {
url: '44444',
progress: { color: '#FF3333' }
}
},
created() {
this.webViewUrl =
`http://192.168.101.25:5173/?data=${encodeURIComponent(this.url)}` //pdf地址添加参数
},
onLoad() { },
methods: {
getMessage(data) {
     uni.showToast({
title: "reciveMessage接收到消息:" + JSON.stringify(data.detail),
duration: 2000,
icon: 'none'
});
console.log("接收到消息:" + JSON.stringify(data.detail));
},
},
}
</script>

h5 端

npm i weixin-js-sdk
//下载微信sdk

<template>
<view class="content">
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="">
{{data}}
</view>
<button @click="chufa">点击</button>
<button @click="tiaozhuan">点击</button>
</view>
</template>
<script>
import wx from 'weixin-js-sdk';
export default {
data() {
return {
title: 'Hello',
data:{}
}
},
onLoad(e) {
this.data=e
},
methods: {
chufa(){
// 传参
wx.miniProgram.postMessage({
data: {
action: '我要向微信端传递的数据',
phoneNumber: '15314601234'
}
});
},
tiaozhuan(){
// 跳转小程序路由
const name = '天天'
wx.miniProgram.navigateTo({
url: `/pages/user/user?name=${name}` , // 小程序地址
success () {
console.log('question success')
},
fail (error) {
console.log(error)
}
}) }
}
}
</script>

uniapp h5 和 小程序互相传值的更多相关文章

  1. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  2. 前端生成分享海报兼容H5和小程序

    ### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果

  3. 使用uView UI+UniApp开发微信小程序

    在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...

  4. uniapp的微信小程序,获取授权,获取中文街道地理位置

    w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...

  5. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  6. 基于uni-app的微信小程序之分包

    作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 0. 缘由 1. 关于分包 1.0 这是 官方文档 1.1 注意事项 2.使用方法 2.1 首先你得有个uniapp的微信小程序项目 2.2 ...

  7. uni-app开发经验分享十九: uni-app对接微信小程序直播

    uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情>      记录这两个参数直播 ...

  8. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...

  9. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  10. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

随机推荐

  1. OIDC – OpenIddict Core

    3 选 1 IdentityServer 4 本来 IdentityServer 4 一直都是首选的, 但在 2020 年他们决定成立公司, IdentityServer 5 就开始收费了. The ...

  2. Figma 学习笔记 – Scroll and Position Fixed

    Scroll Scroll 属于 prototype 的一部分. 当一个 Frame 的内容超出 Frame 的高度或宽度时, Frame 就具备了 scroll 的能力. 通过 uncheck cl ...

  3. 微信js-sdk接入原理

    1.有一个微信公众号,并获取到该公众号的AppID和AppSecret. 其中AppID是可以对外公开的,AppSecret是该公众号的密钥,是需要绝对保密的 2.向微信服务器发送一个GET请求,获取 ...

  4. 使用 Flutter 3.19 更高效地开发

    我们已隆重推出全新的 Flutter 版本--Flutter 3.19.此版本引入了专为 Gemini 设计的新 Dart SDK.一个能让开发者对 Widget 动画实现精细化控制的全新 Widge ...

  5. 阿里云Centos7修改MariaDB数据库连接时间,解决连接mysql报Too many connection的问题

    在测项目的时候突然发现数据库连接不上了,提示Too many connection. 产生问题的原因是MySQL的Sleep进程占用了大量的连接,当时是重启mysql解决的这个问题!后来又配置了连接池 ...

  6. 一些rand()的测试

    rand()生成的伪随机数已经足够我们实用,为了跟好的理解rand()跟seed的关系,做了一些测试! rand()函数种子默认为1,在每一次程序运行中,随机数相同,在一次运行中,可将生成数看做随机 ...

  7. iOS中RunLoop和线程的关系

    RunLoop又叫运行循环,主要用来管理线程.一个线程对应一个RunLoop,一个RunLoop又有五种模式.只有主线程的RunLoop是默认开启的,所以程序在开启后,会一直运行,不会退出.其他线程的 ...

  8. 简述 JavaScript脚本的执行原理?

    js 是一种动态 . 弱类型 . 基于原型的语言 ,通过浏览器可以直接执行: 当浏览器遇到 <script></script>标记时 , 会执行标记之间的js 代码:然后js ...

  9. js中常见的继承

    1. 使用原型链继承 2. 通过构造函数继承 通过构造函数,创建的实例,可以访问构造函数的属性和方法,以及可以访问构造函数的原型对象 prototype 上的数据和方法 : 3. 组合继承(1 和 2 ...

  10. 什么是AI网关?AI网关在企业系统中承担什么角色?

    AI 大模型的发展正在推动各行业的增长,据有关报告显示:"未来十年内预计年均增长率将达到37.3%,全球企业预计在2027年之前将在AI领域投入8000亿美元".这一迅猛发展促使许 ...