首页 > 其他分享 >搭建vue3版taro以及相关api

搭建vue3版taro以及相关api

时间:2024-03-15 09:33:23浏览次数:28  
标签:taro process weapp h5 编译 api ENV vue3 Taro

1.安装Taro

1.使用 npm 或者 yarn 全局安装 @tarojs/cli
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

2.项目初始化:

taro init myApp

编译运行
使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。
Taro 编译分为 dev 和 build 模式:
dev 模式(增加 --watch 参数) 将会监听文件修改。
build 模式(去掉 --watch 参数) 将不会监听文件修改,并会对代码进行压缩打包。 dev 模式生成的文件较大,设置环境变量 NODE_ENV 为 production 可以开启压缩,方便预览,但编译速度会下降。

3.内置环境变量

Taro 在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。

process.env.TARO_ENV用于判断当前的编译平台类型。
取值:weapp / swan / alipay / tt / qq / jd / h5 / rn
可以通过这个变量来区分不同环境,从而使用不同的逻辑。
在编译阶段,会移除不属于当前编译类型的代码,只保留当前编译类型下的代码,例如: 1. 在微信小程序和 H5 端分别引用不同资源:
源码

if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}

编译后(微信小程序)

if (true) {
  require('path/to/weapp/name')
}

编译后(H5)

if (true) {
  require('path/to/h5/name')
}

2. 决定不同端要加载的组件
源码(React JSX)

<View>
  {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
  {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>`

编译后(微信小程序)

<View>
  {true && <ScrollViewWeapp />}
</View>

编译后(H5)

<View>
  {true && <ScrollViewH5 />}
</View>

组件文件中跨平台支持指定平台保留样式:

/*  #ifdef  %PLATFORM%  */
模板代码
/*  #endif  */

指定平台剔除样式:

/*  #ifndef  %PLATFORM%  */
模板代码
/*  #endif  */

标签:taro,process,weapp,h5,编译,api,ENV,vue3,Taro
From: https://www.cnblogs.com/mydevelop/p/18068241

相关文章

  • vue3 引入 ElementUI
     vue3使用elementUI会报错,需要引入elementUIPlus。Plus官网:https://element-plus.gitee.io/zh-CN/guide/quickstart.htmlUI官网:https://element.eleme.cn/#/zh-CN/component/installation1.安装ElementUIPlusnpminstallelement-plus--savepackage.json检查。......
  • springboot3+vue3(十一)springboot多环境开发
    在开发中我们往往会遇到,本地环境、测试环境、生产环境分别一套配置。如数据库连接,端口号等配置各不相同的问题。 1、多文件配置    2、多文件分组配置如果配置文件有很多的配置信息几百行的情况,为了方便维护我们可以根据功能的情况进行分组拆分。如:服务器相关配......
  • .NetCore Web Api 项目Docker部署
    .NetCoreWebApi项目Docker部署.Net5之后版本编写的项目代码编译后均可以分别部署在Windows、Linux系统下。只需要安装对应的SDK或者运行时。这篇文章主要介绍.Net项目编译之后通过docker镜像部署WebApi项目了解dotnet命令dotnet命令详细说明链接。不得不说微软的文档......
  • vue3 瀑布流 vue-masonry使用方法
    npminstallvue-masonry--savemain.js文件中引入import{VueMasonryPlugin}from"vue-masonry";app.use(VueMasonryPlugin)在页面中使用<divv-masonrytransition-duration="0.3s"item-selector=".item"......
  • 小程序API能力集成指南——场景API汇总
    条件APIty.device.createCondition创建条件需引入DeviceKit,且在>=2.5.4版本才可使用参数Objectobject属性类型默认值必填说明typestring是条件类型conditionstring否条件内容indexnumber否索引completefunction否接口调用结束的回调函数(调用成功、失败都会执行)success......
  • Android各版本代号和对应API等级
    系统版本 代号 API等级Android13.0 T 33Android12.0 S 31,32Android11.0 R 30Android10.0 Q 29Android9.0 Pie 28Android8.1 Oreo 27Android8.0 Oreo 26Android7.1.1 Nougat 25Android7.0 Nougat ......
  • Web Audio API 第1章 基础篇
    WebAudioAPI第1章基础篇我查了一下WebAudioAPI蝙蝠书居然在2013年就出版了我又看了一下我的“豆瓣读书”频道内,这本书加入到“在读”标签是在2021年了一直没有坚持看这本书的原因有两点,一是本书是英文版的,不像中文看的那么流畅二是在前端开发业务中一直没有遇......
  • 淘口令解析源头api接口
    淘口令网提供淘口令解析功能,淘口令解密工具可一键将淘口令文本解析还原成URL链接,可把淘口令转换成网址链接,方便查看口令图片,口令标题,口令有效期等,不限制1.口令解析工具可一键将加密的淘口令代码解析还原成正常链接。2.主要给用户提供电脑端查看口令内容,和打开口令里面......
  • 【Vue3】element-plus按需自动导入的配置 以及icon不显示的解决方案
    首先需要安装unplugin-vue-components,unplugin-auto-import,unplugin-icons三款插件。npminstall-Dunplugin-vue-componentsunplugin-auto-importunplugin-icons然后vite.config.js里加入下面的配置:import{defineConfig}from"vite";importVuefrom"@vitejs/plug......
  • RAG实战6-如何在LlamaIndex中使用自己搭建的API
    RAG实战6-如何在LlamaIndex使用自己搭建的大模型API在搭建一个大模型API服务中,我们介绍了如何使用SWIFT框架搭建一个大模型API服务。在RAG实战1-5中,我们一直使用的是本地加载大模型的方式来调用大模型,本文将介绍如何在LlamaIndex中使用自己搭建的大模型API。LlamaIndex支持部分......