Bagaimana untuk membangunkan program kecil menggunakan Taro Vue3? (latihan)

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，用起来确实很舒服，符合直觉，易于学习 ，有点类似于 recoil，但没有 recoil 那么多的概念和 API，主体非常精简，极易上手。Pinia 快速入门

vscode 需安装插件

• Eslint
• Prettier
• Volar

与vetur相同，volar是一个针对 vue 的 vscode 插件，不过与 vetur 不同的是，volar 提供了更为强大的功能。

Volar 介绍

搭建项目架构

初始化项目

初始化项目之前，需安装 taro，请参考 Taro 文档，完成 taro 安装

使用命令创建模板项目：

taro init myApp

安装 cli 用来执行构建等操作，之后启动项目，会生成一个 dist 目录

yarn add @tarojs/cli
yarn dev:weapp

打开微信开发工具 工程目录需要指向构建出来的 dist 文件

Hello world 出现，项目成功跑起来了！

设置代码规范

• 代码规范 ESlint
• 代码格式化 Prettier
• 提交前检查 husky

个人认为，eslint + prettier 足以应付大部分前端代码规范问题了，且配置起来很简单，有特殊需求也可继续配置。

安装依赖

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

设置代码规范和格式化规则

.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 触发 Git 钩子，代码提交前检查

npx husky install

编辑 pre-commit 执行 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---"

至此，项目的代码规范和格式规范配置完毕，多人协作也不是问题了。

引入 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 的设计稿是 375 的 所以将框架的设计尺寸调整为 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>

说实话，配置起来还是有点麻烦，不过按照官网文档说明来配也没有踩坑，还行。

小程序分包配置

小程序主包超过 2M，就无法真机预览了，为了提前做好准备在一开始就进行分包处理。比如下面这个小程序的配置，分了四个包。

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']
}
],

可以在小程序开发工具编辑器里的代码依赖分析，查看主包和分包的大小

使用 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 进行状态管理

yarn add pinia
yarn add taro-plugin-pinia

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

plugins: ['taro-plugin-pinia']

以管理用户信息和用户登录状态为例，实现一个用户登录功能

需要处理的文件代码如下：

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的数据
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的请求，返回重新封装的数据格式
// 对错误的统一处理
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;取消重复请求&#39;)
    }
    delete this.pending[key]
  }

  // 设定拦截器
  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)
      }
    )

    // 响应请求的拦截器
    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)
      }
    )
  }

  // 创建实例
  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);
}

总结

至此，终于完成了 Taro + Vue3 的项目搭建，强烈建议直接访问项目 github 地址 clone 使用，有一些配置细节本文无法一一列举，就在项目中去发掘吧！

如果我的文章能帮助到你，那将是我的荣幸！

【相关学习推荐：小程序开发教程】

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!