taro3 + vue3 + ts 跨平台体验记录

taro3 + vue3 + ts 跨平台体验记录,根据进度不定期更新。

  • 目标平台包含:H5、微信小程序、APP。
  • 开发环境:windows

安装cli【官方安装文档】

npm install -g @tarojs/cli

常用命令

// 查看taro版本
npm info @tarojs/cli

创建demo项目

  1. taro init myApp

第一步就报错了,原因是powershall权限不够。解决办法 :使用管理员身份运行。
另外,终端最好使用cmd或者powershall,因为git bash还不能处理命令行执行过程中的选项操作。

taro : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\taro.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参
阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ taro init taro_test
+ ~~~~
    + CategoryInfo          : SecurityError: (:) [],PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

成功执行命令后,根据步骤做选项,这是我的选择:
初始选项
因为会自动安装依赖,所以时间确实长一点。

如果依赖安装失败,可以自行进入项目根目录,执行install安装。myApp就是项目目录

// 进入目录
cd myApp
// 然后尝试使用npm | yarn | cnpm安装
yarn
npm install
cnpm install

这是自动安装成功后的界面
自动安装成功界面
命令行进入myApp后就可以使用开发和打包等命令了

运行dev环境

在运行环境前,先看看根目录下的package.json文件里的scripts,这里定义了常用的脚本命令,可直接使用

"scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },

dev开头的就是默认支持的开发环境脚本,其中这三个是我重点关注 的:

  • h5(h5 web)
  • rn(react native app)
  • weapp(微信小程序)

希望一套代码能顺利支持这三个平台,下面进入目录并开启h5

// 进入目录
cd myApp

taro多平台开发时要注意兼容顺序,h5 > 小程序 > app,所以如果目标是app,源码要以rn的规则作为边界。


真实项目总结:taro2 + react => 微信小程序

打包

  1. 小程序
  • 打包:包的字节数受小程序平台规则的限制,所以功能多的小程序要考虑分包、按需加载、打包瘦身,这些最好提前规划,后补可能会影响源码结构
  1. taro版本
  • 维护中的项目需要关注版本和相关包版本,可能会出现版本错位造成的错误,比如打包出错。

结束语

这篇文章好像有点鸡肋,早早地被遗忘在了草稿箱里,好在taro的最新版本仍然是3(4是未发行版),算是自己的关于taro的使用笔记。有机会再更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/351426.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Unity3D日常开发】Unity3D中设置Text行首不出现标点符号

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 在开发中会遇到Text的文本内容行首出现标点符号的情况&#xf…

Ultraleap 3Di新建项目之给所有的Joint挂载物体

工程文件 Ultraleap 3Di给所有的Joint挂载物体 前期准备 参考上一期文章,进行正确配置 Ultraleap 3Di配置以及在 Unity 中使用 Ultraleap 3Di手部跟踪 新建项目 初始项目如下: 新建Create Empty 将新建的Create Empty,重命名为LeapPro…

第四篇【传奇开心果系列】beeware的Toga开发移动应用示例:健身追踪应用

传奇开心果博文系列 系列博文目录beeware的Toga开发移动应用示例系列 博文目录前言一、记录存储运动活动数据二、添加添加统计显示功能三、添加图表显示数据分析功能四、增加健身计划管理五、增加备份数据恢复数据功能六、初步整合代码示例七、增加登录验证功能八、完成最终整合…

利用STM32CubeMX和Keil模拟器,3天入门FreeRTOS(5.1) —— 队列集

