實(shí)戰(zhàn)：React Native 集成 HMS Core

當(dāng)我想寫(xiě)這樣一篇文章的時(shí)候，取一個(gè)怎樣的標(biāo)題就把我難住了，其實(shí)今天只想講明白一件事：“JavaScript 技術(shù)棧如何接入 HMS Core 從而實(shí)現(xiàn)‘超能力’的 App 開(kāi)發(fā)？”，更直接一點(diǎn)就是“如何使用 React Native 集成 HMS Core？”。首先，為什么是 React Native？目前在大前端領(lǐng)域，跨端的框架選擇并不多，除了多年依舊沒(méi)發(fā)布 1.0 版本的 React Native，還有像 uniapp 、Taro、Rax 等同屬于 JavaScript 技術(shù)向的框架，還有Xamarin、 Flutter 等其他技術(shù)向的跨端方案。而之所以選擇 React Native ，主要還是因?yàn)?React Native 易于上手，就算不熟悉 JavaScript 也能快速入門(mén)。

前言

React Native^[1] 是使用 React 構(gòu)建原生應(yīng)用程序的框架，"Learn once, write anywhere: Build mobile apps with React",毫無(wú)疑問(wèn)，這并不是一句空話，筆者所在的團(tuán)隊(duì)雖然沒(méi)有原生開(kāi)發(fā)人員但有幸使用 React Native 開(kāi)發(fā)上線了多個(gè)跨端應(yīng)用，至于體驗(yàn)怎樣就先不提它，目前狀況是“又不是不能用”，主要還是取決于“砌磚師傅”的手藝。Facebook 自 2015 年就開(kāi)源了 React Native，至今一直在積極維護(hù)和使用，國(guó)內(nèi)像騰訊QQ、京東、手機(jī)百度、小米有品等，或多或少都有使用 React Native。2022 年將是 React Native 開(kāi)源新架構(gòu)之年，同時(shí) React Native 多平臺(tái)愿景也在逐步實(shí)現(xiàn)，比如 Windows、MacOS、VR等端的開(kāi)發(fā)探索，總之，React Native 即將到來(lái)的 1.0 版本值得期待！

“HMS Core^[2] 是華為終端云服務(wù)（HUAWEI Mobile Services）開(kāi)放能力合集，位于開(kāi)發(fā)者應(yīng)用與操作系統(tǒng)之間，是為應(yīng)用開(kāi)發(fā)提供基礎(chǔ)服務(wù)的平臺(tái)。同時(shí)，依托華為云服務(wù)，HMS Core也為這些服務(wù)提供云端能力，用于各服務(wù)的開(kāi)通、業(yè)務(wù)實(shí)現(xiàn)及運(yùn)營(yíng)。”，通俗地來(lái)講，我們的應(yīng)用集成 HMS Core 之后，就能獲得人工智能、圖形能力如AR、應(yīng)用服務(wù)等能力。

如果您還沒(méi)使用過(guò)React Native，沒(méi)關(guān)系，毫不夸張地說(shuō)，就算您不會(huì) JavaScript，跟著官方文檔或者社區(qū)的中文文檔，不到半日便能開(kāi)始開(kāi)發(fā) React Native 應(yīng)用；如果您還沒(méi)集成過(guò) HMS Core，沒(méi)關(guān)系，毫不夸張地說(shuō)，就算您不懂編程，跟著官方文檔動(dòng)手實(shí)踐，不出半日便能將強(qiáng)大的華為生態(tài)集成到您的應(yīng)用中。“千里之行始于足下”，千萬(wàn)行的代碼始于“Hello，World”，而代碼的編寫(xiě)始于閱讀官方文檔。接下來(lái)，讓我們遵循文檔的腳步，開(kāi)始在 React Native 中集成 HMS Core！

環(huán)境準(zhǔn)備

