taro+taro-ui学习

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 工具安装

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

1. npm install -g @tarojs/cli

复制代码

查看 Taro 全部版本信息

查询语句

1. npm info @tarojs/cli

复制代码

版本信息

1. @tarojs/cli@4.0.5 | MIT | deps: 16 | versions: 926
2. cli tool for taro                                 
3. https://github.com/NervJS/taro#readme            
4.                                                   
5. keywords: taro, weapp                             
7. bin: taro
9. dist
10. .tarball: https://registry.npmmirror.com/@tarojs/cli/-/cli-4.0.5.tgz
11. .shasum: 846c78cc3fac988696bddf44cd317d6043f7473b
12. .integrity: sha512-AENze2T2lj+ysL8Je1H8+xzV3EtKIctUCUIqOJobiR0i9ToKG2UZ3myMPnyfvvwxbdUi9j0v4hdA8YKqaZnIJg==
13. .unpackedSize: 436.0 kB
15. dependencies:
16. @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
17. @tarojs/helper: 4.0.5             @tarojs/shared: 4.0.5             cli-highlight: ^2.1.11            inquirer: ^8.2.6                  ora: ^5.4.1
18. @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
20. maintainers:
21. - drchan <798095202@qq.com>
22. - defaultlee <weitaozsh@gmail.com>
23. - xuanzebin <492247143@qq.com>
24. - yuche <i@yuche.me>
25. - kyjo <bestkyjo@gmail.com>
26. - zakary <zakarycode@Gmail.com>
27. - liuzejia <790868516@qq.com>
28. - qq592743779 <592743779@qq.com>
29. - advancedcat <wshx1938@163.com>
30. - baosiqing <baosiqing@163.com>
32. dist-tags:
33. 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
34. 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
36. published 3 weeks ago by defaultlee <weitaozsh@gmail.com>

复制代码

项目初始化

使用下令创建模板项目：

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

复制代码

安装依靠辩论错误

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

1. npm ERR! code ERESOLVE
2. npm ERR! ERESOLVE unable to resolve dependency tree
3. npm ERR!
4. npm ERR! While resolving: frontend@1.0.0
5. npm ERR! Found: vite@5.4.6
6. npm ERR! node_modules/vite
7. npm ERR!   peer vite@"^5.0.0" from @vitejs/plugin-vue@5.1.4
8. npm ERR!   node_modules/@vitejs/plugin-vue
9. npm ERR!     peerOptional @vitejs/plugin-vue@"^5" from @tarojs/plugin-framework-vue3@4.0.5
10. npm ERR!     node_modules/@tarojs/plugin-framework-vue3
11. npm ERR!       @tarojs/plugin-framework-vue3@"4.0.5" from the root project
12. npm ERR!   peer vite@"^4.0.0 || ^5.0.0" from @vitejs/plugin-vue-jsx@3.1.0
13. npm ERR!   node_modules/@vitejs/plugin-vue-jsx
14. npm ERR!     peerOptional @vitejs/plugin-vue-jsx@"^3" from @tarojs/plugin-framework-vue3@4.0.5
15. npm ERR!     node_modules/@tarojs/plugin-framework-vue3
16. npm ERR!       @tarojs/plugin-framework-vue3@"4.0.5" from the root project
17. npm ERR!
18. npm ERR! Could not resolve dependency:
19. npm ERR! peerOptional vite@"^4" from @tarojs/plugin-framework-vue3@4.0.5
20. npm ERR! node_modules/@tarojs/plugin-framework-vue3
21. npm ERR!   @tarojs/plugin-framework-vue3@"4.0.5" from the root project
22. npm ERR!
23. npm ERR! Fix the upstream dependency conflict, or retry
24. npm ERR! this command with --force or --legacy-peer-deps
25. npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
26. npm ERR!
27. npm ERR!
28. npm ERR! For a full report see:
29. npm ERR! D:\Program Files\nodejs\node_cache\_logs\2024-09-19T07_55_10_654Z-eresolve-report.txt
31. npm ERR! A complete log of this run can be found in:
32. npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2024-09-19T07_55_10_654Z-debug-0.log

