美文网首页
react-native跳转微信和支付宝小程序

react-native跳转微信和支付宝小程序

作者: 75e07f05c8c4 | 来源:发表于2021-12-29 12:08 被阅读0次

一. 跳转微信小程序

1.在微信开放平台注册App,获取appId,不注册调不起小程序,ios填写universal link
2.添加依赖库:react-native-wechat-lib,按照文档进行配置
3.ios配置Universal Link (通用链接),参考大神教程:http://events.jianshu.io/p/2f2083077191

registerApp(appid) 注册

import * as WeChat from 'react-native-wechat-lib';

WeChat.registerApp('appid', 'universalLink');//universalLink与微信开放平台所填一致

LaunchMiniProgram (LaunchMiniProgramMetadata) 跳到小程序

import * as WeChat from 'react-native-wechat-lib';

WeChat.launchMiniProgram({
  userName: 'gh_d39d10000000',//小程序原始id
  miniProgramType: 0,//可选打开 1开发版,2体验版,0正式版
  path: 'pages/index/index'//要打开小程序的页面
});

二. 跳转支付宝小程序

外部 APP/浏览器 唤起小程序,需要通过 scheme 调用,在 scheme 中可以传参和设置跳转的首页参数。

URL 格式

//appId 支付宝小程序appId
//page 要打开的小程序页面
//query 携带的启动参数必须进行 UrlEncode 否则只能获取第一个参数。
alipays://platformapi/startapp?appId=[appId]&page=[pagePath]&query=[params]

react-native打开支付宝小程序

import {Linking} from 'react-native';

Linking.openURL("alipays://platformapi/startapp?appId= 2021002154600008&page=pages/index/index&query=[params]");
到这里android已经可以成功跳转支付宝小程序了,ios报错提示要在Info.plist文件的LSApplicationQueriesSchemes增加alipays
<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>weixin</string>
        <string>wechat</string>
        <string>weixinULAPI</string>
        <string>alipays</string>
    </array>

相关文章

网友评论

      本文标题:react-native跳转微信和支付宝小程序

      本文链接:https://www.haomeiwen.com/subject/svdvqrtx.html