一、项目初始化
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样式时，不要写新特性。
网友评论