React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)

简介:

React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示+源码+注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法。

本文分文三个部分:一、效果展示;二、实现步骤;三、注意事项;

一、效果展示

二、实现步骤

1.微信开放平台申请移动应用(需要缴纳300元/年费用),配置开发信息,应用包名和签名一定要填对,如图:

 

2.配置“React-Native-Wechat”组件,配置RN项目;

React-Native-Wechat项目地址:https://github.com/yorkie/react-native-wechat

配置文档:

 Android配置文档:https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-android.md

 Ios配置文档:https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-ios.md

鉴于组件配置已经描述的非常详细,我在本文中就不在重复叙述,重点看下面的注意事项;

本示例源码地址https://github.com/vipstone/react-native-wechat-demo.git

三、注意事项

1.开放平台配置应用信息的时候,本文2-1中的签名,一定要是使用官方的签名工具在手机上查看的,要注意:RN项目调试版和发布版签名是不同的;

2.在配置RN项目的时候,本文2-2里面有一个需要配置“build.gradle”文件的,因为“build.gradle”在Android目录里面有两个,一定要看清楚文档的配置路径,如果配置出差,会出现项目运行爆红跑不起来的问题;

3.所有的工作配置完成之后,运行微信分享,微信闪退的问题,RN项目在我调试还有发布版的时候,已经把所有的东西都确认配置正确了,但是分享的时候微信就闪退了,闪退问题的排除:

  a).微信开放平台签名配置是否正常;

  b).修改完签名微信可能有缓存,稍等几分钟再试;

  c).所有办法都用完了还不行,这是终极大招:把微信和程序彻底关掉,也可以重启手机,重启之后就发现分享不闪退了,一切都好了,原因不详,应该是某些文件被缓存了或者没生效,重启之后权限就生效了,就可以分享出去了(我就是采用这个办法搞好的)。

 

 




本文转自王磊的博客博客园博客,原文链接:http://www.cnblogs.com/vipstone/p/7493321.html,如需转载请自行联系原作者


目录
相关文章
|
14天前
|
前端开发 JavaScript
React 步骤条组件 Stepper 深入解析与常见问题
步骤条组件是构建多步骤表单或流程时的有力工具,帮助用户了解进度并导航。本文介绍了在React中实现简单步骤条的方法,包括基本结构、状态管理、样式处理及常见问题解决策略,如状态管理库的使用、自定义Hook的提取和CSS Modules的应用,以确保组件的健壮性和可维护性。
54 17
|
12天前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
25 3
|
2月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
54 1
 H5微信外支付(移动端浏览器)
|
2月前
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
113 0
微信H5支付--微信JS-SDK支付--点金计划
|
3月前
|
前端开发
React按需加载antd步骤以及出现的问题
在使用`babel-plugin-import`插件时,可以在项目的根目录创建`.babelrc`文件或在`package.json`中添加babel配置。这两个文件中不应该存在重复的配置。如果出现"Multiple configuration files found"错误,需要选择其中一个文件进行配置,并删除另一个文件中的babel配置。使用该插件后,可以直接从`antd`引入组件,无需手动引入样式文件。
89 1
|
4月前
|
存储 监控 前端开发
|
4月前
|
前端开发
【实战指南】React Hooks 详解超厉害!六个步骤带你提升 React 应用状态管理,快来探索!
【8月更文挑战第31天】React Hooks 是 React 16.8 推出的新特性,允许在函数组件中使用状态及其它功能而无需转换为类组件。通过以下六个步骤可有效提升 React 应用的状态管理:1)使用 `useState` Hook 添加状态;2)利用 `useEffect` Hook 执行副作用操作;3)在一个组件中结合多个 `useState` 管理不同状态;4)创建自定义 Hook 封装可重用逻辑;5)借助 `useContext` 访问上下文以简化数据传递;6)合理运用依赖项数组优化性能。React Hooks 为函数组件带来了更简洁的状态管理和副作用处理方式。
48 0
|
5月前
|
开发框架 移动开发 JSON
利用微信公众号实现商品的展示和支付(1)
利用微信公众号实现商品的展示和支付(1)
|
4月前
|
移动开发 前端开发 JavaScript
|
5月前
|
安全 API Windows
支付系统13------支付系统的资料在技术库里的在线支付当中,怎样获取微信平台证书那?怎样获取微信平台证书那?第一步打开我们的微信支付平台的文档中心
支付系统13------支付系统的资料在技术库里的在线支付当中,怎样获取微信平台证书那?怎样获取微信平台证书那?第一步打开我们的微信支付平台的文档中心