微信小程序间使用navigator跳转传值问题实例分析


Posted in Javascript onMarch 27, 2020

本文实例讲述了微信小程序间使用navigator跳转传值问题。分享给大家供大家参考,具体如下:

前言

这次讲一下我用 navigator 组件实现从一个小程序跳转到另一个小程序的过程中遇到的问题。

extra-data 如何构建

由于上网查资料得知 extra-data 是 json 格式。那么就不能在 HTML 属性中直接写。

那么剩下只有在 JS 里构建了。

首先在 HTML 里,绑定 extra-data的值到 extra 变量

<navigator class="navi" url="" target="miniProgram" app-id="wxxxxxxxxxxxxxxx" extra-data="{{ extra }}" version="{{ version }}" path="/pages/index/index">
<image src="{{img}}" mode="scaleToFill" class="img">
</image>
</navigator>

然后在 JS 里构建这个变量

Page({
 data: {
  extra: {
   "color": '', // 动态获取
   "partnerUsername": '99',
  },
 },
})

这里有个问题,就是如果 extra 里的 color 等变量是动态从远程 api 获取到的,那么应该怎么赋值。

我凭直觉写 extra.color = 'xx' ,尝试了下不行。查阅资料发现,应该这么写:

wx.request({
  url: url,
  data: {
    color: '',
  },
  header: {
    'content-type': 'application/json'
  },
  success: function (res) {
    that.setData({
      "extra.color": app.globalData.color,
    });
  }
});

还可以在 path 属性值后面跟参数来向目标小程序传值

通过搜索发现[这篇文章](https://cloud.tencent.com/developer/article/1157552),我试了他给出的解决方案,是可行的,现在记录在下面:

<navigator class="navi" url="" target="miniProgram" app-id="wxxxxxxxxxxxx" version="{{ version }}" path="zh_tcwq/pages/index/index?color={{ colorSet }}&partner={{ partner }}">
<image src="{{src}}" mode="scaleToFill" class="img">
</image>
</navigator>
// 源小程序
this.setData({
  colorSet: app.globalData.color,
  partner: app.globalData.partnerUsername,
});
// 目标小程序
onShow: function (options) {
  console.log(options.query.color + options.query.partner);
}

奇怪的问题(可能是bug):打开调试时,目标小程序能获取到动态的 extra-data,关闭后无法获取到

原因是我没配合法域名,所以动态从 api 获取的数据获取不到。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 #Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 #Javascript
JavaScript定时器使用方法详解
Mar 26 #Javascript
js实现时钟定时器
Mar 26 #Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 #Javascript
原生JS实现留言板
Mar 26 #Javascript
vue在线动态切换主题色方案
Mar 26 #Javascript
You might like
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
JavaScript函数表达式详解及实例
2017/05/05 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python flask框架端口失效解决方案
2020/06/04 Python
结束运行python的方法
2020/06/16 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
领导欢送会主持词
2015/07/06 职场文书
谢师宴学生致辞
2015/07/27 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
Python数据处理的三个实用技巧分享
2022/04/01 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android