微信小程序间使用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 相关文章推荐
jsonp原理及使用
Oct 28 Javascript
JS delegate与live浅析
Dec 21 Javascript
JQuery中clone方法复制节点
May 18 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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中文乱码
2009/11/26 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python设计模式大全
2016/06/27 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
Unix如何添加新的用户
2014/08/20 面试题
小小的船教学反思
2014/02/21 职场文书
房屋租房协议书范本
2014/12/04 职场文书
社区好人好事材料
2014/12/26 职场文书
2015年推普周活动总结
2015/03/27 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书