React Native 中文網(wǎng)^[3]由武漢青羅網(wǎng)絡(luò)科技有限公司維護(hù)，結(jié)合了該公司 React Native開(kāi)發(fā)者在使用過(guò)程中的切身經(jīng)驗(yàn)，一直以來(lái)堅(jiān)持與官方文檔保持同步更新，對(duì)國(guó)內(nèi) React Native 開(kāi)發(fā)者來(lái)說(shuō)是非常不錯(cuò)的學(xué)習(xí)資料。本文不再贅述不同開(kāi)發(fā)平臺(tái)、不同目標(biāo)平臺(tái)的 React Native 開(kāi)發(fā)環(huán)境怎么搭建，僅以 Mac 開(kāi)發(fā)平臺(tái)下 Android 、 iOS 應(yīng)用開(kāi)發(fā)環(huán)境搭建為例。
先來(lái)一波勸退：

• 首先，暫時(shí)沒(méi)找到一種不需要安裝環(huán)境就能體驗(yàn)開(kāi)發(fā) React Native 的方式，而本地安裝環(huán)境又非常占用磁盤(pán)空間，比如下圖中僅安裝 Xcode 及 Android Studio 就占用了近 20 G的容量，不過(guò)相比日漸臃腫的前端開(kāi)發(fā)依賴也不足為奇。

  

• 其次，我們?cè)谑褂?React Native 不同版本時(shí)所依賴的環(huán)境、版本也會(huì)有些差異，比如低于 0.67 版本的 React Native 構(gòu)建 Android 應(yīng)用時(shí)需要依賴 JDK 1.8 版本，也就是 Java 8，而本文使用的版本為 React Native ）。67，需依賴 JDK 11。因此，我們?cè)谑褂?React Native 的過(guò)程中，可能存在多個(gè)環(huán)境，如我使用的 Mac 環(huán)境就安裝了兩個(gè)版本的 Java^[4]。總的來(lái)說(shuō)，需要安裝的依賴比較多，步驟也繁瑣。

  平臺(tái)/依賴	Windows	Mac	Linux
  Android	Node、JDK 和 Android Studio	Node、JDK 和 Android Studio	Node、JDK 和 Android Studio
  iOS	暫不支持	Node、Watchman、Xcode 和 CocoaPods	暫不支持

  

• 最后，由于眾所周知的原因，我們?cè)诎惭b依賴的時(shí)候可能會(huì)遇到網(wǎng)絡(luò)問(wèn)題，如同 React Native 中文文檔中所描述的“總之如果報(bào)錯(cuò)中出現(xiàn)有網(wǎng)址，那么 99% 就是無(wú)法正常連接網(wǎng)絡(luò)”，此外無(wú)論是 Android 環(huán)境還是 iOS 環(huán)境，對(duì)于沒(méi)有接觸過(guò)的開(kāi)發(fā)者來(lái)說(shuō)，或多或少會(huì)有些心理負(fù)擔(dān)，尤其是安裝過(guò)程中多次碰壁之后。好在環(huán)境搭建好之后，就能持續(xù)使用，以后無(wú)論是開(kāi)發(fā) Android 還是 iOS，都能快速進(jìn)行開(kāi)發(fā)。

此刻，如果您還沒(méi)有被勸退，建議您直接參考 ReactNative 中文文檔搭建環(huán)境^[5]。

安裝Node

Node.js? 是一個(gè)基于 Chrome V8 引擎 的 JavaScript 運(yùn)行時(shí)環(huán)境。如今的前端生態(tài)已經(jīng)非常依賴 Node.js,尤其是包管理器 -- npm。一般來(lái)說(shuō)安裝 Node 時(shí)我們可以選擇從官網(wǎng)下載安裝，在 Mac 上，我們也可以通過(guò) `Homebrew`^[6] 來(lái)安裝。

brew?install?node
brew?install?watchman

此外，為了應(yīng)付本地同時(shí)安裝不同 Node 版本的需要，我們可以安裝 nvm^[7]來(lái)管理 Node 版本；為了滿足不同 npm 鏡像源的切換，我們可以安裝 nrm^[8] 來(lái)管理鏡像源。