复制代码

办理方法1：
可以尝试使用下面语句安装依靠

1. npm install --legacy-peer-deps

复制代码

或者

1. 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，手动指定依靠版本，确保所有依靠项的版本兼容。

1. {
2.   "dependencies": {
3.         "vite": "^5.0.0",
4.     "eslint-plugin-vue": "^9.17.0",  // 这个是在设置vite后出现的另外冲突
5.   },
6.   "overrides": {
7.     "vite": "$vite",
8.     "eslint-plugin-vue": "$eslint-plugin-vue",
9.   }
10. }

复制代码

添加配置

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

在compilerOptions中添加path路径

编译运行

使用下面语句构建

1. 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"有辩论，所以使用强制安装。

1. npm install taro-ui-vue3 --force

复制代码

训练样例

参考https://b2nil.github.io/taro-ui-vue3/docs/color.html的右侧模拟手机屏幕复现，效果图如下：
首页

二级目录

具体页面

具体页面1

工程布局

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

部分文件源码

components

CircleRing.vue

1. <template>
2.   <view
3.     style="
4.       display: flex;
5.       flex-direction: column; /* 垂直排列 */
6.       justify-content: center; /* 垂直居中 */
7.       align-items: center; /* 水平居中（如果需要） */
8.     ">
9.     <view
10.       style="
11.       width: 100px;
12.       height: 100px;
13.       border: 10px solid;
14.       border-radius: 50%;
15.       box-sizing: border-box;
16.       "
17.       :style="{'border-color': color}"></view>
18.     <view>
19.       {{ describe }}
20.     </view>
21.     <view>
22.       {{ color_code }}
23.     </view>
24.   </view>
25. </template>
27. <script setup lang="ts">
28. defineProps<{
29.   color: string;
30.   describe: string;
31.   color_code: string;
32. }>();
33. </script>
35. <style scoped>
37. </style>

复制代码

IconList.vue

1. <template>
2.   <view
3.     style="
4.       display: flex;
5.       flex-direction: column; /* 垂直排列 */
6.       justify-content: center; /* 垂直居中 */
7.       align-items: center; /* 水平居中（如果需要） */
8.     ">
9.     <view
10.       style="
11.       width: 30px;
12.       height: 30px;
13.       border: 10px solid;
14.       border-color: #ffffff;
15.       ">
16.       <AtIcon :value='symbol' size='30' color='#bbbaba'></AtIcon>
17.     </view>
18.     <view>
19.       {{ describe }}
20.     </view>
21.   </view>
22. </template>
24. <script setup lang="ts">
25. import { AtIcon } from 'taro-ui-vue3'
26. defineProps<{
27.   symbol: string;
28.   describe: string;
29. }>();
30. </script>
32. <style scoped>
34. </style>

复制代码

TextWithLine.vue

1. <template>
2.   <view style="
3.   position: relative;
4.   display: flex;
5.   align-items: center;
6. ">
7.     <span style="color: #1565da;margin-right: 20px">|</span>
8.     <span>{{ text }}</span>
9.   </view>
10. </template>
12. <script setup lang="ts">
13. defineProps<{
14.   text: string;
15. }>();
16. </script>
18. <style lang="scss" scoped>
20. </style>

复制代码

tools.ts

1. import Taro from "@tarojs/taro";
3. // 路由跳转
4. const routerLink = (url: string | null = null) =>{
5.   // console.log(url)
6.   if (url){
7.     Taro.navigateTo({
8.       url: url, // 可以携带参数
9.     });
10.   }else{
11.     console.log("url is null")
12.   }
13.   return url
14. };
16. // 获取页面参数
17. const getUrlParams = () => {
18.   const query = Taro.getCurrentInstance()
19.   var url_params
20.   if (query?.router){
21.     const params = query?.router.params
22.     // console.log(params); // 输出传递的参数对象
23.     url_params = params
24.   }
25.   return url_params
26. };
28. export {routerLink , getUrlParams}

