taro vue3 ts nut-ui 项目

# 使用 npm 安装 CLI
$ 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 中设置

export default defineAppConfig({pages: ['pages/myPage01/index','pages/myPage02/index',],window: {backgroundTextStyle: 'light',navigationBarBackgroundColor: '#fff',navigationBarTitleText: 'WeChat',navigationBarTextStyle: 'black'},tabBar: {custom: true,color: '#000000',selectedColor: '#000000',backgroundColor: '#000000',list: [{pagePath: 'pages/myPage01/index',text: '页面01',},{pagePath: 'pages/myPage02/index',text: '页面02',},],}
})

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

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

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

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

custom-tab-bar 的 index.js

<template><view class="custom-tab-bar" style="display: flex; justify-content: space-around; align-items: center; padding: 10rpx 24rpx; background: #fff;"><view v-for="(item, index) in tabList" @click="handleClick(item, index)"><view style="width: 96rpx; height: 64rpx;"><img style="width: 100%; height: 100%;" :src=" current === index ? item.activeImg : item.img" alt=""></view><view style="font-size: 24rpx; width: 100%; text-align: center;">{{ item.title }}</view></view></view>
</template><script setup>
import Taro from '@tarojs/taro'
import { useTabBarStore } from "../store/index";
import { ref, reactive, computed } from 'vue'const tabBarStore = useTabBarStore();const current = computed(() => tabBarStore.getSelected)const tabList = reactive([{title: '首页',pagePath: '/pages/myPage01/index',img: require('../assets/tabbarIcon/myPage01.png'),activeImg: require('../assets/tabbarIcon/myPage01Active.png')},{title: '我的',pagePath: '/pages/myPage02/index',img: require('../assets/tabbarIcon/myPage02.png'),activeImg: require('../assets/tabbarIcon/myPage02Active.png')},
])
const handleClick = (item, index) => {tabBarStore.setSelected(index);Taro.switchTab({ url: item.pagePath })
}
</script><style lang="scss" scoped></style>

store 的 index.js

import { defineStore } from "pinia";export const useTabBarStore = defineStore("tabBar", {state: () => {return { selected: 0 };},getters: {getSelected(state) {return state.selected;},},actions: {setSelected(value) {this.selected = value;},},
});

在 app.js 引入 pinia 

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

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

// app.js
import Taro from "@tarojs/taro";
// 分享的时候 wx.getStorageSync("sharePageUrl") 获取分享页面，在每个要分享的页面  进行设置缓存中的 sharePageUrl
/*** 全局分享配置，页面无需开启分享* 使用隐式页面函数进行页面分享配置* 使用隐式路由获取当前页面路由，并根据路由来进行全局分享、自定义分享*/
!(function () {//获取页面配置并进行页面分享配置var PageTmp = Page;Page = function (pageConfig) {Taro.showShareMenu({withShareTicket: true,});//1. 获取当前页面路由let routerUrl = "";wx.onAppRoute(function (res) {//app.js中需要在隐式路由中才能用getCurrentPages（）获取到页面路由let pages = getCurrentPages(),view = pages[pages.length - 1];if (view) {routerUrl = view.route;}});//2. 全局开启分享配置pageConfig = Object.assign({onShareAppMessage: function () {//根据不同路由设置不同分享内容（微信小程序分享自带参数，如非特例，不需配置分享路径）let shareInfo = {};let noGlobalSharePages = ["index/index"];//全局分享配置，如部分页面需要页面默认分享或自定义分享可以单独判断处理if (!routerUrl.includes(noGlobalSharePages)) {shareInfo = {title: "小鑫向上",imageUrl: wx.getStorageSync("shareUrl"),};}return shareInfo;},onShareTimeline: function (res) {console.log(res)console.log(routerUrl)let shareData = {title: "小鑫向上",path: wx.getStorageSync("sharePageUrl"), // 分享的路径// imageUrl： '',  // 分享的图片链接};return shareData;},},pageConfig);// 配置页面模板PageTmp(pageConfig);};
})();

封装API接口

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

baseUrl.js

