593. 【前端】taro 跨端应用环境搭建

2023-02-26 本文已影响0人七镜

一、项目初始化

npm install -g @tarojs/cli
npx @tarojs/cli init shenji_qijing_client_taro

二、微信小程序：

启动微信小程序开发调试

npm run dev:weapp

打开微信开发者工具导入项目
在微信开发者工具查看调试信息

三、h5应用

启动h5开发调试

npm run dev:h5

自动打开浏览器查看调试界面

可以看到，同样界面，不但在微信小程序中能用，在浏览器中也能用

四、react-native 应用

提前说下，这个坑比较多。

通过rn官网教程，准备nodejs 和android studio基础环境，注意官网推荐的jdk版本，一定要保持一致，否则很可能踩坑。（[2023-02-26]当前推荐的版本是jdk11，我最开始时用的jdk19，降了版本才搞定），按照官网教程成功运行起来即表示基础环境没问题了，下面才是重点。
配置项目 shenji_qijing_client_taro下的 config.index.js

{
  rn: {
    output: {
      iosSourceMapUrl: '', // sourcemap 文件url
      iosSourcemapOutput: '../taro-native-shell/ios/main.map', // sourcemap 文件输出路径
      iosSourcemapSourcesRoot: '', // 将 sourcemap 资源路径转为相对路径时的根目录
      androidSourceMapUrl: '',
      androidSourcemapOutput: '../taro-native-shell/android/app/src/main/assets/index.android.map',
      androidSourcemapSourcesRoot: '',
      ios: '../taro-native-shell/ios/main.jsbundle',
      iosAssetsDest: '../taro-native-shell/ios',
      android: '../taro-native-shell/android/app/src/main/assets/index.android.bundle',
      androidAssetsDest: '../taro-native-shell/android/app/src/main/res'
    },
  }
}

下载taro调试程序
前往git下载地址，医嘱一定要下载app-release.apk。（坑：我第一次下载了个app-debug.apk，肠子都悔青了）

下载Taro Native Shell 项目到本地
修改 taro-native-shell 项目下的 gradle.properties 文件

systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=8001

systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=8001

android.disableAutomaticComponentCreation=true

这是新增的内容，意思是加上代理

执行壳程序启动命令

# 更新相关依赖。Taro 版本更新后执行，用于同步 peerDependencies。
yarn upgradePeerdeps
yarn android

[坑]执行了之后，还是会出现下载不到 jar 下载不到 aar 文件的错误，这时需要根据报错信息手动下载，并将手动下载的文件复制到指定位置（我的是在：C:\Users\FENG.gradle\caches\modules-2\files-2.1 目录下，找不到的可以在C盘搜缺失包的关键字即可。）。

比如：

coordinatorlayout-1.0.0.aar

media-1.0.0.aar

exifinterface-1.0.0.aar

hermes-engine-0.71.0-rc.0-debug.aar

guava-23.0.jar

kotlin-reflect-1.2.0.jar

下载好文件，并且找到文件对应的位置之后，将原目录下的 .pom 文件删掉，将下载好的文件复制进去，即可继续执行壳程序启动命令。

手机接上usb，开启开发者模式，使用adb 连接上

adb adevices

启动rn调试

npm run dev:rn --qr

打开taro调试程序，填上电脑ip:端口，输入法软键盘确认。
查看安卓手机调试界面

至此跨端Taro 应用环境准备完毕，后面可以继续补充内容了。另值得一提的是：由于需要跨端，所以为了兼容性考虑，以后在写css样式时，不要写新特性。

593. 【前端】taro 跨端应用环境搭建

一、项目初始化

二、微信小程序：

三、h5应用

四、react-native 应用

猜你喜欢

热点阅读