React-Native環境搭建、組件選擇/封裝、踩坑大全、IOS/Android上線【三】(持續更新)

React-Native環境搭建、組件選擇/封裝、踩坑大全、IOS/Android上線【三】(持續更新)

該系列文章記錄本人從入門RN–>環境搭建–>熟悉組件–>使用三方組件–>解決各種坑–>封裝組件–>應用上線。希望對後來者有幫助，文章將會持續更新。

---

踩坑大全

---

一、微信支付、登錄、分享 React-Native-Wechat

Android配置：

配置參考鏈接https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-android.md
說明：後面”整合微信支付”（Integrating the WeChat Payment)配置我的配置如下圖所示【裏面io.dcloud.H***是我的包名，這裏對應改成自己的包名即可。當然一定要記得java目錄下要建對應的文件夾。看我的建了三個文件夾分別是io、dcloud、H*** 有多少層就建多少個對應的文件夾嗎，名字也記得一一對應】
如果要修改包名可以參考：https://www.jianshu.com/p/8b7412bab029
下圖是 微信登錄和分享 需要配置的

下圖是 微信支付 需要配置的

在AndroidManifest.xml中添加權限和activity

<!-- manifest中的權限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- application裏面添加微信activity -->
<!-- 微信支付需要配置的 -->
<activity
  android:name=".wxapi.WXPayEntryActivity"
  android:label="@string/app_name"
  android:exported="true"
/>
<!-- 微信分享和登錄需要配置的 -->
<activity
  android:name=".wxapi.WXEntryActivity"
  android:label="@string/app_name"
  android:exported="true"
/>

在android/app/proguard-rules文件中加入下面的 混淆規則【必填】

