Bagaimana untuk menggunakan Taro3 Vue3 untuk membangunkan program kecil? Artikel berikut akan memperkenalkan kepada anda cara menggunakan Taro3 Vue3 untuk membangunkan applet WeChat saya harap ia akan membantu anda!

Applet WeChat ialah aplikasi yang menggunakan WeChat sebagai persekitaran operasinya ialah aplikasi teknologi Hybrid ialah aplikasi mudah alih mod campuran ia berbeza daripada H5 ??> Serupa, tetapi mempunyai lebih banyak keupayaan asli daripada H5, seperti memanggil maklumat lokasi dan kamera.

Kaedah pembangunan program mini sangat serupa dengan H5, dan bahasa JavaScript, HTML, CSS juga digunakan.

Oleh itu, pembangunan program kecil boleh dikatakan sebagai kemahiran yang mesti dikuasai oleh seorang jurutera hadapan.

Terdapat kos pembelajaran tertentu dalam membangunkan program mini asli Pada masa kini, terdapat banyak rangka kerja multi-terminal pihak ketiga untuk membangunkan program mini di pasaran adalah lebih baik untuk tidak menggunakan program mini asli untuk kecekapan pembangunan terlalu rendah.

Antara rangka kerja berbilang terminal pihak ketiga, taro dan uni-app adalah yang paling banyak digunakan Secara umumnya, apabila membuat pemilihan teknologi, pasukan menggunakan react, taro digunakan dan pasukan menggunakan <.>, hanya guna uni-app, tiada beza antara keduanya, kedua-duanya sangat mudah digunakan. vue

Tetapi ramai pembangun mungkin tidak mengetahui bahawa taro3.0 atau lebih tinggi menyokong penggunaan vue. Artikel ini akan memperkenalkan cara menggunakan Taro3 Vue3 untuk membangunkan applet WeChat.

Selepas saya menyiapkan pembinaan projek ini berdasarkan maklumat di Internet, saya membangunkan program kecil menggunakan projek ini Pengalaman pembangunan benar-benar mengatasi semua projek yang telah saya bangunkan pada masa lalu dan sangat lancar (. mungkin Ini kali pertama saya menulis persediaan skrip untuk vue3, dan ia sangat selesa untuk digunakan).

Anda boleh mengakses terus projek ini

alamat github klon dan gunakan.

Fungsi sasaran

Sepadukan vue3, gunakan
• pembangunan sintaksscript setup
Sepadukan
• Typescript
pemeriksaan kod dan pengoptimuman format
Pengurusan keadaan global
• Konfigurasi subkontrak program mini
• Pengenkapsulan gaya, serasi dengan skrin takuk dan isu gaya lain
• Pengenkapsulan kaedah http

Timbunan Teknologi Utama

Taro3
• Vue3
• TypeScript
• NutUi
• Pinia

Apabila vue3 pertama kali dikeluarkan, semangat saya untuk mempelajari vue3 langsung tidak digalakkan kerana kekurangan sokongan rangka kerja UI yang sesuai. Sehingga kini, rangka kerja yang sangat baik seperti

quasar, elemen-tambah dan ant-design-vue telah berturut-turut menyokong vue3, dan banyak projek vue3 telah digunakan dalam persekitaran pengeluaran Baru saya sedar bahawa semua orang benar-benar menggunakan vue3.

Sebagai contoh, pasukan projek di sebelah syarikat kami menggunakan vue3 untuk projek pembinaan semula Barulah saya sedar bahawa saya agak lewat dalam mempelajari vue3 (tips: bahagian hadapannya memang terlalu rumit)

NutUI ialah perpustakaan komponen mudah alih gaya JD Ia menyokong penggunaan bahasa Vue untuk menulis aplikasi yang boleh digunakan pada platform program H5 dan mini, membantu pembangun meningkatkan kecekapan pembangunan dan pengalaman pembangunan. .

Saya mengenali NutUI daripada

dokumentasi Taro secara rasmi mengesyorkan menggunakan NutUI untuk pembangunan mencubanya, pengalaman pengguna tidak buruk.

Pinia ialah perpustakaan pengurusan negeri untuk Vue, serupa dengan Vuex, ia merupakan satu lagi penyelesaian pengurusan negeri untuk Vue, menyokong Vue2 dan Vue3.

Kali pertama saya berhubung dengan alat pengurusan status bahagian hadapan ialah sistem pengurusan bahagian belakang syarikat semasa saya mula-mula melatih diri. Ia adalah satu penyeksaan dan hampir memujuk saya untuk berhenti . Saya secara beransur-ansur menjadi biasa dengannya, tetapi sama ada saya menggunakan redux atau vuex, saya masih merasa sukar untuk menulis.