如果直接下載 Node 遇到網(wǎng)絡(luò)問(wèn)題，可以嘗試使用華為云鏡像：https://repo.huaweicloud.com/nodejs/^[9],筆者之前的安裝就是通過(guò)鏡像下載然后一路next就裝好了。

安裝 JDK

Mac 環(huán)境下如果只想安裝單個(gè) JDK， 直接使用`Homebrew`^[10] 來(lái)安裝：

brew?install?adoptopenjdk/openjdk/adoptopenjdk11

如果需要安裝多個(gè) JDK，就需要做一些特別的配置。筆者同樣通過(guò)華為云鏡像下載了多個(gè) JDK --https://repo.huaweicloud.com/openjdk/^[11],安裝之后修改~/.bash_profile進(jìn)行多版本 JDK 的配置。比如：

export?JAVA_11_HOME="/Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home"
export?JAVA_8_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home"
export?JAVA_HOME=$JAVA_8_HOME
alias?jdk8="export?JAVA_HOME=$JAVA_8_HOME"
alias?jdk11="export?JAVA_HOME=$JAVA_11_HOME"

配置完成后執(zhí)行 jdk11 就可以切換到 JDK 11.

安裝 Android Studio 及 SDK

為什么要安裝 Android Studio ？其實(shí)筆者也一直沒(méi)想明白，作為前端開(kāi)發(fā)代碼編輯器首選 VS Code，感覺(jué)也沒(méi)有使用 Android Studio 的需求，估計(jì)是為了方便安裝 Android SDK 及安卓模擬器。訪問(wèn)https://developer.android.google.cn/studio/^[12]下載并安裝Android Studio，下載時(shí)如果下載速度比較慢可以嘗試使用迅雷或者通過(guò)可用的鏡像下載，同樣的一路next 進(jìn)行安裝。筆者當(dāng)前安裝的版本是 2022年2月17構(gòu)建的 Android Studio Bumblebee | 2021.1.1 Patch 2。

如下圖中的SDK Manager和Virtual Device Manager就是我們下載安裝 Android Studio 后所需要用到的工具，一個(gè)是 Android SDK 管理，一個(gè)是安卓模擬器管理。通常來(lái)說(shuō)，SDK Manager還可以在 Android Studio 的Preferences菜單中找到,具體路徑是Appearance & Behavior → System Settings → Android SDK;而Virtual Device Manager在頂部的工具欄中可以找到 。

按照 React Native 文檔推薦安裝 Android 11 的編譯環(huán)境，我們需要安裝：

• Android SDK Platform 30
• Intel x86 Atom_64 System Image
• Android SDK Build-Tools 30.0.2

除了在 Android Studio 中操作，也可以通過(guò)執(zhí)行命令行安裝：

sdkmanager?"platforms;android-30"?"system-images;android-30;default;x86_64"?"system-images;android-30;google_apis;x86"
sdkmanager?"cmdline-tools;latest"?"build-tools;30.0.2"

安裝完畢之后，就是配置環(huán)境變量,同樣的在~/.bash_profile進(jìn)行添加：

export?ANDROID_HOME=$HOME/Library/Android/sdk
export?PATH=$PATH:$ANDROID_HOME/emulator
export?PATH=$PATH:$ANDROID_HOME/tools
export?PATH=$PATH:$ANDROID_HOME/tools/bin
export?PATH=$PATH:$ANDROID_HOME/platform-tools

安裝 XCode 及 CocoaPods

如果我們還想體驗(yàn) React Native 開(kāi)發(fā) iOS，則還需要安裝 XCode 及 iOS 所需的編譯環(huán)境。如果 Mac 沒(méi)有足夠的存儲(chǔ)空間，建議直接放棄，畢竟蘋(píng)果的存儲(chǔ)不便宜啊。

安裝 Xcode 最簡(jiǎn)單的方法是通過(guò) App Store^[13] 安裝,安裝 XCode 會(huì)同時(shí)安裝 iOS 模擬器和所有必要的工具來(lái)構(gòu)建我們的 iOS 應(yīng)用程序。此外如果想使用 iOS 模擬器，還需自行選擇安裝，又是一筆不少的存儲(chǔ)支出！

