这是个人的第一篇小程序文章,使用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图表的坑**  ### npm 安装依赖包的坑 我那时候刚刚玩taro的时候，去安装pinia或vuex，一直安装不上，说什么那那的配置不行，  #### 解决 如果不能正常npm的话，可以使用 npm --force \*\*\*，继续强制安装 ```js npm i --force pinia ``` ### scoped 属性来限定样式作用域，组件样式全部隔离，出不来 chatGPT的解释：  ## 分享自己的发现 对了，我在刷文章的时候发现了两个的实践 ### 统一全局样式 ```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中还有什么坑点和实践发现，还会发现哦