uniapp h5 和 小程序互相传值
小程序端
<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 和 小程序互相传值的更多相关文章
- 使用uni-app开发微信小程序
uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...
- 前端生成分享海报兼容H5和小程序
### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果
- 使用uView UI+UniApp开发微信小程序
在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...
- uniapp的微信小程序,获取授权,获取中文街道地理位置
w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 基于uni-app的微信小程序之分包
作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 0. 缘由 1. 关于分包 1.0 这是 官方文档 1.1 注意事项 2.使用方法 2.1 首先你得有个uniapp的微信小程序项目 2.2 ...
- uni-app开发经验分享十九: uni-app对接微信小程序直播
uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情> 记录这两个参数直播 ...
- 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转
在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...
- 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统
在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...
- nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...
随机推荐
- jQuery - 不同版本的差异對比
jQuery 一共分了 1.x.2.x.3.x 这三个大版本. jQuery 的版本都是不向后兼容的! jQuery 的版本都是不向后兼容的! jQuery 的版本都是不向后兼容的!重要的事情说三遍哈 ...
- Mininet安装记录
安装环境: Ubuntu虚拟机版本:14.04 Mininet版本:2.3.1b1 1.更改软件镜像源 在设置中进行如下操作: 选择国内的镜像站点,如阿里云. 点击关闭后,在弹出的窗口中点击重新载入, ...
- 2024-09-21:用go语言,给定一个字符串 s,字符串中的每个字符要么是小写字母,要么是问号‘?‘。对于一个仅包含小写字母的字符串t,我们定义cost(i)为在t的前i个字符中与t[i]相同的字
2024-09-21:用go语言,给定一个字符串 s,字符串中的每个字符要么是小写字母,要么是问号'?'.对于一个仅包含小写字母的字符串t,我们定义cost(i)为在t的前i个字符中与t[i]相同的字 ...
- 线段树与二分操作 vases and flowers ——hdu 4614
操作1,的关键是找到第一只和最后一只空花瓶,完全可以利用二分法查找,找第一只花瓶可以在[X,N]内查找,第一个位置pos1,最后一只花瓶则在[POS1,N]中找,然后更新[POS1,POS2],全部置 ...
- Swift查看变量内存地址
withUnsafePointer 不说话,先放代码 withUnsafeBufferPointer(to: a) { point in let address = UnsafeRawPointer( ...
- C语言数据类型、变量的输入和输出、进制转换
scanf标准函数可以从键盘得到数字并记录到存储区里,为了使用这个标准函数需要包含stdio.h这个头文件 在scanf函数调用语句里应该使用存储区的地址表示存储区:双引号里使用占位符表示存储区的类型 ...
- 62. get和post请求的区别
与 post 相比 get请求 更简单也更快 : get 请求的数据会暴漏在地址栏中,post 请求不会,所以post 请求比get请求要安全一些 :
- dp线段树优化
题目:Potted Flower Description The little cat takes over the management of a new park. There is a larg ...
- 云原生周刊:Gateway API 1.0.0 发布 | 2023.11.6
开源项目推荐 Kueue Kueue 是一套用于作业队列的 API 和控制器.它是作业级管理器,可决定何时允许作业启动(如创建 pod),何时停止作业(如删除活动 pod). Reloader 一个 ...
- Games 101 作业1
1 坐标系 关于坐标系,坐标系其实就是空间信息.有了坐标系我们可以非常详细的描述这个世界,为了方便一般为一个观测者生成一个坐标系. 坐标系以观测者所在的位置为原点.就像我们常说的前面三米,我们对世界的 ...