复制代码

pages

mainPage
index.vue

1. <template>
2.   <view style="background-color: #ecebeb;height: 100%">
3.     <view style="display:flex ;justify-content: center; align-items: center; background-color: #ecebeb; flex-direction: column;">
4.       <view :style="{ flexGrow: 1 }" style="display: flex;justify-content: center;align-items: center">
5.         <image
6.             :src="local_images"
7.             style="max-width: 50%; max-height: 50%;"
8.           />
9.       </view>
10.       <view :style="{ flexGrow: 1 }"  style="display: flex; justify-content: center; align-items: start">
11.         <text style="font-family: Arial, sans-serif; font-size: 16px; color: #000000;">
12.           Taro UI Vue3
13.         </text>
14.       </view>
15.     </view>
16.     <view
17.       v-for="(item, index) in label_item" :key="index"
18.       style="display: flex;justify-content:center; align-items:center;"
19.     >
20.       <view
21.         style="
22.           width: 80%;
23.           border: 1px solid #ffffff;
24.           border-radius: 5px;
25.           margin: 10px 0;
26.           padding: 10px;
27.           background-color: #ffffff;
28.           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
29.         "
30.       >
31.         <at-flex>
32.           <at-flex-item :size="2">
33.             <AtIcon :value= item.icon :size='30' color="#1565da" />
34.           </at-flex-item>
35.           <at-flex-item :size="21">
36.             <view style="display: grid" @tap="routerLink(item.link_url ?? null)">
37.               <span style="fontWeight:bold;color:#262686;font-size:16px">{{item.title}}</span>
38.               <span style="color:#6a6aef;font-size:11px">{{item.des}}</span>
39.             </view>
40.           </at-flex-item>
41.           <at-flex-item :size="1">
42.             <AtIcon value='chevron-right' size='30' color="#1565da"></AtIcon>
43.           </at-flex-item>
44.         </at-flex>
45.       </view>
46.     </view>
47.   </view>
48. </template>
50. <script setup lang="ts">
51. import {routerLink}  from '@/components/tools'
52. import { AtFlex, AtFlexItem, AtIcon  } from 'taro-ui-vue3'
55. const local_images = require(`@/assets/logo.svg`)
57. import {ref} from 'vue';
59. import {label_item_level}  from '@/router/index'
60. const label_item = ref(label_item_level)
62. </script>
63. <style scoped>
64. .test_css{
65. /* 默认保留一个，否则会出现查找不到文件错误*/
66. }
68. </style>

复制代码

labelBase

1. <template>
2.   <view style="background-color: #ecebeb;height: 100%">
3.     <view style="display:flex ;justify-content: flex-start; align-items: center; background-color: #ecebeb;height: 100px">
4.       <view style="padding-left: 20px;">
5.         <AtIcon :value= label_info.icon :size='30' color="#1565da" />
6.       </view>
7.       <view style="padding-left: 10px;">
8.         <span style="fontWeight:bold;color:#1565da;font-size:16px">{{label_info.title}}</span>
9.       </view>
10.     </view>
11.     <view
12.       v-for="(item, index) in label_item" :key="index"
13.       style="display: flex;justify-content:center; align-items:center;"
14.     >
15.       <view
16.         style="
17.           width: 100%;
18.           height: 100%;
19.           border: 1px solid #ffffff;
20.           border-radius: 1px;
21.           /*margin: 10px 0;*/
22.           padding: 20px;
23.           background-color: #ffffff;
24.           /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
25.       "
26.       >
27.         <view style="display:flex ;justify-content: space-between; align-items: center;" @tap="routerLink(item.link_url ?? null)">
28.           <span style="color:#000000;font-size:16px">{{item.title}}</span>
29.           <AtIcon value='chevron-right' size='30' color="#989898"></AtIcon>
30.         </view>
31.       </view>
32.     </view>
33.   </view>
34. </template>
36. <script setup lang="ts">
37. import {AtIcon} from "taro-ui-vue3";
38. import {reactive, ref} from 'vue';
39. import {routerLink , getUrlParams}  from '@/components/tools'
41. // =========获取页面参数
42. const url_params = getUrlParams()
43. var from_label = url_params.label as string
45. // =========上方标题
46. import {label_item_level}  from '@/router/index'
47. const label_info = reactive({
48.   icon: "",
49.   title: "",
50. })
51. for (var index in label_item_level){
52.   // console.log(index)
53.   // console.log(label_item_level[index])
54.   const item = label_item_level[index]
55.   if (item.title === from_label){
56.     label_info.icon = item.icon
57.     label_info.title = item.title
58.   }
59. }
60. // =========下方标题
61. import {label_item_level1}  from '@/router/index'
62. const label_item = ref()
63. for (var index in label_item_level1){
64.   const item = label_item_level1[index]
65.   if (item.father === from_label){
66.     label_item.value = item.children ?? null
67.   }
68. }
70. </script>
71. <style scoped>
72. .test_css{
73.   /* 默认保留一个，否则会出现查找不到文件错误*/
74. }
75. </style>

