• taro vue3 ts nut-ui 项目

    1. # 使用 npm 安装 CLI
    2. $ npm install -g @tarojs/cli
    查看 Taro 全部版本信息​

    可以使用 npm info 查看 Taro 版本信息，在这里你可以看到当前最新版本

    npm info @tarojs/cli

    项目初始化​

    使用命令创建模板项目：

    taro init 项目名

    taro init myApp

    微信小程序自定义 TabBar

    先安装 cnpm install pinia 以便解决 小程序的 页面首次加载

    在 app.config.js 中设置

    1. export default defineAppConfig({
    2.   pages: [
    3.     'pages/myPage01/index',
    4.     'pages/myPage02/index',
    5.   ],
    6.   window: {
    7.     backgroundTextStyle: 'light',
    8.     navigationBarBackgroundColor: '#fff',
    9.     navigationBarTitleText: 'WeChat',
    10.     navigationBarTextStyle: 'black'
    11.   },
    12.   tabBar: {
    13.     custom: true,
    14.     color: '#000000',
    15.     selectedColor: '#000000',
    16.     backgroundColor: '#000000',
    17.     list: [
    18.       {
    19.         pagePath: 'pages/myPage01/index',
    20.         text: '页面01',
    21.       },
    22.       {
    23.         pagePath: 'pages/myPage02/index',
    24.         text: '页面02',
    25.       },
    26.     ],
    27.   }
    28. })

    在 src 目录下 pages 文件夹，在里面新建页面 

    在 src 目录下添加 custom-tab-bar 文件夹，在里面书写底部导航栏组件

    在 src 目录下添加 store 文件夹，在里面写 index.js

    在 src 目录下添加 assets 文件夹，在里面添加 pic 和 tabbarIcon 

    custom-tab-bar 的 index.js

    1. <template>
    2.     <view class="custom-tab-bar" style="display: flex; justify-content: space-around; align-items: center; padding: 10rpx 24rpx; background: #fff;">
    3.         <view v-for="(item, index) in tabList" @click="handleClick(item, index)">
    4.             <view style="width: 96rpx; height: 64rpx;">
    5.                 <img style="width: 100%; height: 100%;" :src=" current === index ? item.activeImg : item.img" alt="">
    6.             </view>
    7.             <view style="font-size: 24rpx; width: 100%; text-align: center;">{{ item.title }}</view>
    8.         </view>
    9.     </view>
    10. </template>
    11.  
    12. <script setup>
    13. import Taro from '@tarojs/taro'
    14. import { useTabBarStore } from "../store/index";
    15. import { ref, reactive, computed } from 'vue'
    16.  
    17. const tabBarStore = useTabBarStore();
    18.  
    19. const current = computed(() => tabBarStore.getSelected)
    20.  
    21. const tabList = reactive([
    22.     {
    23.         title: '首页',
    24.         pagePath: '/pages/myPage01/index',
    25.         img: require('../assets/tabbarIcon/myPage01.png'),
    26.         activeImg: require('../assets/tabbarIcon/myPage01Active.png')
    27.     },
    28.     {
    29.         title: '我的',
    30.         pagePath: '/pages/myPage02/index',
    31.         img: require('../assets/tabbarIcon/myPage02.png'),
    32.         activeImg: require('../assets/tabbarIcon/myPage02Active.png')
    33.     },
    34. ])
    35. const handleClick = (item, index) => {
    36.     tabBarStore.setSelected(index);
    37.     Taro.switchTab({ url: item.pagePath })
    38. }
    39. </script>
    40.  
    41. <style lang="scss" scoped></style>

    store 的 index.js

    1. import { defineStore } from "pinia";
    2.  
    3. export const useTabBarStore = defineStore("tabBar", {
    4.   state: () => {
    5.     return { selected: 0 };
    6.   },
    7.   getters: {
    8.     getSelected(state) {
    9.       return state.selected;
    10.     },
    11.   },
    12.   actions: {
    13.     setSelected(value) {
    14.       this.selected = value;
    15.     },
    16.   },
    17. });

    在 app.js 引入 pinia 

    1. import { createApp } from 'vue'
    2. import './app.scss'
    3. import { createPinia } from "pinia";
    4.  
    5. const App = createApp({
    6.   onShow (options) {},
    7.   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
    8. })
    9.  
    10. App.use(createPinia())
    11.  
    12. export default App

    设置分享功能 在 app.js 写入

    1. // app.js
    2. import Taro from "@tarojs/taro";
    3. // 分享的时候 wx.getStorageSync("sharePageUrl") 获取分享页面，在每个要分享的页面  进行设置缓存中的 sharePageUrl
    4. /**
    5.  * 全局分享配置，页面无需开启分享
    6.  * 使用隐式页面函数进行页面分享配置
    7.  * 使用隐式路由获取当前页面路由，并根据路由来进行全局分享、自定义分享
    8.  */
    9. !(function () {
    10.   //获取页面配置并进行页面分享配置
    11.   var PageTmp = Page;
    12.   Page = function (pageConfig) {
    13.     Taro.showShareMenu({
    14.       withShareTicket: true,
    15.     });
    16.  
    17.     //1. 获取当前页面路由
    18.     let routerUrl = "";
    19.     wx.onAppRoute(function (res) {
    20.       //app.js中需要在隐式路由中才能用getCurrentPages（）获取到页面路由
    21.       let pages = getCurrentPages(),
    22.         view = pages[pages.length - 1];
    23.       if (view) {
    24.         routerUrl = view.route;
    25.       }
    26.     });
    27.  
    28.     //2. 全局开启分享配置
    29.     pageConfig = Object.assign(
    30.       {
    31.         onShareAppMessage: function () {
    32.           //根据不同路由设置不同分享内容（微信小程序分享自带参数，如非特例，不需配置分享路径）
    33.           let shareInfo = {};
    34.           let noGlobalSharePages = ["index/index"];
    35.           //全局分享配置，如部分页面需要页面默认分享或自定义分享可以单独判断处理
    36.           if (!routerUrl.includes(noGlobalSharePages)) {
    37.             shareInfo = {
    38.               title: "小鑫向上",
    39.               imageUrl: wx.getStorageSync("shareUrl"),
    40.             };
    41.           }
    42.           return shareInfo;
    43.         },
    44.         onShareTimeline: function (res) {
    45.           console.log(res)
    46.           console.log(routerUrl)
    47.           let shareData = {
    48.             title: "小鑫向上",
    49.             path: wx.getStorageSync("sharePageUrl"), // 分享的路径
    50.             // imageUrl： '',  // 分享的图片链接
    51.           };
    52.           return shareData;
    53.         },
    54.       },
    55.       pageConfig
    56.     );
    57.     // 配置页面模板
    58.     PageTmp(pageConfig);
    59.   };
    60. })();

    封装API接口

    在 src 下 新建 api 文件夹 下 继续创建 文件

    baseUrl.js

    1. const getBaseUrl = (url) => {
    2.   let BASE_URL = "";
    3.   if (process.env.NODE_ENV === "development") {
    4.     // 开发环境 - 根据请求不同返回不同的BASE_URL
    5.     // BASE_URL = "http://pig-gateway:9999";
    6.     // BASE_URL = "http://127.0.0.1:3000"
    7.     BASE_URL = "http://123.207.67.156:8889";
    8.   } else {
    9.     // 生产环境
    10.     // BASE_URL = "http://127.0.0.1:3000"
    11.     BASE_URL = "http://123.207.67.156:8889";
    12.   }
    13.   return BASE_URL;
    14. };
    15.  
    16. export default getBaseUrl;

    http.js

    1. import Taro from "@tarojs/taro";
    2. import getBaseUrl from "./baseUrl";
    3. import interceptors from "./interceptors";
    4.  
    5. interceptors.forEach((interceptorItem) => Taro.addInterceptor(interceptorItem));
    6.  
    7. class httpRequest {
    8.   baseOptions(params, method = "GET") {
    9.     let { url, data } = params;
    10.     const BASE_URL = getBaseUrl(url);
    11.     let contentType = "application/json";
    12.     contentType = params.contentType || contentType;
    13.     let responseType = "";
    14.     responseType = params.responseType || responseType;
    15.     const option = {
    16.       url: BASE_URL + url,
    17.       data: data,
    18.       method: method,
    19.       header: {
    20.         "content-type": contentType,
    21.         Authorization: "Bearer " + Taro.getStorageSync("accessToken"),
    22.       },
    23.       responseType: responseType,
    24.     };
    25.     return Taro.request(option);
    26.   }
    27.  
    28.   get(url, data = "", responseType) {
    29.     let option = { url, data, responseType };
    30.     return this.baseOptions(option);
    31.   }
    32.  
    33.   post(url, data, contentType) {
    34.     let params = { url, data, contentType };
    35.     return this.baseOptions(params, "POST");
    36.   }
    37.  
    38.   put(url, data = "") {
    39.     let option = { url, data };
    40.     return this.baseOptions(option, "PUT");
    41.   }
    42.  
    43.   delete(url, data = "") {
    44.     let option = { url, data };
    45.     return this.baseOptions(option, "DELETE");
    46.   }
    47. }
    48.  
    49. export default new httpRequest();

    interceptors.js

    1. import Taro from "@tarojs/taro";
    2.  
    3. const HTTP_STATUS = {
    4.   SUCCESS: 200,
    5.   CREATED: 201,
    6.   ACCEPTED: 202,
    7.   CLIENT_ERROR: 400,
    8.   AUTHENTICATE: 401,
    9.   FORBIDDEN: 403,
    10.   NOT_FOUND: 404,
    11.   SERVER_ERROR: 500,
    12.   BAD_GATEWAY: 502,
    13.   SERVICE_UNAVAILABLE: 503,
    14.   GATEWAY_TIMEOUT: 504,
    15.   Failed_Dependency: 424,
    16. };
    17.  
    18. const customInterceptor = (chain) => {
    19.   const requestParams = chain.requestParams;
    20.   return chain
    21.     .proceed(requestParams)
    22.     .then((res) => {
    23.       // 只要请求成功，不管返回什么状态码，都走这个回调
    24.       if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
    25.         return Promise.reject("请求资源不存在");
    26.       } else if (
    27.         res.statusCode === HTTP_STATUS.SERVER_ERROR ||
    28.         res.statusCode === HTTP_STATUS.SERVICE_UNAVAILABLE
    29.       ) {
    30.         return Promise.reject("服务端错误");
    31.       } else if (res.statusCode === HTTP_STATUS.GATEWAY_TIMEOUT) {
    32.         return Promise.reject("请求超时");
    33.       } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
    34.         return Promise.reject("网关错误");
    35.       } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
    36.         return Promise.reject("没有权限访问");
    37.       } else if (res.statusCode === HTTP_STATUS.CLIENT_ERROR) {
    38.         return Promise.reject("请求错误");
    39.       } else if (res.statusCode === HTTP_STATUS.AUTHENTICATE) {
    40.         Taro.reLaunch({
    41.           url: "/pages/login_package/login/index",
    42.         });
    43.         return Promise.reject("需要鉴权");
    44.       } else if (res.statusCode === HTTP_STATUS.Failed_Dependency) {
    45.         Taro.reLaunch({
    46.           url: "/pages/login_package/login/index",
    47.         });
    48.         return Promise.reject("请求令牌已过期");
    49.       } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
    50.         return res.data;
    51.       }
    52.     })
    53.     .catch((err) => {
    54.       Taro.showToast({
    55.         icon:'error',
    56.         title:err
    57.       })
    58.     });
    59. };
    60.  
    61. // Taro 提供了两个内置拦截器
    62. // logInterceptor - 用于打印请求的相关信息
    63. // timeoutInterceptor - 在请求超时时抛出错误。
    64. const interceptors = [customInterceptor];
    65.  
    66. export default interceptors;

    servers.js

    1. import HTTPREQUEST from "./http";
    2. // import Taro from "@tarojs/taro";
    3.  
    4. // export const refreshToken = (postData) => {
    5. //   return HTTPREQUEST.get("/dcms/app-api/sso/refreshToken", postData);
    6. // };
    7.  
    8. // export const logout = () => {
    9. //   return HTTPREQUEST.post("/dcms/app-api/sso/logout");
    10. // };
    11.  
    12. // 查看商品分类
    13. export const getGoodClass = (postData) => {
    14.   // return HTTPREQUEST.get("/api/getGoodClass", postData);
    15.   return HTTPREQUEST.get("/getGoodClass", postData);
    16. };
    17.  
    18. // 查看商品详情
    19. export const getGoodDetail = (postData) => {
    20.   // return HTTPREQUEST.get("/api/getGoodDetail", postData);
    21.   return HTTPREQUEST.get("/getGoodDetail", postData);
    22. };
    23.  
    24. // 查看商品详情
    25. export const useIdGetGoodDetail = (postData) => {
    26.   // return HTTPREQUEST.get("/api/useIdGetGoodDetail", postData);
    27.   return HTTPREQUEST.get("/useIdGetGoodDetail", postData);
    28. };

  • 相关阅读:
    C++ Reference: Standard C++ Library reference: C Library: cwchar: wcscoll
    java 字符串初始化=“” 和=null的区别
    正则表达式(Java)
    Maven assembly多模块多环境（dev|test|prod）定制化打包SpringBoot项目详解
    草莓熊python turtle绘图代码
    基于Unity开发的联机解谜游戏的设计与实现
    leetcode 167. 两数之和 II - 输入有序数组
    Unittest（单元测试）
    「布道师系列文章」宝兰德徐清康解析 Kafka 和 AutoMQ 的监控
    Rust(1) 简介和安装
  • 原文地址：https://blog.csdn.net/czxvzxzczcc/article/details/132467800