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.mzph.cn/news/650800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring-boot redis stream消息队列demo-及死信简单处理

Redis stream 是 Redis 5 引入的一种新的数据结构,它是一个高性能、高可靠性的消息队列,主要用于异步消息处理和流式数据处理。在此之前,想要使用 Redis 实现消息队列,通常可以使用例如:列表,有序集合、发布…

【C++】istream类型对象转换为逻辑条件判断值

前言 大家好吖,欢迎来到 YY 滴 系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY的《Linux》专…

LiveGBS流媒体平台GB/T28181常见问题-如何快速查看推流上来的摄像头并停止摄像头推流?

LiveGBS流媒体平台GB/T28181常见问题-如何快速查看推流上来的摄像头并停止摄像头推流? 1、负载信息2、负载信息说明3、会话列表查看3.1、会话列表 4、停止会话5、搭建GB28181视频直播平台 1、负载信息 实时展示直播、回放、播放、录像、H265、级联等使用数目 2、负…

Python算法题集_接雨水

本文为Python算法题集之一的代码示例 题目42:接雨水 说明:给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水 示例 1: 输入:height [0,1,0,2,1,0,1,3,2,1,2,1]…

ElasticSearch7.7.1集群搭建

前言 Elasticsearch(ES)是一个基于Apache Lucene的分布式、高扩展、近实时的搜索引擎,主要用于海量数据快速存储、实时检索、高效分析的场景。通过简单易用的RESTful API,Elasticsearch隐藏了Lucene的复杂性,使得全文搜…

数论Leetcode204. 计数质数、Leetcode858. 镜面反射、Leetcode952. 按公因数计算最大组件大小

Leetcode204. 计数质数 题目 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 代码 class Solution:def countPrimes(self, n: int) -> int:if n < 2:return 0prime_arr [1 for _ in range(n)]prime_arr[0], prime_arr[1] 0, 0ls list()for i in…

Python编程 从入门到实践(项目二:数据可视化)

本篇为实践项目二&#xff1a;数据可视化。 配合文章python编程入门学习&#xff0c;代码附文末。 项目二&#xff1a;数据可视化 1.生成数据1.1 安装Matplotlib1.2 绘制简单的折线图1.2.1 修改标签文字和线条粗细1.2.2 校正图形1.2.3 使用内置样式1.2.4 使用scatter()绘制散点…

点云格式-PCD格式介绍

PCD格式介绍 一、概述二、PCD 版本三、文件格式头信息四、数据存储格式类型五、优于其他文件格式的优点六、例子 一、概述 PCD文件格式是PCL库最常用的一种数据格式、也是其提供的一个独有的数据格式&#xff0c;PCD文件格式并不是要重新发明轮子&#xff0c;而是为了补充现有的…

59.螺旋矩阵II(力扣LeetCode)

59.螺旋矩阵II 题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 2&#xff1a; 输…

【测试】测试用例场景设计

专注 文章目录 用例设计公式登录测试用例测试用例设计思路购物车测试用例水杯设计测试用例发红包测试用例1. 正常情况下的测试用例&#xff1a;2. 边界情况下的测试用例&#xff1a;3. 异常情况下的测试用例&#xff1a;4. 特殊情况下的测试用例&#xff1a; 微信朋友圈1. 正常…

Django模型(一)

一、介绍 模型,就是python中的类对应数据库中的表 1.1、ORM ORM 就是通过实例对象的语法,完成关系型数据库的操作的技术,是"对象-关系映射"(Object/Relational Mapping) 的缩写 ORM 把数据库映射成对象 1.2、示例 1.2.1、模型 from django.db import models…

字节跳动员工:5年攒了8400股,价值940W,财富自由的味道

字节跳动员工&#xff1a;5年攒了8400股&#xff0c;价值940W&#xff0c;财富自由的味道 最近&#xff0c;一位字节跳动员工在网络上爆料了他的财富增长故事&#xff0c;引起了广泛关注。这位员工在贴文中自豪地宣布&#xff0c;他加入字节跳动的五年间从未卖出手中的股票&am…

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

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

查询redis路径,清除redis缓存

查询redis路径 1、执行ps -ef | grep redis 命令&#xff0c;结果如下&#xff08;记住PID&#xff09; 2、执行ps -u 系统用户名&#xff0c;进一步确定进程id, 我这里的系统用户名是root&#xff0c;执行ps -u root&#xff0c;结果如下&#xff1a; 结合1的操作结果图可知…

qtcreator使用qwt库

先配置好.pro文件&#xff0c;再去ui界面拖拽控件 ui界面会更改配置&#xff0c;故顺序错一个&#xff0c;就凉了&#xff0c;重来吧 准备&#xff1a;库&#xff0c;库头文件 库文件&#xff1a;路径如下 头文件&#xff1a;路径如下 鼠标->右键 &#xff08;有些不用勾…

『OpenCV-Python|鼠标作画笔』

Opencv-Python教程链接&#xff1a;https://opencv-python-tutorials.readthedocs.io/ 本文主要介绍OpenCV-Python如何将鼠标作画笔绘制圆或者矩形。 示例一&#xff1a;图片上双击的位置绘制一个圆圈 首先创建一个鼠标事件回调函数&#xff0c;鼠标事件发生时就会被执行。鼠标…

uni-app 微信小程序之红包雨活动

文章目录 1. 页面效果2. 页面样式代码 1. 页面效果 GIF录屏有点卡&#xff0c;实际比较丝滑 每0.5s掉落一个红包控制4s后自动移除红包点击红包消除红包&#xff08;或者自行1&#xff0c;或者弹窗需求&#xff09; 2. 页面样式代码 <!-- 红包雨活动 --> <template>…

C++中map和set的使用

&#xff08;图片来源于网络&#xff09; &#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶…

力扣算法-Day20

541. 反转字符串II 给定一个字符串 s 和一个整数 k&#xff0c;从字符串开头算起&#xff0c;每计数至 2k 个字符&#xff0c;就反转这 2k 字符中的前 k 个字符。 如果剩余字符少于 k 个&#xff0c;则将剩余字符全部反转。如果剩余字符小于 2k 但大于或等于 k 个&#xff0c…

【yaml 文件使用】pytest+request 框架中 yaml 配置文件使用

又来进步一点点~~ 背景&#xff1a;最近在学习pytestrequest框架写接口测试自动化&#xff0c;使用yaml文件配置更方便管理用例中的数据&#xff0c;这样更方便 yaml 介绍&#xff1a; 什么是 yaml 文件&#xff1a;YAML 是 “YAML Ain’t a Markup Language”&#xff08;Y…