复制代码

itemDetail
index.vue

1. <template>
2.   <view style="background-color: #ecebeb;height: 100%">
3.     <view style="display:flex ;justify-content: flex-start; align-items: center; background-color: #ecebeb;height: 100px;padding-left: 20px;">
4.       <span style="fontWeight:bold;color:#000000;font-size:16px">{{label}}</span>
5.     </view>
6.     </view>
7.       <DynamicComponent />
8.     <view>
9.   </view>
10. </template>
12. <script  setup lang="ts">
13. import { ref } from 'vue';
14. import {getUrlParams} from '@/components/tools'
16. // =========获取页面参数
17. const url_params = getUrlParams()
18. var label = ref("")
19. label.value = url_params.label as string
20. // console.log(label)
21. // ========= 获取详细页面信息
22. import {getDetailPage} from '@/pages/itemDetail/detail_pages/detail_pages_index'
23. const DynamicComponent = getDetailPage(url_params.label)
24. // console.log(DynamicComponent)
26. </script>
28. <style scoped>
29. .test_css{
30.   /* 默认保留一个，否则会出现查找不到文件错误*/
31. }
32. </style>

复制代码

detail_pages/Color 颜色.vue

1. <template>
2.   <View v-for="(item, index) in label_item" :key="index">
3.     <View style="border: 10px solid #ffffff;">
4.       <TextWithLine :text="item.label" />
5.     </View>
6.     <View style="border: 10px solid #ffffff;">
7.       <View
8.         style="
9.           display: grid;
10.           grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
11.           gap: 10px; /* 项目之间的间距 */
12.           align-items: center; /* 垂直居中（如果需要） */
13.         ">
14.         <CircleRing v-for="(item1, index1) in item.item" :key="index1" :color="item1.color_code" :describe = "item1.des" :color_code="item1.color_code"/>
15.       </View>
16.     </View>
17.   </View>
19. </template>
21. <script setup lang="ts">
22. import './detail_pages_index.css';
23. import TextWithLine from '@/components/TextWithLine.vue';
24. import CircleRing from '@/components/CircleRing.vue'
26. const 主色 = [
27.   {"des": "浅蓝色", "color_code": "#78A4FA"},
28.   {"des": "品牌蓝", "color_code": "#6190E8"},
29.   {"des": "深蓝色", "color_code": "#346FC2"},
30. ]
32. const 辅助色 = [
33.   {"des": "蓝色", "color_code": "#78A4FA"},
34.   {"des": "绿色", "color_code": "#13CE66"},
35.   {"des": "红色", "color_code": "#FF4949"},
36.   {"des": "黄色", "color_code": "#FFC82C"},
37. ]
39. const 次辅助色 = [
40.   {"des": "Roof", "color_code": "#C2ABC7"},
41.   {"des": "Curtain", "color_code": "#F0D0D5"},
42.   {"des": "Door", "color_code": "#F1E4ED"},
43.   {"des": "Wall", "color_code": "#EEF0F0"},
44. ]
46. const 中性色 = [
47.   {"des": "Header 标题", "color_code": "#2C405A"},
48.   {"des": "正文字体-黑", "color_code": "#3F536E"},
49.   {"des": "正文字体-灰", "color_code": "#8DABC4"},
50.   {"des": "图标", "color_code": "#A8C6DF"},
51.   {"des": "边框", "color_code": "#C5D9E8"},
52.   {"des": "背景色-浅蓝", "color_code": "#ECF5FD"},
53.   {"des": "背景色-米白", "color_code": "#FAFBFC"},
54. ]
56. const label_item = [
57.   {"label": "主色", "item": 主色},
58.   {"label": "辅助色", "item": 辅助色},
59.   {"label": "次辅助色", "item": 次辅助色},
60.   {"label": "中性色", "item": 中性色},
61. ]
65. </script>
67. <style scoped>
68. .test_css{
69.   /* 默认保留一个，否则会出现查找不到文件错误*/
70. }
71. </style>

