微信小程序间使用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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
如何实现js拖拽效果及原理解析
May 08 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脚本中include文件出错解决方法
2008/11/20 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
js闭包的用途详解
2014/11/09 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python元组操作实例解析
2014/09/23 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
详解python中的模块及包导入
2019/08/30 Python
python如何将两个txt文件内容合并
2019/10/18 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
比赛口号大全
2014/06/10 职场文书
保护水资源的标语
2014/06/17 职场文书
创先争优标语
2014/06/27 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python