這次嘗試使用 Pinia，用起來確實很舒服，符合直覺，易于學(xué)習(xí) ，有點類似于 recoil，但沒有 recoil 那么多的概念和 API，主體非常精簡，極易上手。Pinia 快速入門

vscode 需安裝插件

• Eslint
• Prettier
• Volar

與vetur相同，volar是一個針對 vue 的 vscode 插件，不過與 vetur 不同的是，volar 提供了更為強大的功能。

Volar 介紹

搭建項目架構(gòu)

初始化項目

初始化項目之前，需安裝 taro，請參考 Taro 文檔，完成 taro 安裝

使用命令創(chuàng)建模板項目：

taro init myApp

安裝 cli 用來執(zhí)行構(gòu)建等操作，之后啟動項目，會生成一個 dist 目錄

yarn add @tarojs/cli
yarn dev:weapp

打開微信開發(fā)工具 工程目錄需要指向構(gòu)建出來的 dist 文件

Hello world 出現(xiàn)，項目成功跑起來了！

設(shè)置代碼規(guī)范

• 代碼規(guī)范 ESlint
• 代碼格式化 Prettier
• 提交前檢查 husky

個人認為，eslint + prettier 足以應(yīng)付大部分前端代碼規(guī)范問題了，且配置起來很簡單，有特殊需求也可繼續(xù)配置。

安裝依賴

yarn add @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plugin-prettier vue-tsc husky -D

設(shè)置代碼規(guī)范和格式化規(guī)則

.eslintrc.js

module.exports = {
  root: true,

  env: {
    node: true,
    'vue/setup-compiler-macros': true
  },

  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier', '@vue/typescript'],

  parserOptions: {
    parser: '@typescript-eslint/parser'
  },

  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        trailingComma: 'none',
        arrowParens: 'avoid',
        printWidth: 100
      }
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

.prettierrc

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "printWidth": 100
}

在 package.json 中 script 添加 Ts 檢查命令和 Eslint 檢查命令

"scripts":{
  "tsc": "vue-tsc --noEmit --skipLibCheck",
  "lint": "eslint --ext .vue --ext .js --ext .ts src/"
}

添加 husky 觸發(fā) Git 鉤子，代碼提交前檢查

npx husky install

編輯 pre-commit 執(zhí)行 Eslint 檢查和 Ts 檢查

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "---eslint start---"
npm run lint
echo "---eslint end---"

echo "---ts lint start---"
npm run tsc
echo "---ts lint end---"

至此，項目的代碼規(guī)范和格式規(guī)范配置完畢，多人協(xié)作也不是問題了。

引入 NutUI

yarn add @nutui/nutui-taro

在 .babelrc 或 babel.config.js 中添加配置：

module.exports = {
  // ...
  plugins: [
    [
      'import',
      {
        libraryName: '@nutui/nutui',
        libraryDirectory: 'dist/packages/_es',
        camel2DashComponentName: false
      },
      'nutui3-vue'
    ],
    [
      'import',
      {
        libraryName: '@nutui/nutui-taro',
        libraryDirectory: 'dist/packages/_es',
        camel2DashComponentName: false
      },
      'nutui3-taro'
    ]
  ]
}

按需引入，安裝插件 babel-plugin-import

yarn add babel-plugin-import -D

樣式處理 因為 nutui 的設(shè)計稿是 375 的 所以將框架的設(shè)計尺寸調(diào)整為 375

項目配置文件 config/index.js 中配置:

designWidth: 375

app.ts

import { createApp } from 'vue'
import { Button } from '@nutui/nutui-taro'

const app = createApp()

app.use(Button)

index.vue 中，nut-button 組件直接在 template 中寫，不用再引入

<template>
  <view class="index">
    <text>{{ msg }}</text>
    <nut-button type="primary">主要按鈕</nut-button>
  </view>
</template>

說實話，配置起來還是有點麻煩，不過按照官網(wǎng)文檔說明來配也沒有踩坑，還行。

小程序分包配置

小程序主包超過 2M，就無法真機預(yù)覽了，為了提前做好準備在一開始就進行分包處理。比如下面這個小程序的配置，分了四個包。

app.config.ts

pages: ['pages/create/index', 'pages/find/index', 'pages/my/index'],
subpackages: [
{
  root: 'pages/featureA',
  pages: ['index/index']
},
{
  root: 'pagesSub/search',
  pages: ['index']
},
{
  root: 'pagesSub/my',
  pages: ['detail/index', 'about/index']
},
{
  root: 'pagesSub/book',
  pages: ['detail/index', 'person/list/index', 'person/detail/index']
}
],

