【微信小程序系列:一】携带参数跳转半屏微信小程序 先 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('跳转小程序失败');
      }
    })

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

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

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

B里写回到A的方法:

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

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

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

五.总结

最近刚通关了 荒野大镖客救赎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总结笔记
…等等
进我主页看更多~

猜你喜欢

转载自blog.csdn.net/luo1831251387/article/details/127440783