接著還需安裝包管理器 CocoaPods：

sudo?gem?install?cocoapods
#?或者使用?brew?安裝
brew?install?cocoapods

至此， Android 和 iOS 的開(kāi)發(fā)環(huán)境搭建完畢，我們不僅可以使用 React Native 來(lái)開(kāi)發(fā)應(yīng)用，也可以直接使用原生進(jìn)行開(kāi)發(fā)，如果此時(shí)還想體驗(yàn) Taro 或者 Flutter，當(dāng)前的環(huán)境也是能夠滿足的。接下來(lái)，我們將在AppGallery Connect 中創(chuàng)建我們要開(kāi)發(fā)的應(yīng)用。

AGC 介紹及 APP 創(chuàng)建

AGC 全稱 AppGallery Connect，它是華為開(kāi)發(fā)者聯(lián)盟推出的一項(xiàng)服務(wù)，為開(kāi)發(fā)者提供移動(dòng)應(yīng)用全生命周期服務(wù)，覆蓋全終端全場(chǎng)景，降低開(kāi)發(fā)成本，提升運(yùn)營(yíng)效率，助力商業(yè)成功。總的來(lái)說(shuō)，AGC的使命就是助力開(kāi)發(fā)者商業(yè)成功。AGC能快速孵化創(chuàng)意、提高開(kāi)發(fā)效率、全球化分發(fā)、精細(xì)化運(yùn)營(yíng)、大數(shù)據(jù)分析……對(duì)于筆者而言，使用AGC主要還是因?yàn)樵诩?HMS Core 之前，需要在AGC中創(chuàng)建項(xiàng)目、創(chuàng)建應(yīng)用、打開(kāi)相關(guān)服務(wù)。這一切操作的前提是注冊(cè)華為賬號(hào)、認(rèn)證開(kāi)發(fā)者！

賬號(hào)準(zhǔn)備完畢，登錄 AppGallery Connect^[14] 創(chuàng)建我們將要開(kāi)發(fā)的應(yīng)用。這里筆者創(chuàng)建了一個(gè)名為HMS React Native的 Android 應(yīng)用。

通過(guò)執(zhí)行命令npx react-native init HMSReactNative初始化了一個(gè) React Native 應(yīng)用。期間，筆者也遇到依賴安裝網(wǎng)絡(luò)不暢的問(wèn)題，基本上是靠多執(zhí)行幾次安裝命令反復(fù)嘗試解決的，如果一直存在網(wǎng)絡(luò)報(bào)錯(cuò)的問(wèn)題，則需要用到一些靠譜的代理軟件來(lái)處理。

通過(guò)運(yùn)行指令npm run android、npm run ios我們分別能在 Android 模擬器和iOS模擬器上運(yùn)行 React Native 的 Hello World,值得注意的是首次運(yùn)行因?yàn)榧虞d依賴速度稍微慢些。這也就是 React Native 一直倡導(dǎo)的“一次學(xué)習(xí)，隨處編寫(xiě)”。

接著我們打開(kāi)AGC-我的項(xiàng)目^[15]完善一下應(yīng)用的信息，比如包名。React Native 初始化的應(yīng)用包名一般為com.項(xiàng)目名稱小寫(xiě)，例如com.hmsrectnative

如果需要在 iOS 中集成，那么我們還需在 AGC 中創(chuàng)建 iOS 應(yīng)用：

HMSCore SDK 集成

HMS 提供了全面的生態(tài)基礎(chǔ)開(kāi)放能力，比如圖形相關(guān)的 AR引擎、VR引擎，比如人工智能相關(guān)的機(jī)器學(xué)習(xí)服務(wù)等等，所以的這些能力相關(guān)的文檔和接入指南我們都可以通過(guò)訪問(wèn)HMS Core 官網(wǎng)^[16]獲取。本次集成我們以華為分析服務(wù)（Analytics Kit）為例，嘗試使用 React Native 集成進(jìn)行開(kāi)發(fā)。

AGC 開(kāi)通服務(wù)