复制代码

detail_pages/Icon 图标.vue

1. <template>
2.   <View v-for="(item, index) in label_item" :key="index">
3.     <View style="border: 10px solid #ffffff;">
4.       <TextWithLine :text="item.label" />
5.     </View>
6.     <View style="border: 10px solid #ffffff;">
7.       <View
8.         style="
9.           display: grid;
10.           grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
11.           gap: 10px; /* 项目之间的间距 */
12.           align-items: center; /* 垂直居中（如果需要） */
13.         ">
14.         <IconList v-for="(item1, index1) in item.item" :key="index1" :symbol="item1.symbol" :describe = "item1.symbol"/>
15.       </View>
16.     </View>
17.   </View>
19. </template>
21. <script setup lang="ts">
22. import './detail_pages_index.css';
23. import TextWithLine from '@/components/TextWithLine.vue';
24. import IconList from '@/components/IconList.vue'
26. const 主要 = [
27.   {"symbol":"analytics"}, {"symbol":"bell"}, {"symbol":"blocked"}, {"symbol":"bookmark"}, {"symbol":"bullet-list"},
28.   {"symbol":"calendar"}, {"symbol":"add-circle"}, {"symbol":"subtract-circle"}, {"symbol":"check-circle"},
29.   {"symbol":"close-circle"}, {"symbol":"add"}, {"symbol":"subtract"}, {"symbol":"check"}, {"symbol":"close"},
30.   {"symbol":"clock"}, {"symbol":"credit-card"}, {"symbol":"download-cloud"}, {"symbol":"download"},
31.   {"symbol":"equalizer"}, {"symbol":"external-link"}, {"symbol":"eye"}, {"symbol":"filter"}, {"symbol":"folder"},
32.   {"symbol":"heart"}, {"symbol":"heart-2"}, {"symbol":"star"}, {"symbol":"star-2"}, {"symbol":"help"},
33.   {"symbol":"alert-circle"}, {"symbol":"home"}, {"symbol":"iphone-x"}, {"symbol":"iphone"}, {"symbol":"lightning-bolt"},
34.   {"symbol":"link"}, {"symbol":"list"}, {"symbol":"lock"}, {"symbol":"mail"}, {"symbol":"map-pin"}, {"symbol":"menu"},
35.   {"symbol":"message"}, {"symbol":"money"}, {"symbol":"numbered-list"}, {"symbol":"phone"}, {"symbol":"search"},
36.   {"symbol":"settings"}, {"symbol":"share-2"}, {"symbol":"share"}, {"symbol":"shopping-bag-2"}, {"symbol":"shopping-bag"},
37.   {"symbol":"shopping-cart"}, {"symbol":"streaming"}, {"symbol":"tag"}, {"symbol":"tags"}, {"symbol":"trash"},
38.   {"symbol":"upload"}, {"symbol":"user"}, {"symbol":"loading"}, {"symbol":"loading-2"}, {"symbol":"loading-3"},
39. ]
41. const 文件 = [
42.   {"symbol":"file-audio"},
43.   {"symbol":"file-code"},
44.   {"symbol":"file-generic"},
45.   {"symbol":"file-jpg"},
46.   {"symbol":"file-new"},
47.   {"symbol":"file-png"},
48.   {"symbol":"file-svg"},
49.   {"symbol":"file-video"},
50. ]
52. const label_item = [
53.   {"label": "主要", "item": 主要},
54.   {"label": "文件", "item": 文件},
55. ]
56. </script>
58. <style scoped>
59. .test_css{
60.   /* 默认保留一个，否则会出现查找不到文件错误*/
61. }
62. </style>