可以在小程序開發(fā)工具編輯器里的代碼依賴分析，查看主包和分包的大小

使用 script setup 語法封裝小程序頁面生命周期方法

hooks/life.ts

import { getCurrentInstance } from '@tarojs/taro'
import { onMounted } from 'vue'

const Current = getCurrentInstance()

export function useDidShow(callback) {
    onMounted(callback) Current?.page?.onShow && (Current.page.onShow = callback)
}
export function usePullDownRefresh(callback) {
    Current?.page?.onPullDownRefresh && (Current.page.onPullDownRefresh = callback)
}

使用

import { useDidShow } from '@/hooks/life'

useDidShow(() => {
  // console.log('onShow')
})

安裝 Pinia 進行狀態(tài)管理

yarn add pinia
yarn add taro-plugin-pinia

項目配置文件 config/index.js 中配置:

plugins: ['taro-plugin-pinia']

以管理用戶信息和用戶登錄狀態(tài)為例，實現(xiàn)一個用戶登錄功能

需要處理的文件代碼如下：

stores/auth.ts

import { defineStore } from 'pinia'

interface UserInfoProp {
  nickName: string
  avatarUrl: string
}

const useAuth = defineStore({
  id: 'authInfo',
  state: () => ({
    userInfo: {
      nickName: '',
      avatarUrl: ''
    },
    isLogin: false
  }),
  actions: {
    login() {
      this.isLogin = true
    },
    logout() {
      this.isLogin = false
    },
    setUserInfo(userInfo: UserInfoProp) {
      this.userInfo = userInfo
    }
  }
})
export { useAuth }

stores/index.ts

import { createPinia } from 'pinia'
import { useAuth } from './auth'

export const store = createPinia()

const storeObj = {
  auth: useAuth
}

// 封裝成useStore的形式，這樣一看引用就知道是store的數(shù)據(jù)
export function useStore(key: string) {
  return storeObj[key]()
}

個人中心 index.vue

<template>
  <main v-if="isLogin">
    <user-info />
  </main>
  <main v-else>
    <nut-button type="primary" @click="handleLogin">微信一鍵登錄</nut-button>
  </main>
</template>

<script setup>
import Taro from &#39;@tarojs/taro&#39;
import { computed } from &#39;vue&#39;
import { useStore } from &#39;@/stores&#39;

import UserInfo from &#39;./userInfo.vue&#39;