我們使用Analytics Kit服務(wù)的時(shí)候，需要在AppGallery Connect上開(kāi)通Analytics Kit服務(wù)，如下圖中進(jìn)入到AGC-我的項(xiàng)目-華為分析找到項(xiàng)目概覽進(jìn)入相關(guān)頁(yè)面填寫(xiě)信息進(jìn)行開(kāi)啟。這里，筆者注意到AGC-我的項(xiàng)目-API 管理下有眾多的服務(wù)如推送服務(wù)、手語(yǔ)服務(wù)、云存儲(chǔ)、云托管、3D建模等等，除此之外，還提供服務(wù)端的Server SDK 配置，目前支持 Java 、NodeJS 服務(wù)端的集成。

開(kāi)啟Analytics Kit服務(wù)之后，HMS Core 官網(wǎng)貼地給出了集成文檔的入口，按照文檔的步驟我們基本能夠完成在 Android 和 iOS 的集成Analytics Kit。其實(shí)在React Native開(kāi)發(fā)過(guò)程中，如果集成的依賴有原生模塊提供的方法時(shí)，集成方法就如同原生依賴的集成，不過(guò)往往在使用第三方依賴時(shí)，我們通常還要考慮是否能夠兼容不同系統(tǒng)。像 hms-react-native-plugin^[17] ,目前只有react-native-hms-analytics實(shí)現(xiàn)了同時(shí)支持 Android 和 iOS，而且部分 API 也只有 Android才能使用。如果想在 iOS 中使用其他服務(wù)，還需開(kāi)發(fā)者自行實(shí)現(xiàn)原生模塊的開(kāi)發(fā)。

添加AGC配置文件及集成

Android 端和 iOS 端添加AGC文件略有不同，Android 需配置應(yīng)用簽名信息，而 iOS 需要使用 Xcode 進(jìn)行添加。

• Android

  ①在 React Native 的項(xiàng)目初始化過(guò)程中，自動(dòng)生成了debug.keystore,我們通過(guò)執(zhí)行命令生成 SHA256(PS:為了安全起見(jiàn)，請(qǐng)自行生成密鑰)：

  keytool?-list?-v?-keystore?android/app/debug.keystore
  

  ②將生成的 SHA256 配置到 AGC：

  ③下載agconnect-services.json并放置到 React Native 項(xiàng)目下android/src下

  

  ④配置SDK地址，如新增Maven倉(cāng)地址，修改android/build.gradle：

  buildscript?{
  ??//?......
  ??repositories?{
  ??????google()
  ??????mavenCentral()
  ??????//?配置HMS Core SDK的Maven倉(cāng)地址。
  ??????maven?{url?'https://developer.huawei.com/repo/'}
  ??}
  ??dependencies?{
  ??????classpath("com.android.tools.build:gradle:4.2.2")
  ??????//?增加agcp插件配置，推薦您使用最新版本的agcp插件。
  ??????classpath?'com.huawei.agconnect:agcp:1.6.0.300'
  ??}
  }
  
  allprojects?{
  ????repositories?{
  ????????//?......
  ????????//?配置HMS Core SDK的Maven倉(cāng)地址。
  ????????maven?{url?'https://developer.huawei.com/repo/'}
  ????}
  }
  
  

  ⑤集成react-native-hms-analytics^[18],HMS Core 官方為 React Native 開(kāi)發(fā)者提供了專用的 npm 包，我們通過(guò) npm 包的安裝指令安裝：

  npm?i?@hmscore/react-native-hms-analytics
  

  修改android/app/build.gradle:

  apply?plugin:?"com.huawei.agconnect"
  //?...
  implementation?project(':react-native-hms-analytics')
  

  修改android/settings.gradle:

  include?':react-native-hms-analytics'
  project(':react-native-hms-analytics').projectDir?=?new?File(rootProject.projectDir,?'../node_modules/@hmscore/react-native-hms-analytics/android')
  

