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