taro+taro-ui学习

雪球干死黄旭东

于 2024-10-15 17:10:22 发布

阅读量1.6k

点赞数 8

分类专栏： Z类分类_TypeScript 文章标签： taro ui 学习

本文链接：https://blog.csdn.net/yycoolsam/article/details/142362916

版权

taro

参考文章：https://taro-docs.jd.com/docs/GETTING-STARTED
参考文章：https://github.com/NervJS/taro

安装taro

Taro 项目基于 node，请确保已具备较新的 node 环境（>=16.20.0），推荐使用 node 版本管理工具 nvm 来管理 node，这样不仅可以很方便地切换 node 版本，而且全局安装时候也不用加 sudo 了。

CLI 工具安装

使用下面语句安装-全局安装

npm install -g @tarojs/cli

查看 Taro 全部版本信息

查询语句

npm info @tarojs/cli

版本信息

@tarojs/cli@4.0.5 | MIT | deps: 16 | versions: 926
cli tool for taro                                 
https://github.com/NervJS/taro#readme             
                                                  
keywords: taro, weapp                             

bin: taro

dist
.tarball: https://registry.npmmirror.com/@tarojs/cli/-/cli-4.0.5.tgz
.shasum: 846c78cc3fac988696bddf44cd317d6043f7473b
.integrity: sha512-AENze2T2lj+ysL8Je1H8+xzV3EtKIctUCUIqOJobiR0i9ToKG2UZ3myMPnyfvvwxbdUi9j0v4hdA8YKqaZnIJg==
.unpackedSize: 436.0 kB

dependencies:
@tarojs/binding: 4.0.5            @tarojs/service: 4.0.5            axios: ^1.6.8                     envinfo: ^7.12.0                  minimist: ^1.2.8                  validate-npm-package-name: ^5.0.0
@tarojs/helper: 4.0.5             @tarojs/shared: 4.0.5             cli-highlight: ^2.1.11            inquirer: ^8.2.6                  ora: ^5.4.1
@tarojs/plugin-doctor: ^0.0.13    adm-zip: ^0.5.12                  download-git-repo: ^3.0.2         latest-version: ^5.1.0            semver: ^7.6.0

maintainers:
- drchan <798095202@qq.com>
- defaultlee <weitaozsh@gmail.com>
- xuanzebin <492247143@qq.com>
- yuche <i@yuche.me>
- kyjo <bestkyjo@gmail.com>
- zakary <zakarycode@Gmail.com>
- liuzejia <790868516@qq.com>
- qq592743779 <592743779@qq.com>
- advancedcat <wshx1938@163.com>
- baosiqing <baosiqing@163.com>

dist-tags:
1.x: 1.3.46                         3.0: 3.0.29                         beta: 4.0.0-beta.138                experimental: 0.0.0-experimental.2  next: 4.0.2                         theta: 3.6.15-theta.0
2.x: 2.2.22                         alpha: 4.0.5-alpha.10               canary: 4.0.0-canary.13             latest: 4.0.5                       nightly: 3.6.24-nightly.10

published 3 weeks ago by defaultlee <weitaozsh@gmail.com>

项目初始化

使用命令创建模板项目：

taro init <app名称/文件夹名称>

在这里插入图片描述

安装依赖冲突错误

参考文章：https://developer.aliyun.com/article/1060855
如果出现下面错误

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend@1.0.0
npm ERR! Found: vite@5.4.6
npm ERR! node_modules/vite
npm ERR!   peer vite@"^5.0.0" from @vitejs/plugin-vue@5.1.4
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     peerOptional @vitejs/plugin-vue@"^5" from @tarojs/plugin-framework-vue3@4.0.5
npm ERR!     node_modules/@tarojs/plugin-framework-vue3
npm ERR!       @tarojs/plugin-framework-vue3@"4.0.5" from the root project
npm ERR!   peer vite@"^4.0.0 || ^5.0.0" from @vitejs/plugin-vue-jsx@3.1.0
npm ERR!   node_modules/@vitejs/plugin-vue-jsx
npm ERR!     peerOptional @vitejs/plugin-vue-jsx@"^3" from @tarojs/plugin-framework-vue3@4.0.5
npm ERR!     node_modules/@tarojs/plugin-framework-vue3
npm ERR!       @tarojs/plugin-framework-vue3@"4.0.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional vite@"^4" from @tarojs/plugin-framework-vue3@4.0.5
npm ERR! node_modules/@tarojs/plugin-framework-vue3
npm ERR!   @tarojs/plugin-framework-vue3@"4.0.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! D:\Program Files\nodejs\node_cache\_logs\2024-09-19T07_55_10_654Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2024-09-19T07_55_10_654Z-debug-0.log

解决方法1：
可以尝试使用下面语句安装依赖

npm install --legacy-peer-deps

或者

npm install --force

解决方法2：
参考文章：https://nodejs.org/en/download/package-manager
参考文章：https://developer.aliyun.com/article/1060855
参考文章：https://developer.aliyun.com/article/1050105
先将nodejs与npm更新到最新版本，然后修改package.json，手动指定依赖版本，确保所有依赖项的版本兼容。

{
   
  "dependencies": {
   
	"vite": "^5.0.0",
    "eslint-plugin-vue": "^9.17.0",  // 这个是在设置vite后出现的另外冲突
  },
  "overrides": {
   
    "vite": "$vite",
    "eslint-plugin-vue": "$eslint-plugin-vue",
  }
}

添加配置

参考文章：https://blog.csdn.net/weixin_45650629/article/details/126830301

tsconfig.json

在compilerOptions中添加path路径
在这里插入图片描述

编译运行

使用下面语句构建

npm run build:weapp

目录结构

在src下面

assets：存放用到的素材，如图片
components：用来存放通用的子组件
pages: 具体的页面
app.config.ts：页面路由

小程序开发者工具

下载并打开微信开发者工具，然后选择项目根目录进行预览。
在这里插入图片描述

能看到模板里面的内容就算是正常使用了。
需要注意开发者工具的项目设置：

需要设置关闭 ES6 转 ES5 功能，开启可能报错
需要设置关闭上传代码时样式自动补全，开启可能报错
需要设置关闭代码压缩上传，开启可能报错

ps: 如果编译后出现未知错误，尝试下清除所有缓存，然后重新刷新小程序，一般都可以解决。建议每次编译后都清除缓存再看。

taro-ui-vue3

参考文章:https://b2nil.github.io/taro-ui-vue3/docs/introduction.html

安装

由于taro-ui-vue3所依赖的@tarojs/taro@"^3.2.1"与我使用的 @tarojs/taro@"4.0.5"有冲突，所以使用强制安装。

npm install taro-ui-vue3 --force

练习样例

参考https://b2nil.github.io/taro-ui-vue3/docs/color.html的右侧模拟手机屏幕复现，效果图如下：
首页
在这里插入图片描述
二级目录

详细页面

详细页面1

工程结构

在这里插入图片描述

assets: 存放静态文件
components: 通用组件
pages: 具体的页面
router: 路由信息

部分文件源码

components

CircleRing.vue

<template>
  <view
    style="
      display: flex;
      flex-direction: column; /* 垂直排列 */
      justify-content: center; /* 垂直居中 */
      align-items: center; /* 水平居中（如果需要） */
    ">
    <view
      style="
      width: 100px;
      height: 100px;
      border: 10px solid;
      border-radius: 50%;
      box-sizing: border-box;
      "
      :style="{'border-color': color}"></view>
    <view>
      {
   {
    describe }}
    </view>
    <view>
      {
   {
    color_code }}
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
     
  color: string;
  describe: string;
  color_code: string;
}>();
</script>

<style scoped>

</style>

IconList.vue

<template>
  <view
    style="
      display: flex;
      flex-direction: column; /* 垂直排列 */
      justify-content: center; /* 垂直居中 */
      align-items: center; /* 水平居中（如果需要） */
    ">
    <view
      style="
      width: 30px;
      height: 30px;
      border: 10px solid;
      border-color: #ffffff;
      ">
      <AtIcon :value='symbol' size='30' color='#bbbaba'></AtIcon>
    </view>
    <view>
      {
   {
    describe }}
    </view>
  </view>
</template>

<script setup lang="ts">
import {
    AtIcon } from 'taro-ui-vue3'
defineProps<{
     
  symbol: string;
  describe: string;
}>();
</script>

<style scoped>

</style>

TextWithLine.vue

<template>
  <view style="
  position: relative;
  display: flex;
  align-items: center;
">
    <span style="color: #1565da;margin-right: 20px">|</span>
    <span>{
   {
    text }}</span>
  </view>
</template>

<script setup lang="ts">
defineProps<{
     
  text: string;
}>();
</script>

<style lang="scss" scoped>

</style>

tools.ts

import Taro from "@tarojs/taro";

// 路由跳转
const routerLink = (url: string | null = null) =>{
   
  // console.log(url)
  if (url){
   
    Taro.navigateTo({
   
      url: url, // 可以携带参数
    });
  }else{
   
    console.log("url is null")
  }
  return url
};

// 获取页面参数
const getUrlParams = () => {
   
  const query = Taro.getCurrentInstance()
  var url_params
  if (query?.router){
   
    const params = query?.router.params
    // console.log(params); // 输出传递的参数对象
    url_params = params
  }
  return url_params
};

export {
   routerLink , getUrlParams}

pages

mainPage
index.vue

<template>
  <view style="background-color: #ecebeb;height: 100%">
    <view style="display:flex

最低0.47元/天解锁文章