前言 (1)FreeRTOS是我一天过完的,由此回忆并且记录一下。个人认为,如果只是入门,利用STM32CubeMX是一个非常好的选择。学习完本系列课程之后,再去学习网上的一些其他课程也许会简单很多。 (2&am…

通过css隐藏popover的效果:即hover显示或隐藏另一个元素

场景一&#xff1a;隐藏旁边的兄弟元素 在原生的微信小程序上实现下图hover后出现提示的效果&#xff0c;如果是PC端就可以直接使用el-popover&#xff0c;但是小程序&#xff0c;我没有看到适合的组件。 样式代码<van-field value"{{ username }}" clearable pl…

数据结构与算法——队列

概述 计算机科学中&#xff0c;queue 是以顺序的方式维护的一组数据集合&#xff0c;在一端添加数据&#xff0c;从另一端移除数据。添加的一端称为尾&#xff0c;移除的一端称为头。 功能 插入offer(value : E) : boolean  取值并移除poll() : E  取值peek() : E  判断…

RCC——使用HSE/HSI配置时钟

RCC 文章目录 前言一、背景二、 2.1 2.2 总结 前言 前期疑问&#xff1a;1、RCC是什么意思。 2、最终配好的72M是系统时钟吗&#xff1f; 3、一共有哪些时钟 本文目标&#xff1a;将PLL时钟配置成72M 疑问解答&#xff1a;最终配好的时钟是PLL时钟。可以看一下时钟图就知道…

面向对象编程(进阶)(上)

文章目录 一. 关键字&#xff1a;this1.1 this是什么&#xff1f;1.2 什么时候使用this1.2.1 实例方法或构造器中使用当前对象的成员1.2.2 同一个类中构造器互相调用 1.3 练习 二. 面向对象特征二&#xff1a;继承(Inheritance)2.1 继承的概述2.1.1 生活中的继承2.1.2 Java中的…

LeetCode刷题---二叉树的最大深度

解题思路: 二叉树的最大深度是从根节点到最远叶子节点的最长路径上的节点数。 对于任意一个节点&#xff0c;其深度为其左子树深度和右子树深度的最大值加1。 最大高度是从根节点到最远叶子节点的最长路径的长度。 使用先序遍历的方法来找出二叉树的最大深度&#xff0c;即先访…

linuxshell日常脚本命令之if判断

shell脚本if中判断大于、小于、等于、不等于的符号 脚本有问题&#xff0c;有没有哪位大佬能帮忙检查一下&#xff1f; #!/bin/bash#run_num$(squeue | grep shifting | wc -l) run_numsqueue | grep shifting | wc -l #run_num$(squeue | grep shifting | wc -l 2>&1…

Qt环境搭建及基础

目录 Qt背景及环境搭建 ​编辑 基础语法 数据类型 内联函数 inline Lambda表达式 通过函数调用中加lambda匿名函数 参数捕获 Lambda和内联函数区别​编辑 函数指针 Lambda匿名函数小案例 通过结构体初始化&#xff0c;和指针初始化结构体 c类的引入 &#xff1a;&am…

python黑马模块

1、使用内置模块 # import通过.使用模块内部的全部功能 """ import time print("ff") time. sleep(5) print("as")# 使用from 导入某个功能 from time import sleep print("ff") sleep(5) print("as")# 使用 * 导入全部…

2024年,我与CSDN的邂逅之旅:一段燃烧激情、成就梦想的博客专家之路

文章目录 初入CSDN知识分享的本质什么有用学什么 成为博客专家的经历成为博客专家有什么好处实际好处隐形好处 今天获得了CSDN认证的博客专家&#xff0c;感觉很开心~分享一下这个始末。分享一下我和CSDN的5年邂逅。 初入CSDN 进入CSDN已经五年了&#xff0c;大一开始写博客&a…

Azure Private endpoint DNS 记录是如何解析的

Private endpoint 从本质上来说是Azure 服务在Azure 虚拟网络中安插的一张带私有地址的网卡。 举例来说如果Storage account在没有绑定private endpoint之前&#xff0c;查询Storage account的DNS记录会是如下情况&#xff1a; Seq Name …

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Swiper容器组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Swiper容器组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Swiper容器组件 滑块视图容器&#xff0c;提供子组件滑动轮播显示的能力。…

浪花 - 响应拦截器(强制登录)

1. 配置响应拦截器 import axios from axios;const myAxios axios.create({baseURL: http://localhost:8080/api/, });myAxios.defaults.withCredentials true;// 请求拦截器 myAxios.interceptors.request.use(function (config) {// Do something before request is sentc…

windows上使用anconda安装tensorrt环境

windows上使用anconda安装tensorrt环境 1 安装tensorrt1.1 下载最新的稳定的tensorrt 8.6.1(tensorrt对应的cuda、cudnn等版本是参考链接4)1.2 将tensorrt添加到环境变量1.3 安装tensorrt依赖1.4 安装Pycuda1.5 安装pytorch 2 测试2.1 测试TensorRT 样例(这个测试主要来源于参考…

03-Nacos-服务注册基于spring cloud实现

本项目基于spring boot 多模块 注意spring -boot、spring-cloud、spring-cloud-alibaba的版本兼容性 1.1、父级pom依赖 <properties><spring-boot.version>2.7.18</spring-boot.version><spring.cloud.version>2021.0.1</spring.cloud.version&g…

python函数式编程

函数式编程是一种编程范式&#xff0c;它强调使用纯函数、无副作用和不可变性。在Python中&#xff0c;可以使用高阶函数&#xff08;接受其他函数作为参数的函数&#xff09;和lambda表达式来实现函数式编程。 Python函数式编程主要包括以下内容&#xff1a; 头等函数&#…

RustDesk私有化部署,自建远程桌面搭建教程

以linux操作系统为例&#xff1a; 解压安装 # 使用wget进行下载1.1.8-2版本&#xff08;最新版本可以看上述发布地址&#xff09; wget https://github.com/rustdesk/rustdesk-server/releases/download/1.1.8-2/rustdesk-server-linux-amd64.zip # 使用unzip解压 unzip rust…
最新文章