const auth = useStore(&#39;auth&#39;)
const isLogin = computed(() => auth.isLogin)

const handleLogin = () => {
  setTimeout(() => {
    // 模擬后端請求得到token和userInfo
    Taro.setStorageSync(&#39;token&#39;, &#39;xxxx&#39;)
    auth.setUserInfo({
      nickName: &#39;林&#39;,
      avatarUrl:
        &#39;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&#39;
    })
    auth.login()
  }, 500)
}
</script>

</script>

userInfo 組件

<template>
  <article>
    <nut-avatar size="large" :icon="userInfo.avatarUrl"></nut-avatar>
    <span class="ellipsis name">{{ userInfo.nickName }}</span>
  </article>
</template>

<script setup>
import Taro from &#39;@tarojs/taro&#39;
import { computed } from &#39;vue&#39;
import { useStore } from &#39;@/stores&#39;

const auth = useStore(&#39;auth&#39;)
const userInfo = computed(() => auth.userInfo)

</script>

總的來說， pinia 寫起來是非常簡潔的，這種類 react hooks 的寫法，我是非常喜歡的

請求方法封裝

http.ts

// 封裝axios的請求，返回重新封裝的數(shù)據(jù)格式
// 對錯誤的統(tǒng)一處理
import { HttpResponse } from '@/common/interface'
import Taro from '@tarojs/taro'
import publicConfig from '@/config/index'
import axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  Canceler
} from 'axios-miniprogram'
import errorHandle from '../common/errorHandle'
const CancelToken = axios.CancelToken

class HttpRequest {
  private baseUrl: string
  private pending: Record<string, Canceler>

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl
    this.pending = {}
  }

  // 獲取axios配置
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        &#39;Content-Type&#39;: &#39;application/json;charset=utf-8&#39;
      },
      timeout: 10000
    }
    return config
  }

  removePending(key: string, isRequest = false) {
    if (this.pending[key] && isRequest) {
      this.pending[key](&#39;取消重復(fù)請求&#39;)
    }
    delete this.pending[key]
  }

  // 設(shè)定攔截器
  interceptors(instance: AxiosInstance) {
    instance.interceptors.request.use(
      config => {
        console.log(&#39;config :>> &#39;, config)
        let isPublic = false
        publicConfig.publicPath.map(path => {
          isPublic = isPublic || path.test(config.url || &#39;&#39;)
        })
        const token = Taro.getStorageSync(&#39;token&#39;)
        if (!isPublic && token) {
          config.headers.Authorization = &#39;Bearer &#39; + token
        }
        const key = config.url + &#39;&&#39; + config.method
        this.removePending(key, true)
        config.cancelToken = new CancelToken(c => {
          this.pending[key] = c
        })
        return config
      },
      err => {
        errorHandle(err)
        return Promise.reject(err)
      }
    )

    // 響應(yīng)請求的攔截器
    instance.interceptors.response.use(
      res => {
        const key = res.config.url + &#39;&&#39; + res.config.method
        this.removePending(key)
        if (res.status === 200) {
          return Promise.resolve(res.data)
        } else {
          return Promise.reject(res)
        }
      },
      err => {
        errorHandle(err)
        return Promise.reject(err)
      }
    )
  }

  // 創(chuàng)建實例
  request(options: AxiosRequestConfig) {
    const instance = axios.create()
    const newOptions = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance)
    return instance(newOptions)
  }

  get(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> | Promise<HttpResponse> {
    const options = Object.assign(
      {
        method: &#39;get&#39;,
        url: url
      },
      config
    )
    return this.request(options)
  }

  post(url: string, data?: unknown): Promise<AxiosResponse> | Promise<HttpResponse> {
    return this.request({
      method: &#39;post&#39;,
      url: url,
      data: data
    })
  }
}

export default HttpRequest

request.ts

import HttpRequest from './http'
import config from '@/config/index'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

const request = new HttpRequest(baseUrl)

export default request

以獲取圖書列表和圖書詳情為例

apis/book.ts

import request from '../request'

export function getBookList() {
  return request.get('books/getBookList')
}

export function getBookDetail(id: number) {
  return request.post('books/getBookDetail', {
    id
  })
}

請求方法封裝還是用到了 axios，只是用的是 axios-miniprogram ，寫法和 web 端基本一致，http.js 文件引用的一些模塊太多，本文沒有列出來，可以直接訪問本項目 github 地址查看。

樣式封裝

iPhoneX 底部橫線適配

assets/styles/common.scss

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

劉海兒屏適配

assets/styles/hairline.scss

@mixin hairline-common() {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
}

@mixin hairline() {
  @include hairline-common();
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid #eaeaea;
  transform: scale(0.5);
}

@mixin hairline-top($color, $left: 0, $right: 0) {
  @include hairline-common();
  top: 0;
  right: $right;
  left: $left;
  border-top: 1px solid $color;
  transform: scaleY(0.5);
}

@mixin hairline-bottom($color, $left: 0, $right: 0) {
  @include hairline-common();
  right: $right;
  bottom: 0;
  left: $left;
  border-bottom: 1px solid $color;
  transform: scaleY(0.5);
}

[class*='van-hairline'] {
  &::after {
    @include hairline();
  }
}

.van-hairline {
  &,
  &--top,
  &--left,
  &--right,
  &--bottom,
  &--surround,
  &--top-bottom {
    position: relative;
  }

  &--top::after {
    border-top-width: 1px;
  }

  &--left::after {
    border-left-width: 1px;
  }

  &--right::after {
    border-right-width: 1px;
  }

  &--bottom::after {
    border-bottom-width: 1px;
  }

  &,
  &-unset {
    &--top-bottom::after {
      border-width: 1px 0;
    }
  }

  &--surround::after {
    border-width: 1px;
  }
}

多行文字省略

assets/styles/ellipsis.scss

@mixin multi-ellipsis($lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis {
  @include ellipsis();
}

.multi-ellipsis--l2 {
  @include multi-ellipsis(2);
}

.multi-ellipsis--l3 {
  @include multi-ellipsis(3);
}

總結(jié)

至此，終于完成了 Taro + Vue3 的項目搭建，強烈建議直接訪問項目 github 地址 clone 使用，有一些配置細節(jié)本文無法一一列舉，就在項目中去發(fā)掘吧！

如果我的文章能幫助到你，那將是我的榮幸！

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

Atas ialah kandungan terperinci Bagaimana untuk membangunkan program kecil menggunakan Taro Vue3? (latihan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!