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

简介: 【前端】taro 跨端应用环境搭建

一、项目初始化

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


image.png



二、微信小程序:


  1. 启动微信小程序开发调试
npm run dev:weapp


image.png

打开 微信开发者工具导入项目

image.png


在微信开发者工具查看调试信息

image.png



三、h5应用


  1. 启动h5开发调试
npm run dev:h5


image.png


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


image.png


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



四、react-native 应用


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


  1. 通过rn官网教程,准备nodejs 和android studio基础环境,注意官网推荐的jdk版本,一定要保持一致,否则很可能踩坑。([2023-02-26]当前推荐的版本是jdk11,我最开始时用的jdk19,降了版本才搞定),按照官网教程成功运行起来即表示基础环境没问题了,下面才是重点。
  2. 配置项目 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'
    },
  }
}


image.png


  1. 下载taro调试程序
    前往git下载地址,医嘱一定要下载app-release.apk。(坑:我第一次下载了个app-debug.apk,肠子都悔青了)
  2. 下载Taro Native Shell 项目到本地
  3. 修改 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


  • 这是新增的内容,意思是加上代理
  1. 执行壳程序启动命令


# 更新相关依赖。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 文件删掉,将下载好的文件复制进去,即可继续执行壳程序启动命令。


  1. 手机接上usb,开启开发者模式,使用adb 连接上


adb adevices

image.png

  1. 启动rn调试
npm run dev:rn --qr


image.png


打开taro调试程序,填上电脑ip:端口,输入法软键盘确认。

image.png


查看安卓手机调试界面


image.png


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



目录
相关文章
|
2月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
77 3
|
2月前
|
JavaScript 前端开发 测试技术
构建高效可维护的前端应用
构建高效可维护的前端应用
|
1月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
2月前
|
前端开发 项目管理
Gitflow分支策略及其在前端工程化中的应用
Gitflow 分支策略也并非适用于所有项目。对于一些小型或简单的前端项目,可能会显得过于复杂。在实际应用中,需要根据项目的具体情况和团队的需求进行适当调整和优化。
|
2月前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
2月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
2月前
|
前端开发
结合具体案例分析Gitflow分支策略在大型前端项目中的应用优势
通过这个具体案例可以看出,Gitflow 分支策略在大型前端项目中能够提供有条不紊的开发环境,保障项目的稳定性和持续发展。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
63 5
|
2月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
63 8
|
2月前
|
编解码 监控 JavaScript
打造高效前端应用
打造高效前端应用
39 1