（微信小程序系列：一）携带参数跳转半屏微信小程序 先 A-＞B 后 B -＞A

一.前言

hello，打算以后弄个微信小程序的常用技巧的文章系列，这是第一篇~ 以后会持续更

二.概念

普通的小程序里跳转其它小程序大家都知道，用wx.navigateToMiniProgram，而跳半屏的小程序比较少，是用wx.openEmbeddedMiniProgram。效果大概如下，一般把跳转的小程序当个工具使用。 官方文档

且要注意配置：

三.A小程序->B小程序 并携带参数

在A小程序定义一个方法，返回写入跳转的方法

A： （需要注意的是不要在异步任务（比如定时器）里调用此方法，只能在直接的点击事件里调用）

 wx.openEmbeddedMiniProgram({
      extraData: {"Id":Id},  // 传要跳转到B的参数，对象来的，自定义属性值
      appId: '  ', // B的appid
      envVersion:'trial' , //B的类型  trial体验版, ‘release’正式版    ‘develop’开发版
      success:function(){
        console.log('跳转小程序成功');
      },
      fail:function(){
        console.log('跳转小程序失败');
      }
    })
1
2
3
4
5
6
7
8
9
10
11

B： 要接受这个A跳转过来的参数，找到B的app.js文件 ，在 onShow 这个生命周期里接收 （onLaunch和onShow都可以接收到）

onShow(options){ 
  if(options.referrerInfo.appId=='A的appid'){
       //传的参数在 options.referrerInfo.extraData 里
  } 
}
1
2
3
4
5

四.B小程序 回到->A小程序 并携带参数

B里写回到A的方法：

 wx.navigateBackMiniProgram({
  extraData: {"Id":Id},  // 传要跳转到B的参数，对象来的，自定义属性值
    }) 
   
1
2
3
4

找到A的app.js文件 ，在 onShow 这个生命周期里接收：

onShow(options){ 
  if(options.referrerInfo.appId=='B的appid'){
       //传的参数在 options.referrerInfo.extraData 里
  } 
}
1
2
3
4
5

五.总结

最近刚通关了 荒野大镖客救赎2 ，不得不说，艺术！（虽然我是狼结局 。。。）

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~