// 混淆規則
-libraryjars libs/alipaySDK-20150602.jar
-keep class com.alipay.android.app.IAlixPay{*;}
-keep class com.alipay.android.app.IAlixPay$Stub{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
-keep class com.alipay.sdk.app.PayTask{ public *;}
-keep class com.alipay.sdk.app.AuthTask{ public *;}

IOS配置:

配置參考鏈接https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-ios.md
IOS配置比較簡單就不說了，如果報錯那就按照鏈接多檢查下。

廢話不多說，直接上代碼
代碼實現參考https://github.com/yorkie/react-native-wechat
本人代碼實現如下：
先註冊appid，我在就如app的歡迎頁就註冊了，可以找個適當的位置註冊就行

微信三方登錄代碼

微信登錄參考官方鏈接https://open.weixin.qq.com/cgi-bin/readtemplate?t=resource/app_wx_login_tmpl&lang=zh_CN#faq

具體代碼
  //微信登錄授權
  WXLogin = () => {
    let scope = 'snsapi_userinfo',
      state = 'wechat_login'; //隨機數，可以自己隨便寫
    WeChat.isWXAppInstalled().then((isInstalled) => {
      if (isInstalled) {
        WeChat.sendAuthRequest(scope, state).then(result => {
          if (result.errCode === 0) {
            //獲取access_token
            this.getWXAccessToken(result.code);
          }
        }).catch(() => {
        })
      } else {
        SER_URL.platform === "android" ? Toast.show("請先安裝微信客戶端再進行登錄") :
          Toast.show("未安裝微信，不能進行登錄");
      }
    })
  };

  //根據微信code獲取access_token
  getWXAccessToken = (token) => {
    let _URL = SER_URL.loginWXUrl + '?appid=' + SER_URL.wxAppId + '&secret='+ SER_URL.wxAppSecret + '&code=' +token+'&grant_type=authorization_code';
    fetch(_URL).then((response) => response.json()).then((result) => {
      //獲取用戶信息
      this.getUserInfo('weixin', result.access_token, result.openid);
    }).catch(() => {
      Toast.show("登錄失敗");
    });
  };

  //根據微信access_token獲取微信用戶信息
  getUserInfo = (type, access_token, openid) => {
    let _URL = type === 'weixin' ?
      (SER_URL.loginWXGuiUrl + '?access_token=' + access_token + '&openid=' + openid) :
      (SER_URL.loginQQUrl + '?access_token=' + access_token
          + '&oauth_consumer_key=' + SER_URL.qqAppId + '&openid=' + openid);
    fetch(_URL).then((response) => response.json()).then((data) => {
      this.showUserInfoData(type, data);
    }).catch(() => {
      Toast.show("登錄失敗");
    });
  };

  // 顯示三方登錄用戶頭像信息
  showUserInfoData = (type, data) => {
    switch (type) {
      case 'weixin':
        SER_URL.third_openid = data.openid;
        SER_URL.third_head_img = data.headimgurl;
        SER_URL.third_nickname = data.nickname;
        SER_URL.third_sex = data.sex;
        this.tripartiteLogin(2);
        break;
      case 'qq':
        SER_URL.third_head_img = data.figureurl_qq_2;
        SER_URL.third_nickname = data.nickname;
        SER_URL.third_sex = data.gender === '男' ? 1 : 2;
        this.tripartiteLogin(1, data);
        break;
      default:
        break;
    }
  };

微信好友、朋友圈分享代碼

微信QQ所有分享集成在如下代碼中，這是本人封裝的，可以自己實現分封裝下。
/**
 * 分享到QQ/微信
 * @param num 用於判別分享到微信還是QQ
 * @param shareId  分享id(話題id,其他默認給不傳或者給0)，後面用於分享跳轉到頁面字段
 * @param logo_url  分享圖片
 * @param title 分享標題
 * @param content 分享內容
 */
function share(num, logo_url, title, content, shareId) {
  // let linkUrl = SER_URL.shareUrl + '?shareId=' + (shareId ? shareId : 0);
  let linkUrl = SER_URL.androidMarketUrl;
  if (num === 1 || num === 2) { //分享到QQ好友、QQ羣、QQ空間
    //順序不能顛倒
    QQ.isQQClientInstalled().then(() => {
      if (num === 1) { //分享給QQ好友、QQ羣
        QQ.shareNews(
          linkUrl,
          logo_url.indexOf('http') > -1 ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
          title,
          content,
          QQ.shareScene.QQ).then(() => {
          Toast.show('分享成功');
        }).catch(() => {
        });
      } else if (num === 2) { //分享到QQ空間
        QQ.shareNews(
          linkUrl,
          logo_url.indexOf('http') > -1 ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
          title,
          content,
          QQ.shareScene.QQZone).then(() => {
          Toast.show('分享成功');
        }).catch(() => {
        });
      }
    }).catch(() => {
      Toast.show('未安裝QQ，不能進行分享');
    });
  } else if (num === 3 || num === 4) {
    WeChat.isWXAppInstalled().then((isInstalled) => {
      if (isInstalled) {
        if (num === 3) { //分享給微信好友、微信羣
          WeChat.shareToSession({
            thumbImage: logo_url.indexOf('http') > -1 ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
            type: 'news',
            title: title,
            description: content,
            webpageUrl: linkUrl,
          }).then(() => {
            Toast.show('分享成功');
          }).catch(() => {
          });
        } else if (num === 4) { //分享到朋友圈
          WeChat.shareToTimeline({
            thumbImage: logo_url.indexOf('http') > -1 ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
            type: 'news',
            title: title,
            description: content,
            webpageUrl: linkUrl,
          }).then(() => {
            Toast.show('分享成功');
          }).catch(() => {
          });
        }
      } else {
        Toast.show('未安裝微信，不能進行分享');
      }
    });
  }
}

微信支付代碼

具體代碼
  //調用微信支付【data數據是後臺傳過來的，這裏不在前臺處理，前臺處理也會不安全】
  weixinPay = async (data) => {
    if (SER_URL.isWXClientInstalled === true) {
      try {
        let result = await WeChat.pay({
          partnerId: data.partnerid.toString(), /*商家向財付通申請的商家id*/
          prepayId: data.prepayid.toString(), /*預支付訂單*/
          nonceStr: data.noncestr.toString(), /*隨機串，防重發*/
          timeStamp: data.timestamp.toString(), /*時間戳，防重發*/
          package: data.package.toString(), /*商家根據財付通文檔填寫的數據和簽名*/
          sign: data.sign.toString(), /*商家根據微信開放平臺文檔對數據做的簽名*/
        });
        if (result.errCode === 0) {
          this.setState({isPay: true, successBoolean: true});
        } else {
          this.setState({isPay: true, successBoolean: false});
        }
      } catch (error) {
        this.setState({isPay: true, successBoolean: false});
      }
    } else {
      Toast.show('未安裝微信，不能支付');
    }
  };

二、支付寶支付【待更新】

react-native-yunpeng-alipay
安卓和蘋果配置：
1.http://blog.csdn.net/sinat_17775997/article/details/68484511
2.https://www.npmjs.com/package/react-native-yunpeng-alipay
支付寶有個bug:

直接按照報錯的路徑將這個方法刪掉或者註釋掉即可。不會修改的可以參考：http://blog.csdn.net/sinat_30949835/article/details/78903007

三、QQ登錄、分享 react-native-qqsdk

Android、IOS配置鏈接https://github.com/iVanPan/react-native-qqsdk

裏面IOS配置有一項：

手敲簡直是蛋疼，還很容易敲錯，送一波福利給各位，記得關注下哦
直接複製下面代碼到Info.plist中的第一層dict裏面，具體位置自己研究下

<key>LSApplicationQueriesSchemes</key>
    <array>
      <string>mqqapi</string>
      <string>mqq</string>
      <string>mqqOpensdkSSoLogin</string>
      <string>mqqconnect</string>
      <string>mqqopensdkdataline</string>
      <string>mqqopensdkgrouptribeshare</string>
      <string>mqqopensdkfriend</string>
      <string>mqqopensdkapi</string>
      <string>mqqopensdkapiV2</string>
      <string>mqqopensdkapiV3</string>
      <string>mqzoneopensdk</string>
      <string>wtloginmqq</string>
      <string>wtloginmqq2</string>
      <string>mqqwpa</string>
      <string>mqzone</string>
      <string>mqzonev2</string>
      <string>mqzoneshare</string>
      <string>wtloginqzone</string>
      <string>mqzonewx</string>
      <string>mqzoneopensdkapiV2</string>
      <string>mqzoneopensdkapi19</string>
      <string>mqzoneopensdkapi</string>
      <string>mqzoneopensdk</string>
      <string>mqqopensdkapiv4</string>
    </array>
</key>

QQ登錄代碼：

QQ登錄參考鏈接http://wiki.open.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91get_user_info

//QQ登錄授權
QQLogin = () => {
  QQ.isQQClientInstalled().then(() => {
    QQ.ssoLogin().then((result) => {
      SER_URL.third_openid = result.userid;
      this.getUserInfo('qq', result.access_token, result.userid);
    }).catch(() => {
    });
  }).catch(() => {
    SER_URL.platform === "android" ? Toast.show("請先安裝QQ客戶端再進行登錄") :
      Toast.show("未安裝QQ，不能進行登錄");
  });
};

其中的getUserInfo方法跟微信登錄裏面是調用同一個getUserInfo，這裏就不重新貼代碼了。

QQ分享

QQ好友/羣、QQ空間分享代碼：代碼見上面微信分享

四、極光推送【待更新】

安卓和蘋果的配置：
https://github.com/jpush/jpush-react-native
https://github.com/jpush/jpush-react-native/blob/master/documents/check.md
https://github.com/jpush/jpush-react-native/blob/master/documents/android_usage.md
第二個鏈接中的配置如下圖

上次把它配置到application外面去了就會報錯

【特別注意】
① 安卓手機需要init極光推送不然接收不到消息提送
if (Platform.OS === ‘android’) JPushModule.initPush();
② 如果報cb(resultCode)錯誤。那就改成 cb && cb(resultCode);

其他問題後面補上