android中设置lmargin简书,超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用...
(一)前言
本文主要会涉及到以下内容:
微信开发者应用申请审核
安装配置微信分享库
微信好友/朋友圈功能实现
(二)应用申请审核
首先大家需要去微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com)
开始创建移动应用,填写应用名称,应用名称以及中英文的信息,移动应用图标分别为28x28何108x108的png格式图标。
然后下一步填写iOS项目的bundle ID以及android项目的包名和应用签名。请注意应用签名获取需要安装一下获取签名信息的APK包,同时你的android应用也需要打包以后安装在手机上面,这样再去获取。具体获取方式见下面的图
下载获取第三方应用的签名信息apk
下载安装上面的签名信息包apk,然后在上面输入android项目的包名,点击获取签名信息
android项目的包名路径:android/app/build.gradle中的applicationId标签数据。
把上面的签名信息填写到下面的网页上面,点击提交审核即可。然后就是等待吧,官方说是7个工作日,不过一般也就是几个小时就可以通过审核了吧。
(三)安装配置微信分享库
github上面已经有封装微信分享的原生SDK库了,大家可以进行去下载安装,然后RN端就可以进行调用使用了。具体项目地址:https://github.com/weflex/react-native-wechat不过该库不仅支持微信分享,还支持微信登录,收藏以及微信支付的。但是登录,支付之类的功能需要开通开发者认证权限,那是需要300元一年的啦~
3.1.库安装方法:npm install react-native-wechat --save
3.2.Android版本安装配置方法
①.在android/settings.gradle文件中添加如下代码:
include':RCTWeChat'
project(':RCTWeChat').projectDir =newFile(rootProject.projectDir,'../node_modules/react-native-wechat/android')
②.在android/app/build.gradle文件中的dependencies标签中添加模块依赖
...
dependencies {
...
compile project(':RCTWeChat')// Add this line only.
}
③.在MainActivity.java文件中添加如下代码
importcom.theweflex.react.WeChatPackage;// Add this line before public class MainActivity
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protectedList getPackages() {
returnArrays.asList(
newMainReactPackage()
,newWeChatPackage()// Add this line
);
}
④.在android项目中创建wxapi包名,在该包名底下创建WXEntryActivity.java类,该类用于去微信获取请求以及响应。
packageyour.package.wxapi;
importandroid.app.Activity;
importandroid.os.Bundle;
importcom.theweflex.react.WeChatModule;
publicclassWXEntryActivityextendsActivity{
@Override
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}
⑤.在AndroidManifest.xml文件中添加刚刚创建的Actiivty的配置
...
...
android:name=".wxapi.WXEntryActivity"
android:label="@string/app_name"
android:exported="true"
/>
⑥.混淆设置,在proguard-rules.pro中添加如下代码,当然如果不混淆就不安全啦
-keepclasscom.tencent.mm.sdk.** {
*;
}
3.3.iOS版本安装配置方法
①.我们之前已经执行过npm安装微信库了,接下来我们有两种方法进行链接第一种就是直接通过rnpm link,如下:
当然如果大家这种方案没有成功链接的话,可以采用手动方式了,具体教程请点击进入
②.接下来在xcode中添加部分库依赖(Link Binary With Libraries):
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
③.选中Targets-info配置中URL Schema中配置刚申请下来的appid
④.为了iOS9.0的支持,在Targets-info中的Custom iOS Traget Properties标签中添加LSApplicationQueriesSchemes字段,值分别为wechat和weixin
⑤.接下来需要在APPDelete.m文件中做一下Linking的处理配置(具体有关Linking的配置请点击查看)
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return[RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
(四)微信好友/朋友圈分享实例
上面我们已经把基本安装配置已经讲解完成了,下面我们通过实例来进行演示一下,主要演示分享到好友/朋友圈的链接以及文本,关于更多的分享实例例如文件,图片,视频,语言等等可以查看项目的说明文件即可。
分享实例步骤:
注册应用
本文/朋友圈分享
Android测试应用需要打包测试
iOS版本直接测试即可,代码和下面一样
让我们来看一下实例代码,今天主要演示好友文本/链接以及朋友圈文本/链接分享:
/**
* Sample React Native App
* @flow
*/
importReact, { Component } from'react';
import{
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
ToastAndroid,
} from'react-native';
var WeChat=require('react-native-wechat');
//import fs from 'react-native-fs';
classCustomButtonextendsComponent {
render() {
return(
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
{this.props.text}
);
}
}
classRNWeChatDemoextendsComponent {
constructor(props) {
super(props);
//应用注册
WeChat.registerApp('wx8d560da3ba038e7e');
}
render() {
return(
微信好友/朋友圈分享实例
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToSession({type:'text', description:'测试微信好友分享文本'})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('没有安装微信软件,请您安装微信之后再试');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToSession({
title:'微信好友测试链接',
description:'分享自:江清清的技术专栏(www.lcode.org)',
type:'news',
})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('没有安装微信软件,请您安装微信之后再试');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToTimeline({type:'text', description:'测试微信朋友圈分享文本'})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('没有安装微信软件,请您安装微信之后再试');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToTimeline({
title:'微信朋友圈测试链接',
description:'分享自:江清清的技术专栏(www.lcode.org)',
type:'news',
})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('没有安装微信软件,请您安装微信之后再试');
}
});
}}
/>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize:20,
textAlign:'center',
margin:10,
},
button: {
margin:5,
backgroundColor:'white',
padding:15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor:'#cdcdcd',
},
});
AppRegistry.registerComponent('RNWeChatDemo', () => RNWeChatDemo);
运行效果:
(五)最后总结
今天带着大家从最基本开始一起来实现一下微信分享功能,当然除了分享文本和链接以外,还可以分享语音,视频,图片,文件等等。这些相关的使用API可以参考上面WeChat库中的文档即可。
刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
android中设置lmargin简书,超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用...相关推荐
- java 朋友圈分享接口_Java实现微信公众平台朋友圈分享功能详细代码
其实分享的方法在微信官网有较为详细的文档说明,现就其中一些比较绕的步骤进行总结,有问题随时交流哈. 首先微信其实已经自带分享到朋友圈,朋友,qq空间等功能,对于开发微信专门提供了一个接口,可以根据需要 ...
- JAVA 实现朋友圈_Java实现微信公众平台朋友圈分享功能详细代码
其实分享的方法在微信官网有较为详细的文档说明,现就其中一些比较绕的步骤进行总结,有问题随时交流哈. 首先微信其实已经自带分享到朋友圈,朋友,qq空间等功能,对于开发微信专门提供了一个接口,可以根据需要 ...
- 微信分享功能android,关于Android实现简单的微信朋友圈分享功能
1.先下载微信分享的jar包放在lib目录下,并且添加依赖, android:name=".wxapi.WXEntryActivity" android:exported=&quo ...
- android微信朋友圈开发,Android微信、朋友圈分享
[实例简介] Android调用微信包实现微信.朋友圈分享.并能够获取分享的结果.收到毁掉消息 [实例截图] [核心代码] WeChatShare └── TestWXShare ├── Androi ...
- android实现微信分享、朋友圈分享功能
相信做app的都遇到要分享朋友圈,或者把东西分享给别人的这个功能,下面就是实现这个功能的代码. 要是遇到什么问题,在评论区留言,我会在第一时间回复哦!!! 1.第一步添加依赖 implementati ...
- android 微信朋友圈 全功能,Android仿微信朋友圈文字展开全文功能 Android自定义TextView仿微信朋友圈文字展开全文功能...
Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...
- android 微信朋友圈 全功能,Android自定义TextView仿微信朋友圈文字展开全文功能
Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...
- 超详细 React Native 完全使用指南,学不会你打我
前言 大家好,我是虚竹,今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境,并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码.编写丝滑般代码会再下一篇输出 ...
- 超详细 React Native 入坑使用指南,我在元宇宙等你
前言 大家好,我是虚竹,今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境,并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码.编写丝滑般代码会再下一篇输出 ...
最新文章
- 资深算法专家解读CTR预估业务中的深度学习模型
- 网易加速5G下视频技术应用,携手南京银行数字化转型
- java基础不好框架能学会吗_转行Java能学会吗?零基础学习Java的学习路线
- Leet Code OJ 292. Nim Game [Difficulty: Easy]
- oracle flex cluster,12c flex cluster小记(3)
- C和指针之动态内存分配(读取范围在1和标准输入读取的size之前每个数据出现的次数)
- 操作系统概述 记录操作系统相关知识
- 实锤!Python 真没你想的那么简单…
- 初识C++之函数重载、重写、重定义的区别
- 矩阵乘法 算法训练 试题_ALS算法实现用户对音乐评分的预测
- java string常见操作题
- python中如何将列表按列打印_如果列表只包含0,我如何在python中打印?
- php 文件预览 水印,php实现在线预览word等office文件,同时添加水印
- css 水印_Inpaint,一款简洁干净的去水印软件
- 浅谈SpringMVC的概念及执行原理
- fanuc机器人试题_E01OF工业机器人FANUC系统维护试题库.docx
- 2019最新高级JAVA架构师之路(价值3万元的教程-年薪百万计划)
- 计算机系统关机后自动重启,深度技术win7系统电脑关机后又自动开机如何解决【图文】...
- layui的lay-verify参数验证的问题
- CentOS 7账号密码忘了怎么办?
热门文章
- Cloudera Manager agent无法启动,拒绝链接 Failed! trying again in 2 second(s): [Errno 111] Connection refuse
- #error This file requires compiler and library support for the ISO C++ 2011 standard
- “CV_RGB2BGR”: 未声明的标识符
- 基于消息队列 RocketMQ 的大型分布式应用上云实践
- 实时数仓入门训练营:基于 Apache Flink + Hologres 的实时推荐系统架构解析
- 双十一消费近万亿!1亿人见证数字物流,“尾款人”收货更快了?购物狂欢七大趋势浮现
- AI技术的“践行者” — 云测试成为企业降本增效利器
- 利用云数据库 MongoDB ,为你的业务创建单节点实例
- MaxCompute 中的Code Generation技术简介
- 看懂 IPv6+,这篇就够了