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双平台通用...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下mtr命令,如何使用Linu
- 下一篇： android 获取通讯录全选反选_Xa