const getBaseUrl = (url) => {let BASE_URL = "";if (process.env.NODE_ENV === "development") {// 开发环境 - 根据请求不同返回不同的BASE_URL// BASE_URL = "http://pig-gateway:9999";// BASE_URL = "http://127.0.0.1:3000"BASE_URL = "http://123.207.67.156:8889";} else {// 生产环境// BASE_URL = "http://127.0.0.1:3000"BASE_URL = "http://123.207.67.156:8889";}return BASE_URL;
};export default getBaseUrl;

http.js

import Taro from "@tarojs/taro";
import getBaseUrl from "./baseUrl";
import interceptors from "./interceptors";interceptors.forEach((interceptorItem) => Taro.addInterceptor(interceptorItem));class httpRequest {baseOptions(params, method = "GET") {let { url, data } = params;const BASE_URL = getBaseUrl(url);let contentType = "application/json";contentType = params.contentType || contentType;let responseType = "";responseType = params.responseType || responseType;const option = {url: BASE_URL + url,data: data,method: method,header: {"content-type": contentType,Authorization: "Bearer " + Taro.getStorageSync("accessToken"),},responseType: responseType,};return Taro.request(option);}get(url, data = "", responseType) {let option = { url, data, responseType };return this.baseOptions(option);}post(url, data, contentType) {let params = { url, data, contentType };return this.baseOptions(params, "POST");}put(url, data = "") {let option = { url, data };return this.baseOptions(option, "PUT");}delete(url, data = "") {let option = { url, data };return this.baseOptions(option, "DELETE");}
}export default new httpRequest();

interceptors.js

import Taro from "@tarojs/taro";const HTTP_STATUS = {SUCCESS: 200,CREATED: 201,ACCEPTED: 202,CLIENT_ERROR: 400,AUTHENTICATE: 401,FORBIDDEN: 403,NOT_FOUND: 404,SERVER_ERROR: 500,BAD_GATEWAY: 502,SERVICE_UNAVAILABLE: 503,GATEWAY_TIMEOUT: 504,Failed_Dependency: 424,
};const customInterceptor = (chain) => {const requestParams = chain.requestParams;return chain.proceed(requestParams).then((res) => {// 只要请求成功，不管返回什么状态码，都走这个回调if (res.statusCode === HTTP_STATUS.NOT_FOUND) {return Promise.reject("请求资源不存在");} else if (res.statusCode === HTTP_STATUS.SERVER_ERROR ||res.statusCode === HTTP_STATUS.SERVICE_UNAVAILABLE) {return Promise.reject("服务端错误");} else if (res.statusCode === HTTP_STATUS.GATEWAY_TIMEOUT) {return Promise.reject("请求超时");} else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {return Promise.reject("网关错误");} else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {return Promise.reject("没有权限访问");} else if (res.statusCode === HTTP_STATUS.CLIENT_ERROR) {return Promise.reject("请求错误");} else if (res.statusCode === HTTP_STATUS.AUTHENTICATE) {Taro.reLaunch({url: "/pages/login_package/login/index",});return Promise.reject("需要鉴权");} else if (res.statusCode === HTTP_STATUS.Failed_Dependency) {Taro.reLaunch({url: "/pages/login_package/login/index",});return Promise.reject("请求令牌已过期");} else if (res.statusCode === HTTP_STATUS.SUCCESS) {return res.data;}}).catch((err) => {Taro.showToast({icon:'error',title:err})});
};// Taro 提供了两个内置拦截器
// logInterceptor - 用于打印请求的相关信息
// timeoutInterceptor - 在请求超时时抛出错误。
const interceptors = [customInterceptor];export default interceptors;

servers.js

import HTTPREQUEST from "./http";
// import Taro from "@tarojs/taro";// export const refreshToken = (postData) => {
//   return HTTPREQUEST.get("/dcms/app-api/sso/refreshToken", postData);
// };// export const logout = () => {
//   return HTTPREQUEST.post("/dcms/app-api/sso/logout");
// };// 查看商品分类
export const getGoodClass = (postData) => {// return HTTPREQUEST.get("/api/getGoodClass", postData);return HTTPREQUEST.get("/getGoodClass", postData);
};// 查看商品详情
export const getGoodDetail = (postData) => {// return HTTPREQUEST.get("/api/getGoodDetail", postData);return HTTPREQUEST.get("/getGoodDetail", postData);
};// 查看商品详情
export const useIdGetGoodDetail = (postData) => {// return HTTPREQUEST.get("/api/useIdGetGoodDetail", postData);return HTTPREQUEST.get("/useIdGetGoodDetail", postData);
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/130147.html

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

相关文章

使用Puppeteer进行游戏数据可视化

使用Puppeteer进行游戏数据可视化

导语 Puppeteer是一个基于Node.js的库&#xff0c;可以用来控制Chrome或Chromium浏览器&#xff0c;实现网页操作、截图、测试、爬虫等功能。本文将介绍如何使用Puppeteer进行游戏数据的爬取和可视化&#xff0c;以《英雄联盟》为例。 概述 《英雄联盟》是一款由Riot Games开…
阅读更多...
MySQL之视图

MySQL之视图

概念 视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变 化会影响到基表&#xff0c;基表的数据变化也会影响到视图。 基本使用 创建视图 create view 视图名 as select语句&#xff1b; 示例&am…
阅读更多...
纯小白安卓刷机1

纯小白安卓刷机1

文章目录 常见的英文意思刷机是什么&#xff1f;为什么要刷机&#xff1f;什么是BL锁&#xff08;BootLoader锁&#xff09;&#xff1f;我的机能够刷机吗&#xff1f;什么是Boot镜像/分区&#xff1f;什么是Recovery镜像/分区&#xff08;缩写为rec&#xff09;&#xff1f;什…
阅读更多...
iisfastchi漏洞复现

iisfastchi漏洞复现

1.查看版本 2.在路径中写入 php脚本 发现使用不了 3.环境搭建 结局打开 把限制打开
阅读更多...
C#，数值计算——指数微分（exponential deviates）的计算方法与源程序

C#，数值计算——指数微分（exponential deviates）的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 指数偏差 /// Structure for exponential deviates. /// </summary> public class Expondev : Ran { private double beta { get; set; } /// <s…
阅读更多...
说完 Java 的 Abstract 后再来说说接口 （interface ）

说完 Java 的 Abstract 后再来说说接口 （interface ）

如你对 Abstract 修饰的抽象类不是非常了解的话&#xff0c;请自行先考古下。 这篇文章需要对 Java 定义过的抽象类有一些基本的了解才可以。 抽象类和抽象方法 用 Abstract 修饰的类&#xff0c;叫做抽象类&#xff0c;那么用 Abstract 修饰的方法叫做抽象方法。 在 Java 中…
阅读更多...
Python从零到一构建项目

Python从零到一构建项目

随着互联网的发展&#xff0c;网络上的信息量急剧增长&#xff0c;而获取、整理和分析这些信息对于很多人来说是一项艰巨的任务。而Python作为一种功能强大的编程语言&#xff0c;它的爬虫能力使得我们能够自动化地从网页中获取数据&#xff0c;大大提高了效率。本文将分享如何…
阅读更多...
SpringMvc--CRUD

SpringMvc--CRUD

目录 一.什么是SpringMvc--CRUD 二.前期准备 公共页面跳转(专门用来处理页面跳转) 三.ssm之CRUD后端实现 配置pom.xml 双击mybatis-generator:generate自动生成mapper 编写generatorConfig.xml 项目结构 编写PagerAspect切面类 编写hpjyBiz接口类 编写hpjyBizImpl接…
阅读更多...
《DevOps实践指南》- 读书笔记（二）

《DevOps实践指南》- 读书笔记（二）

DevOps实践指南 Part 2 从何处开始5. 选择合适的价值流作为切入点5.1 绿地项目与棕地项目5.2 兼顾记录型系统和交互型系统5.3 从最乐于创新的团队开始5.4 扩大 DevOps 的范围5.5 小结 6. 理解、可视化和运用价值流6.1 确定创造客户价值所需的团队6.2 针对团队工作绘制价值流图6…
阅读更多...
一起学数据结构（6）——栈和队列

一起学数据结构（6）——栈和队列

上篇文章中&#xff0c;对栈的概念及特点进行了解释&#xff0c;并且给出了栈实现的具体代码。本篇文章将给出队列的基本概念及特点。并给出相应的代码。 1. 队列的概念及结构&#xff1a; 在给出队列的概念之前&#xff0c;先给出上篇文章中提到的栈的概念&#xff1a;一种只…
阅读更多...
SMB 协议详解之-NTLM身份认证

SMB 协议详解之-NTLM身份认证

前面的文章说明了SMB协议交互的过程，在SMB交互的Session Setup Request/Response会对请求者的身份进行验证，这其中涉及到两个主要的协议NTLM以及Kerberos，本文将对NTLM协议进行详细的说明。 什么是NTLM NTLM是 NT LAN Manager (NTLM) Authentication Protocol 的缩写，主要…
阅读更多...
duffing方程matlab绘制

duffing方程matlab绘制

duffing混沌振子形式如下&#xff1a; k,a,c,f为自定义系数&#xff0c;将初值设为,k0.5,ac1 此时可通过更改f的值从0到1来改变duffing混沌系统状态&#xff0c;从固定点状态&#xff0c;小周期状态&#xff0c;混沌状态到大周期状态。例如f0.6时处于混沌状态&#xff0c;如下…
阅读更多...
夯实网络安全基石，筑牢网络安全防线

夯实网络安全基石，筑牢网络安全防线

没有网络安全就没有国家安全&#xff0c;这句话我们常常能在各种新闻里看见。安全是发展的前提&#xff0c;发展是安全的保障&#xff0c;共同推进安全和发展。Z强调&#xff1a;“要坚持依法治网、依法办网、依法上网。”今年的国家网络安全宣传周在9月11日至17日全国范围内开…
阅读更多...
《DevOps实践指南》- 读书笔记（四）

《DevOps实践指南》- 读书笔记（四）

DevOps实践指南 Part 3 第一步 &#xff1a;流动的技术实践11. 应用和实践持续集成11.1 小批量开发与大批量合并11.2 应用基于主干的开发实践11.3 小结 12. 自动化和低风险发布12.1 自动化部署流程12.1.1 应用自动化的自助式部署12.1.2 在部署流水线中集成代码部署 12.2 将部署…
阅读更多...
【最新！七麦下载量analysis参数】逆向分析与Python实现加密算法

【最新！七麦下载量analysis参数】逆向分析与Python实现加密算法

文章目录 1. 写在前面2. 请求分析3. 加密分析4. 算法实现1. 写在前面 之前出过一个关于榜单analysis的分析，有兴趣的可以查看这篇文章：七麦榜单analysis加密分析 最近运营团队那边有同事找到我们，说工作中偶尔需要统计分析一下某APP在一些主流应用市场的下载量趋势数据 这…
阅读更多...
十 动手学深度学习v2 ——卷积神经网络之NiN + GoogLeNet

十 动手学深度学习v2 ——卷积神经网络之NiN + GoogLeNet

文章目录 网络中的网络&#xff08;NiN&#xff09;InceptionGoogLeNet总结&#xff1a; 网络中的网络&#xff08;NiN&#xff09; NiN块使用卷积层加两个1x1卷积层 后者对每个像素增加了非线性性 NiN使用全局平均池化层来替代VGG和AlexNet中的全连接层 不容易过拟合&#xf…
阅读更多...
香橙派使用外设驱动库wiringOP 配合定时器来驱动舵机

香橙派使用外设驱动库wiringOP 配合定时器来驱动舵机

舵机认识和硬件接线 关于舵机也是使用过很多次了&#xff0c;详见&#xff1a; 使用PWM波控制开发SG90-CSDN博客 同时再次回顾香橙派的物理引脚对应&#xff1a; 所以舵机的VCC接 2&#xff0c;GND接 6&#xff0c;PWM接 7&#xff08;此处写的是物理引脚编号&#xff09; Li…
阅读更多...
Qt加载本地图片转为YUV420P格式数据

Qt加载本地图片转为YUV420P格式数据

一、背景介绍 在流媒体应用中&#xff0c;视频编码是必不可少的一环。视频编码的作用是将高带宽、高码率的原始视频流压缩成低带宽、低码率的码流&#xff0c;以便于传输和存储。H264是一种高效的视频编码标准&#xff0c;具有良好的压缩性能和广泛的应用范围&#xff0c;在实…
阅读更多...
基于人工智能与边缘计算Aidlux的工业表面缺陷检测

基于人工智能与边缘计算Aidlux的工业表面缺陷检测

一&#xff1a;训练yolov8得到onnx模型&#xff08;相关教程有很多&#xff09; 二&#xff1a;模型转化&#xff1a; 网站&#xff1a; https://aimo.aidlux.com/ 输入试用账号和密码: 账号:AIMOTC001&#xff0c;密码:AIMOTC001 我们选择 TensorFlowLite 一步步完成转化 …
阅读更多...
JVM GC垃圾回收

JVM GC垃圾回收

一、GC垃圾回收算法 标记-清除算法 算法分为“标记”和“清除”阶段&#xff1a;标记存活的对象&#xff0c; 统一回收所有未被标记的对象(一般选择这种)&#xff1b;也可以反过来&#xff0c;标记出所有需要回收的对象&#xff0c;在标记完成后统一回收所有被标记的对象 。它…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023