• iOS

  ①下載agconnect-services.plist并放置到 React Native 項(xiàng)目下iOS 應(yīng)用模塊的根目錄

  

  ② react-native-hms-analytics^[19] npm 包安裝：

  npm?i?@hmscore/react-native-hms-analytics
  

  ③ 安裝 Pod 依賴：

  cd?ios?&&?pod?install
  

  ④ 初始化配置，修改ios/HMSReactNative/AppDelegate.m,在AppDelegate中添加:

  [HiAnalytics?config];?//?Initialization
  

多端開(kāi)發(fā)

上文的步驟中我們已經(jīng)分別在 Android 和 iOS 中集成了 HMS Core 中的分析服務(wù) Analytics Kit，接下來(lái)就是見(jiàn)真章的時(shí)候了。使用 React Native，我們能夠?qū)崿F(xiàn)一套代碼多端運(yùn)行，快速開(kāi)發(fā) Android 和 iOS 兩端的應(yīng)用。直接上蹩腳的代碼：

/**
?*?Sample?React?Native?App
?*?https://github.com/facebook/react-native
?*
?*?@format
?*?@flow?strict-local
?*/

import?React,?{useState}?from?'react';
import?{
??Text,
??ScrollView,
??Platform,
??useColorScheme,
??SafeAreaView,
??StatusBar,
??Button,
??ToastAndroid,
??Alert,
??StyleSheet,
}?from?'react-native';

import?{Colors}?from?'react-native/Libraries/NewAppScreen';
//?引入?HMS?Analytics?Kit
import?HMSAnalytics?from?'@hmscore/react-native-hms-analytics';

const?App:?()?=>?Node?=?()?=>?{
??const?isDarkMode?=?useColorScheme()?===?'dark';
??const?[aaid,?setAaid]?=?useState('');
??const?[userProfile,?setUserProfile]?=?useState({});
??const?backgroundStyle?=?{
????backgroundColor:?isDarkMode???Colors.darker?:?Colors.lighter,
??};
??//?Android?初始化
??if?(Platform.OS?===?'android')?{
????HMSAnalytics.getInstance()
??????.then(res?=>?{
????????console.log({isInstanceAvailable:?true});
??????})
??????.catch(err?=>?console.log('getInstance',?err));
??}

??const?getAAID?=?async?()?=>?{
????//?獲取?AAID
????HMSAnalytics.getAAID()
??????.then(res?=>?{
????????console.log('getAAID',?res);
????????Platform.OS?===?'ios'???setAaid(res)?:?setAaid(res.aaid);
??????})
??????.catch(err?=>?console.log('getAAID',?err));
????//?開(kāi)啟分析服務(wù)
????HMSAnalytics.setAnalyticsEnabled(true)
??????.then(res?=>?console.log('setAnalyticsEnabled',?res))
??????.catch(err?=>?console.log('setAnalyticsEnabled:error',?err));
??};

??const?gerUserProfile?=?async?()?=>?{
????//?獲取用戶信息
????HMSAnalytics.getUserProfiles(true)
??????.then(res?=>?{
????????console.log('getUserProf',?res);
????????setUserProfile(res);
??????})
??????.catch(err?=>?console.log('getUserProf:error',?err));
??};

??const?sendEvent?=?async?()?=>?{
????const?eventId?=?'$CheckIn';
????const?bundle?=?{
??????$Days:?1,
??????UserProfile:?JSON.stringify(userProfile),
????};
????//?發(fā)送事件
????HMSAnalytics.onEvent(eventId,?bundle)
??????.then(res?=>?{
????????console.log('onEvent',?res);
????????Platform.OS?===?'ios'
????????????Alert.alert('Success!')
??????????:?ToastAndroid.show('Success!',?ToastAndroid.SHORT);
??????})
??????.catch(err?=>?console.log('onEvent:error',?err));
??};

??return?(
????
??????'light-content'?:?'dark-content'}?/>
??????{aaid}
??????????????onPress={()?=>?{
??????????getAAID();
????????}}
????????title="Get?AAID"
??????/>
??????
????????{userProfile
????????????Object.keys(userProfile)
??????????????.sort()
??????????????.map(function?(key)?{
????????????????return?(
??????????????????
????????????????????{key}:{userProfile[key]}
??????????????????
????????????????);
??????????????})
??????????:?null}
??????

??????????????onPress={()?=>?{
??????????gerUserProfile();
????????}}
????????title="Get?User?Profile"
??????/>
??????????????onPress={()?=>?{
??????????sendEvent();
????????}}
????????title="Send?Event"
??????/>
????
??);
};