复制代码

detail_pages/detail_pages_index.ts

1. import DynamicComponent_Color颜色 from '@/pages/itemDetail/detail_pages/Color 颜色.vue'
2. import DynamicComponent_Icon图标 from '@/pages/itemDetail/detail_pages/Icon 图标.vue'
4. // 小程序本身不允许动态读取
5. function getDetailPage(page_name:string){
6.   if (page_name === "Color 颜色"){
7.     return DynamicComponent_Color颜色
8.   }
9.   if (page_name === "Icon 图标"){
10.     return DynamicComponent_Icon图标
11.   }
12. }
14. export {getDetailPage}

复制代码

router

index.ts

1. // 一级目录路径及信息
2. const label_item_level = [
3.   {'icon':'bullet-list', 'title': '基础', 'des':'包含颜色，文本，图表等', 'link_url': '/pages/labelBase/index?label=基础'},
4.   {'icon':'bookmark', 'title': '视图', 'des':'包含通告栏，标签，徽标等', 'link_url': '/pages/labelBase/index?label=视图' },
5.   {'icon':'equalizer', 'title': '操作反馈', 'des':'包含对话框，进度条，动作面板等', 'link_url': '/pages/labelBase/index?label=操作反馈' },
6.   {'icon':'money', 'title': '表单', 'des':'包含输入框，单选框，复选框等', 'link_url': '/pages/labelBase/index?label=表单' },
7.   {'icon':'list', 'title': '布局', 'des':'包含列表，浮层，卡片等', 'link_url': '/pages/labelBase/index?label=布局' },
8.   {'icon':'search', 'title': '导航', 'des':'包含标签栏，导航栏，分段器等', 'link_url': '/pages/labelBase/index?label=导航' },
9.   {'icon':'calendar', 'title': '高阶组件', 'des':'包含日历，虚拟列表，骨架等', 'link_url': '/pages/labelBase/index?label=高阶组件' },
10. ]
12. const level1_children_基础组件 = [
13.   {'title': 'Color 颜色',  'link_url': '/pages/itemDetail/index?label=Color 颜色'},
14.   {'title': 'Icon 图标', 'link_url': '/pages/itemDetail/index?label=Icon 图标'},
15.   {'title': 'Typo 字体', },
16.   {'title': 'Button 按钮', },
17.   {'title': 'Fab 浮动按钮', },
18. ]
20. const level1_children_视图组件 = [
21.   {'title': 'Avatar 头像',},
22.   {'title': 'Article 文章样式',},
23.   {'title': 'Badge 徽标',},
24.   {'title': 'Countdown 倒计时',},
25.   {'title': 'Curtain 幕帘',},
26.   {'title': 'LoadMore 页面提示',},
27.   {'title': 'Noticebar 通告栏',},
28.   {'title': 'Tag 标签',},
29.   {'title': 'Timeline 时间轴',},
30.   {'title': 'Swiper 滑动视图容器',},
31.   {'title': 'Divider 分隔符',},
32.   {'title': 'Steps 步骤条',},
33. ]
35. const level1_children_操作反馈 = [
36.   {'title': 'ActionSheet 动作面板',},
37.   {'title': 'ActivityIndicator 活动指示器',},
38.   {'title': 'Modal 模态框',},
39.   {'title': 'Progress 进度条',},
40.   {'title': 'Toast 轻提示',},
41.   {'title': 'SwipeAction 滑动操作',},
42.   {'title': 'Message 消息通知',},
43. ]
45. const level1_children_表单组件 = [
46.   {'title': 'Form 表单',},
47.   {'title': 'Input 输入框',},
48.   {'title': 'InputNumber 数字输入框',},
49.   {'title': 'Radio 单选按钮',},
50.   {'title': 'Checkbox 多选框',},
51.   {'title': 'Rate 评分',},
52.   {'title': 'Switch 开关',},
53.   {'title': 'Textarea 多行文本框',},
54.   {'title': 'Picker 选择器',},
55.   {'title': 'SearchBar 搜索栏',},
56.   {'title': 'Slider 滑动条',},
57.   {'title': 'ImagePicker 图片选择器',},
58.   {'title': 'Range 范围选择器',},
59. ]
61. const level1_children_布局组件 = [
62.   {'title': 'Flex 弹性布局',},
63.   {'title': 'Grid 栅格布局',},
64.   {'title': 'List 列表',},
65.   {'title': 'Card 卡片',},
66.   {'title': 'FloatLayout 浮动弹层',},
67.   {'title': 'Accordion 手风琴',},
68. ]
70. const level1_children_导航组件 = [
71.   {'title': 'NavBar 导航栏',},
72.   {'title': 'TabBar 标签栏',},
73.   {'title': 'Tabs 标签页',},
74.   {'title': 'SegmentedControl 分段器',},
75.   {'title': 'Pagination 分页器',},
76.   {'title': 'Drawer 抽屉',},
77.   {'title': 'Indexes 索引选择器',},
78. ]
80. const level1_children_高阶组件 = [
81.   {'title': 'Calendar 日历',},
82.   {'title': 'VirtualScroll 虚拟列表',},
83.   {'title': 'Skeleton 骨架',},
84. ]
86. const label_item_level1 = [
87.   {'father': '基础', 'children': level1_children_基础组件},
88.   {'father': '视图', 'children': level1_children_视图组件},
89.   {'father': '操作反馈', 'children': level1_children_操作反馈},
90.   {'father': '表单', 'children': level1_children_表单组件},
91.   {'father': '布局','children': level1_children_布局组件},
92.   {'father': '导航','children': level1_children_导航组件},
93.   {'father': '高阶组件', 'children': level1_children_高阶组件},
94. ]
96. export {label_item_level, label_item_level1}

复制代码

src

app.config.ts

1. export default {
2.   pages: [
3.     'pages/mainPage/index',
4.     'pages/labelBase/index',
5.     'pages/itemDetail/index'
6.     // 'pages/list/index',
7.     // 'pages/index/index'
8.   ],
10.   window: {
11.     backgroundTextStyle: 'light',
12.     navigationBarBackgroundColor: '#ffffff',
13.     navigationBarTitleText: 'WeChat',
14.     navigationBarTextStyle: 'black'
15.   }
16. }

复制代码

app.ts

1. import { createApp } from 'vue'
2. import { createPinia } from 'pinia'
3. import { createUI } from 'taro-ui-vue3'
4. // import NutuiTaro from "@nutui/nutui-taro";
6. import './app.scss'
7. import 'taro-ui-vue3/dist/style/index.scss'
8. // import "@nutui/nutui-taro/dist/style.css";
10. // const App = createApp({
11. //   onShow(options) {
12. //   },
13. //   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
14. // })
15. const App = createApp({
16.   onShow() { },
17. })
18. // 引用全部组件
19. const tuv3 = createUI()
21. App.use(createPinia())
22. App.use(tuv3)
23. // App.use(NutuiTaro);
25. export default App

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。