uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数

原创已于 2022-04-28 20:52:15 修改 · 1.2w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2021-11-11 10:25:00 首次发布

前端同时被 3 个专栏收录

65 篇文章

订阅专栏

问题及解决方法专栏

48 篇文章

订阅专栏

uniapp

12 篇文章

订阅专栏

本文详细介绍了如何在uniapp中配置微信分享功能，自定义基座测试第三方SDK，并实现App端跳转微信小程序以及小程序间的交互。包括配置manifest.json、微信开放平台关联小程序和代码实现步骤。

本文是uniapp打包成安卓App。

一、注意事项

1、用到了分享功能，在打包App时，需要配置manifest.json：App 模块配置->Share。按照提示填写微信分享的信息，appid的获取参考我的另一篇文章：uniapp项目 App端实现微信登录、QQ登录

2、因为涉及到第三方 SDK 的配置，需要打包自定义基座进行测试。

3、需要在微信开放平台开启APP跳转小程序，并关联相应的小程序。
微信开放平台 -> 移动应用 -> 查看 -> 最下面的关联小程序信息，配置关联小程序。

二、代码实现

1、App端跳转微信小程序

注意：与微信小程序跳转微信小程序不同，App端不支持 uni.navigateToMiniProgram，App平台打开微信小程序，需要使用plus.share的 launchMiniProgram。

appJumpMiniPro() {
  // 获取分享服务列表
  plus.share.getServices(
    res => {
      let sweixin = '';
      for (var i = 0; i < res.length; i++) {
        let t = res[i];
        if (t.id == 'weixin') {
          sweixin = t;
        }
      }
      if (sweixin) {
        sweixin.launchMiniProgram(
          {
            id: 'gh_32620xxxxxx',  // 要跳转小程序的原始ID
            path: `pages/tslogin/tslogin?do=login&appName=暴漫APP`,  //  可带参数
            type: 2   // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
          },
          // 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
          res2 => {
            console.log(typeof res2, res2)
            // res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
            let result = JSON.parse(res2)
            console.log(result) 
            // 拿到参数后执行你需要的逻辑    
            ......   
          },
          err2 => {
            console.log(err2)
          }
        );
      }
      else {
        uni.showToast({
          icon: 'none',
          title: '当前环境不支持微信操作!'
        })
      }
    },
    err => {
      console.log(err)
    }
  )
}

2、微信小程序端返回App端

下面的代码基于微信小程序也是uniapp开发的，原生的写法稍微有点不一样，详情见：打开 App | 微信开放文档。

<template>
  <view class="page-container">
    <view class="">移动应用：{{appName}}</view>
    <button class="bottom" open-type="launchApp" :app-parameter="JSON.stringify(form)" @error="launchAppError">返回APP</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appName: '',
      form: {
        cid: 4408111111111,
        libs: ['中山图书馆','广州图书馆','中山图书馆','广州图书馆']
      }
    }
  },
  onLoad(option) {
    console.log(option)
    this.appName = option.appName
  },
  methods: {
    launchAppError(e) {
      console.log(e.detail)
      uni.showToast({icon:'none', title:e.detail.errMsg})
    }
  }
}
</script>

第一次做这样的功能，记录一下。希望能帮到你。

完。记录于2021-11-11。