const?styles?=?StyleSheet.create({
??contentBox:?{
????padding:?20,
????backgroundColor:?'#eee',
??},
??h_300:?{
????height:?300,
??},
});

export?default?App;

以上代碼效果如下：

總的來(lái)說(shuō)做了三件事：獲取 AAID 、獲取 UserProfiles、發(fā)送埋點(diǎn)事件。這里著重說(shuō)說(shuō)分析服務(wù)中的埋點(diǎn)分析。首先我們先設(shè)置埋點(diǎn)，Analytics Kit 中提供了游戲、教育、電商、運(yùn)動(dòng)健康、房產(chǎn)、汽車、通用、金融理財(cái)、出行旅游等眾多行業(yè)模板，借助于模板，我們能快速設(shè)置埋點(diǎn)事件；比如打卡事件：

接著，編寫(xiě)調(diào)用代碼，此處沒(méi)有進(jìn)行封裝，實(shí)際業(yè)務(wù)中我們一般會(huì)對(duì)埋點(diǎn)方法進(jìn)行封裝：

HMSAnalytics.onEvent(eventId,?bundle)

eventId就是事件ID,如通用模板中打卡事件的id是$CheckIn,bundle就是事件入?yún)ⅲ绱蚩ㄊ录J(rèn)的入?yún)?code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(60, 112, 198);">$Days,還可以添加自定義參數(shù)，如上圖中UserProfile。

接入完畢，我們還可以對(duì)埋點(diǎn)進(jìn)行驗(yàn)證，不過(guò)前提是需要開(kāi)啟調(diào)試模式，此處以 iOS 為例，先在 XCode 中加入調(diào)試參數(shù)-HADebugEnabled上文中代碼里邊就實(shí)現(xiàn)了簡(jiǎn)單的事件上報(bào)，點(diǎn)擊Send Event就會(huì)觸發(fā)埋點(diǎn)事件，我們?cè)?code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(60, 112, 198);">埋點(diǎn)驗(yàn)證可以查看調(diào)用結(jié)果。

至此，我們使用 React Native 技術(shù)棧借助 HMS Core 實(shí)現(xiàn)了一些 JavaScript 本身不具備的能力。

回顧及總結(jié)

集成之路并非一帆風(fēng)順，筆者在整個(gè)實(shí)操過(guò)程中還是遇到了翻車，這里簡(jiǎn)單記錄一下：

• 集成報(bào)錯(cuò)

  Plugin with id 'maven' not found.

• iOS 集成之后獲取不到 AAID

集成步驟有遺漏初始化配置，導(dǎo)致沒(méi)有正常連接 AGC 服務(wù)。

總得來(lái)說(shuō)，我們集成 HMS Core 還是非常順利的，理想狀態(tài)下，我們可以一套代碼實(shí)現(xiàn) HMS Core 能力的落地，不過(guò)目前如果使用 React Native 開(kāi)發(fā)的話， HMS Core 在 iOS 中使用還需開(kāi)發(fā)者自行編寫(xiě)原生模塊的代碼，這對(duì)于新手來(lái)說(shuō)還是有一定門(mén)檻，期待各路開(kāi)發(fā)“用愛(ài)發(fā)電”不斷完善和豐富 HMS Core，這樣無(wú)論是 Android、iOS，還是 Web、鴻蒙，無(wú)論是快應(yīng)用，還是云開(kāi)發(fā)，通過(guò) HMS Core，我們通通能把握！

本文首發(fā)于華為開(kāi)發(fā)者聯(lián)盟^[20]，公眾號(hào)：胡琦 同步更新。

參考資料