基礎(chǔ)介紹

個人使用背景是因為公司業(yè)務(wù)覆蓋多個小程序端，主要包括：支付寶小程序回论、微信小程序散罕、百度小程序、快應(yīng)用傀蓉。項目基于npm包管理欧漱，vscode相關(guān)插件提供更好的開發(fā)體驗。

• 主要用到相關(guān)技術(shù)：uni-app相關(guān) / vue3 / typescript / axios / sass / eslint / prettier

下面直接開始從頭開始搭建一個可用的初始項目~ 如果"需求緊急"可以參考底部的GitHub源碼葬燎。如果遇到問題可參照對應(yīng)步驟误甚。

使用npm安裝uni-app

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue#vue3 uni-app-vue3-demo
// 等待片刻 ...
> 請選擇 uni-app 模板: 默認(rèn)模板(TypeScript)

cd uni-app-vue3-demo

npm install
// 安裝較慢時可使用
npm install --registry=https://registry.npm.taobao.org

// 卸載不需要的包
npm uninstall vue-class-component vue-property-decorator
// 更新包
npm install vue@3.2.20 vuex@4.0.2 typescript@4.4.4

復(fù)制代碼

配置 eslint + prettier 自動格式化代碼

• 安裝相關(guān)npm包

npm install eslint prettier --save-dev
npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

復(fù)制代碼

• 安裝相關(guān)插件
• Prettier - Code formatter
• ESLint
• eslint配置 .eslintrc.js

module.exports = {
  parser: 'vue-eslint-parser',
  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
}

復(fù)制代碼

• prettier配置 .prettierrc.js

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  tabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'auto',
}
復(fù)制代碼

• vscode 配置 .vscode/settings.json

{
  "vetur.validation.template": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "elint.validate": ["typescript", "vue", "html", "json"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "json.format.enable": false
}
復(fù)制代碼

• 測試代碼自動格式化 (重啟vscode 打開 src pages/index.vue 輸入幾個空格 然后在保存看是否會自動格式化)

Typescript 配置允許默認(rèn) any 類型 tsconfig.json

{
  compilerOptions: {
    "noImplicitAny": false,
  }
}
復(fù)制代碼

配置 SASS

• 安裝 npm 相關(guān)包

 npm install node-sass@4.0.0 sass-loader@7.3.1 --save-dev 
 // 如遇到安裝問題可手動在package.json devDependencies 手動中添加
 // 刪除 node_modules 然后 重新安裝npm install
復(fù)制代碼

• 在 vue 中使用

<style lang="scss">
</style>
復(fù)制代碼

配置全局公共變量 并 自動導(dǎo)入

• 新建全局樣式變量 style/var.scss

$test-size: 400rpx;
復(fù)制代碼

• 在全局自動導(dǎo)入 vue.config.js

process.env.UNI_USING_VUE3 = true
process.env.UNI_USING_VUE3_OPTIONS_API = true
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/var.scss";`, //引入全局變量
      },
    },
  },
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.ts', '.vue', '.json'],
    },
  },
}

復(fù)制代碼

• vscode 相關(guān)插件
  • SCSS IntelliSense 安裝后會在全局提示 樣式變量(如下圖所示)

image.png

安裝 axios api層 適配小程序

import axios, { AxiosError } from 'axios'
import qs from 'qs'
let TOKEN_KEY = 'x-token' // TODO 根據(jù)自己后端配置
let API_SOURCE = ''
// #ifdef  MP-WEIXIN
API_SOURCE = 'weixin' // 微信小程序
// #endif
// #ifdef  MP-BAIDU
API_SOURCE = 'bdapplets' // 百度小程序
// #endif

// 設(shè)置表單類型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

let baseURL = process.env.VUE_APP_API_HOST

const fetch = axios.create({
  withCredentials: true,
  baseURL,
  timeout: 5000,
})
let jumpLoginCount = 0

// request攔截器,在請求之前做一些處理
fetch.interceptors.request.use(
  (config) => {
    Object.assign(config.headers, {
      Authorization: uni.getStorageSync(TOKEN_KEY),
    })
    config.data = qs.stringify(config.data)

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 配置成功后的攔截器
fetch.interceptors.response.use(
  (res) => {
    const params = qs.parse(res.config.data)

    // 設(shè)置 token
    if (res.headers.Authorization) {
      uni.setStorageSync(TOKEN_KEY, res.headers.Authorization)
    }
    // TODO 根據(jù)后端成功狀態(tài)配置
    if (['20001'].includes(`${res.data.code}`)) {
      // 是否返回根數(shù)據(jù)
      if (params.rootResult) return res
      else return res.data
    } else {
      return Promise.reject(res.data)
    }
  },
  (error: AxiosError) => {
    const params = qs.parse(error.config.data)
    // 未登錄 跳轉(zhuǎn)登錄頁
    if (error.response!.status == 401) {
      if (jumpLoginCount == 0) {
        uni.navigateTo({
          url: '/pages/login/index', // TODO 配置成自己的登錄頁路徑
        })
        ++jumpLoginCount
        setTimeout(() => (jumpLoginCount = 0), 2000)
      }
      return Promise.reject(error)
    }

    return Promise.reject(error)
  }
)

// 適配 小程序
fetch.defaults.adapter = function (config: any) {
  return new Promise((resolve, reject) => {
    var settle = require('axios/lib/core/settle')
    var buildURL = require('axios/lib/helpers/buildURL')

    uni.request({
      method: config.method.toUpperCase(),
      url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
      header: config.headers,
      data: config.data,
      dataType: config.dataType,
      responseType: config.responseType,
      sslVerify: config.sslVerify,
      complete: function complete(response: any) {
        response = {
          data: response.data,
          status: response.statusCode,
          errMsg: response.errMsg,
          headers: response.header, // 注意此處 單復(fù)數(shù)
          config: config,
        }
        settle(resolve, reject, response)
      },
    })
  })
}

export { fetch, API_SOURCE }

復(fù)制代碼

總結(jié)

通過上述步驟后，就能愉快的進(jìn)行踩坑之旅了~ 如有需要可訪問源碼
uni-app-vue3-demo