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

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

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

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

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

安装及使用@taro/cli

安装

npm install -g @tarojs/cl

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

初始化taro项目

taro init yourAppName

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

启动项目

可以调试启动的方式

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

npm run dev:weapp

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

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

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

NutUI库坑

NutUI3(NutUI - 移动端 Vue2、Vue3、小程序 组件库 (jd.com))

自己在创建基于vue3创建taro项目的时候，选择gitee下载好默认模板后，我需要使用NutUI库，需要按需引入，全局样式一直搞不好，组件库不能正常使用，以及小程序一直启动不开

解决：

我就在taro官网上示例仓库：taro 3.5 以上版本 + vue3 taro3-nutui 下载来就是这样的目录，我使用的是NutUI3

自己在使用NutUI4,趟过Icon图表的坑

npm 安装依赖包的坑

我那时候刚刚玩taro的时候，去安装pinia或vuex，一直安装不上，说什么那那的配置不行，

解决

如果不能正常npm的话，可以使用 npm --force ***，继续强制安装

npm i --force pinia

scoped 属性来限定样式作用域，组件样式全部隔离，出不来

chatGPT的解释：

分享自己的发现

对了，我在刷文章的时候发现了两个的实践

统一全局样式

/* 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封装

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中还有什么坑点和实践发现，还会发现哦