在Taro3+Vue3+NutUI3开发的实践发现及坑点

这是个人的第一篇小程序文章,使用Taro3+Vue3+NutUI3🤠开发实践中发现及坑点,希望能帮助到大家。

[Taro入门] 环境准备及项目初始化

自己使用的开发工具和环境

  • Nodejs V16.18.1
  • VS Code
  • 微信开发者工具

安装及使用@taro/cli

安装

js 复制代码
npm install -g @tarojs/cl

安装成功后可以使用taro -v检查是否安装成功及版本

初始化taro项目

js 复制代码
taro init yourAppName

具体可以看Taro官网 [](安装及使用 | Taro 文档)

启动项目

可以调试启动的方式

下面是我自己启动taro的方式

js 复制代码
npm run dev:weapp

启动完毕后,自动生成dist目录

使用微信开发者工具导入dist目录

自己在初始化项目中遇到的坑

NutUI库坑

NutUI3\]([NutUI - 移动端 Vue2、Vue3、小程序 组件库 (jd.com)](https://link.juejin.cn?target=https%3A%2F%2Fnutui.jd.com%2F3x%2F%23%2Fzh-CN%2Fguide%2Fintro "https://nutui.jd.com/3x/#/zh-CN/guide/intro")) 自己在创建基于vue3创建taro项目的时候,选择gitee下载好默认模板后,我需要使用NutUI库,需要按需引入,全局样式一直搞不好,组件库不能正常使用,以及小程序一直启动不开 #### 解决: 我就在taro官网上示例仓库:**taro 3.5 以上版本 + vue3** [taro3-nutui](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fjdf2e%2Fnutui-demo%2Ftree%2Fmaster%2Ftaro "https://github.com/jdf2e/nutui-demo/tree/master/taro") 下载来就是这样的目录,我使用的是**NutUI3** **自己在使用NutUI4,趟过Icon图表的坑** ![Snipaste_2023-08-04_20-22-29.jpg](https://file.jishuzhan.net/article/1687665970664968193/0a593b302bf74cd1b3a41295c9bc0969.jpeg) ### npm 安装依赖包的坑 我那时候刚刚玩taro的时候,去安装pinia或vuex,一直安装不上,说什么那那的配置不行, ![Snipaste_2023-08-04_20-33-02.jpg](https://file.jishuzhan.net/article/1687665970664968193/339a5caf69a24e259431885a286d9520.jpeg) #### 解决 如果不能正常npm的话,可以使用 npm --force \*\*\*,继续强制安装 ```js npm i --force pinia ``` ### scoped 属性来限定样式作用域,组件样式全部隔离,出不来 chatGPT的解释: ![Snipaste_2023-08-04_20-47-47.jpg](https://file.jishuzhan.net/article/1687665970664968193/d257db23f8c543a386e19ce247c7a4e3.jpeg) ## 分享自己的发现 对了,我在刷文章的时候发现了两个的实践 ### 统一全局样式 ```js /* utils/_scheme.js */ $f1: 80px; // 阿拉伯数字信息,如:金额、时间等 $f2: 40px; // 页面大标题,如:结果、控状态等信息单一页面 $f3: 36px; // 大按钮字体 $f4: 34px; // 首要层级信息,基准的,可以是连续的,如:列表标题、消息气泡 $f5: 28px; // 次要描述信息,服务于首要信息并与之关联,如:列表摘要 $f6: 26px; // 辅助信息,需弱化的内容,如:链接、小按钮 $f7: 22px; // 说明文本,如:版权信息等不需要用户关注的信息 $f8: 18px; // 十分小 $color-primary: #ff9800; // 品牌颜色 $color-secondary: lighten($color-primary, 10%); $color-tertiary: lighten($color-primary, 20%); $color-line: #ececec; // 分割线颜色 $color-bg: #ebebeb; // 背景色 $color-text-primary: #000000; // 主内容 $color-text-long: #353535; // 大段说明的主要内容 $color-text-secondary: #888888; // 次要内容 $color-text-placeholder: #b2b2b2; // 缺省值 $color-link-normal: #576b96; // 链接用色 $color-link-press: lighten($color-link-normal, 10%); $color-link-disable: lighten($color-link-normal, 20%); ``` 具体的可以按照自己项目中需求来配 对了,Taro 中的 `px` 其实指的就是 `rpx`;如果你想要真实的 `px`,可以大写 `PX`。 ### API统一管理request.ts封装 ```js import Taro from '@tarojs/taro' import Fly from 'flyio/dist/npm/wx' import config from '../config' import helper from './helper' // 创建一个 Fly 实例 const request = new Fly() request.config.baseURL = BASE_URL // 创建一个用于锁定请求队列的 Fly 实例 const newRequest = new Fly() // 请求拦截器 request.interceptors.request.use(async conf => { const { url, method } = conf const allowedPostUrls = [ '/login', '/users', '/email', ] const isExcept = allowedPostUrls.some(v => url.includes(v)) if (method !== 'GET' && !isExcept) { try { await helper.checkPermission() // 检查用户权限 } catch (e) { throw e } } return conf }) // 响应拦截器 request.interceptors.response.use( (response: any) => response, async (err: any) => { try { if (err.status === 0) { // 网络问题 throw new Error(Taro.T._('Server not responding')) } const { status } = err.response if (status === 401 || status === 403) { // 用户没有权限,需要重新登录 request.lock() // 锁定请求队列,避免重复请求 const { errMsg, code } = await Taro.login() // 重新登录 if (code) { const res = await newRequest.post('/login', { code }) // 使用新实例完成登录 const { data } = res.data const { sessionId, userInfo } = data Taro.setStorageSync('sessionId', sessionId) // 储存新 session if (userInfo) { Taro.setStorageSync('userInfo', userInfo) // 更新用户信息 } request.unlock() // 解锁请求队列 err.request.headers['Session-Id'] = sessionId // 在请求头加上新 session return await request.request(err.request) // 重新完成请求 } else { request.unlock() throw new Error(Taro.T._('Unable to get login status'), errMsg) } } } catch (e) { Taro.showToast({ title: e.message, icon: 'none' }) throw e } }, ) export default request; ``` # 总结 今天的发现就到这里了,后续在使用taro中还有什么坑点和实践发现,还会发现哦

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui