Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to use Taro+Vue3 to develop Mini Program, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

WeChat Mini Programs is an application running in Wechat, its essence is the application of Hybrid technology, Hybrid App is a mixed-mode mobile application, so it is similar to H5, but has many native capabilities than H5, such as calling location information and camera and so on.

Mini Program is developed in a very similar way to H5, using JavaScript, HTML and CSS languages.

Therefore, Mini Program development can be said to be a skill that a front-end engineer must master.

Native Mini Program development has a certain learning cost. Now there are many third-party multi-terminal frameworks for Mini Program development on the market. If you are not in pursuit of extreme performance and stability, do not use native Mini Program development, the development efficiency is too low.

In the third-party multi-terminal framework, taro and uni-app are the most widely used. generally speaking, when doing technology selection, the team uses react, the team uses taro, the team uses vue, and the team uses uni-app. There is no good or bad distinction between the two.

But many developers may not know that the above version of taro3.0 supports the use of vue, this article will introduce how to use Taro3 + Vue3 to develop WeChat Mini Programs.

After I have completed the construction of this project according to the information on the Internet, I have developed a Mini Program with this project, that kind of development experience is really beyond all the projects I have developed in the past, and it is very slippery (maybe it is the first time for me to write vue3 script setup, it is really comfortable to use).

Target function

Integrate vue3 and develop using script setup syntax

Integrated Typescript

Code review and format optimization

Global state management

Mini Program subcontract configuration

Style encapsulation, compatibility with bangs and other style problems

Http method encapsulation

Main technology stack

Taro3

Vue3

TypeScript

NutUi

Pinia

When vue3 was first released, my enthusiasm for learning vue3 was directly discouraged because there was no proper ui framework to support it. Until now, excellent frameworks such as quasar, element-plus, ant-design-vue and so on support vue3 one after another, and many vue3 projects have been used in the production environment, only to find that people are really using vue3.

For example, the project team next door to our company used vue3 for the refactoring project, and then I found that I was a little late to learn vue3 (tips: the front end is really too curly)

NutUI is a JD.com-style mobile component library that supports the use of Vue to write applications that can be used on H5 and Mini Program platforms to help developers improve development efficiency and improve development experience.

I learned about NutUI from Taro documents. Taro officially recommends NutUI development. They all seem to come from the same development team of JD.com. I try to use them, and the experience is good.

Pinia is a state management library for Vue, similar to Vuex, is another state management scheme for Vue, and supports Vue2 and Vue3.

The first time I came into contact with the front-end status management tool was a background management system of the company when I was just an internship, using dva, which could be called torture and almost persuaded me to quit directly. Later gradually familiar with some, but do not use redux, or vuex, still think it is troublesome to write.

This attempt to use Pinia is really comfortable, intuitive, easy to learn, a bit similar to recoil, but not as many concepts and API as recoil, the main body is very concise and easy to use. Getting started with Pinia

Plug-ins need to be installed for vscode

Eslint

Prettier

Volar

Like vetur, volar is a vscode plug-in for vue, but unlike vetur, volar provides more powerful functionality.

Volar introduction

Build the project architecture to initialize the project

Before initializing the project, you need to install taro. Please refer to the Taro documentation to complete the taro installation.

Use the command to create a template project:

Taro init myApp

Install cli to perform build and other operations, and then start the project to generate a dist directory

Yarn add @ tarojs/cliyarn dev:weapp

To open the Wechat development tools project directory, you need to point to the built dist file.

Hello world appeared and the project ran successfully!

Set the code specification

Code specification ESlint

Code formatting Prettier

Check husky before submission

Personally, eslint + prettier is enough to handle most front-end code specification problems, and it is easy to configure, and you can continue to configure it if you have special needs.

Installation dependency

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

Set code specifications and formatting rules

.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}

Add Ts check command and Eslint check command to script in package.json

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

Add husky to trigger Git hook, check before code submission

Npx husky install

Edit pre-commit to perform Eslint check and Ts check

#! / bin/sh. "$(dirname" $0 ") / _ / husky.sh" echo "- eslint start---" npm run lintecho "- eslint end---" echo "- ts lint start---" npm run tscecho "- ts lint end---"

At this point, the code specification and format specification of the project have been configured, and multi-person collaboration is no longer a problem.

Introduce NutUIyarn add @ nutui/nutui-taro

Add a configuration to .babelrc or 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']]}

Introduce on demand and install the plug-in babel-plugin-import

Yarn add babel-plugin-import-D

Style processing because the design draft of nutui is 375, the design size of the frame is adjusted to 375.

Configured in the project configuration file config/index.js:

DesignWidth: 375

App.ts

Import {createApp} from 'vue'import {Button} from' @ nutui/nutui-taro'const app = createApp () app.use (Button)

In index.vue, the nut-button component is written directly in template without introducing

{{msg}} main button

To tell you the truth, it is still a bit troublesome to configure, but there is no trampling in accordance with the official website documentation, which is all right.

Mini Program subcontract configuration

Mini Program main package more than 2m, can not be previewed by the real machine, in order to be prepared in advance at the beginning of subcontracting processing. For example, the following Mini Program configuration is divided into four packages.

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

You can view the size of the main package and subpackage by analyzing the code dependency in the Mini Program developer tools editor

Encapsulate the Mini Program page life cycle method with script setup syntax

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)}

Use

Import {useDidShow} from'@ / hooks/life'useDidShow (() = > {/ / console.log ('onShow')}) install Pinia for state management yarn add piniayarn add taro-plugin-pinia

Configured in the project configuration file config/index.js:

Plugins: ['taro-plugin-pinia']

Take managing user information and user login status as an example to realize a user login function.

The file code that needs to be processed is as follows:

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} / / encapsulated in the form of useStore, so that you can know at a glance that the data export function useStore (key: string) {return storeObj [key] ()} of store

Personal Center index.vue

One click on Wechat to import Taro from'@ tarojs/taro'import {computed} from 'vue'import {useStore} from' @ / stores'import UserInfo from. / userInfo.vue'const auth = useStore ('auth') const isLogin = computed (() = > auth.isLogin) const handleLogin = () = > {setTimeout () = > {/ / simulate the backend request to get token and userInfo Taro.setStorageSync (' token', 'xxxx') auth.setUserInfo ({nickName:' Lin') AvatarUrl: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png'}) auth.login ()}

UserInfo component

{{userInfo.nickName}} import Taro from'@ tarojs/taro'import {computed} from 'vue'import {useStore} from' @ / stores'const auth = useStore ('auth') const userInfo = computed (() = > auth.userInfo)

Generally speaking, pinia is very concise to write. I like this kind of react hooks very much.

Request method encapsulation

Http.ts

/ / encapsulate the request for axios Return the repackaged data format / / A pair of error unified processing 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.CancelTokenclass HttpRequest {private baseUrl: string private pending: Record constructor (baseUrl: string) {this.baseUrl = baseUrl this.pending = {}} / / get axios configuration getInsideConfig () {const config = {baseURL: this.baseUrl, headers: {'Content-Type':' application/json Charset=utf-8'}, timeout: 10000} return config} removePending (key: string IsRequest = false) {if (this.pending [key] & & isRequest) {this.pending [key] ('cancel duplicate request')} delete this.pending [key]} / / set interceptor interceptors (instance: AxiosInstance) {instance.interceptors.request.use (config = > {console.log ('config: > >') Config) let isPublic = false publicConfig.publicPath.map (path = > {isPublic = isPublic | | path.test (config.url | |')}) const token = Taro.getStorageSync ('token') if (! isPublic & & token) {config.headers.Authorization =' Bearer'+ token} const key = config.url +'&'+ config.method this.removePending (key True) config.cancelToken = new CancelToken (c = > {this.pending [key] = c}) return config} Err = > {errorHandle (err) return Promise.reject (err)}) / / interceptor instance.interceptors.response.use responding to the request (res = > {const key = res.config.url +'&'+ 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)}) / / create instance 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 | Promise {const options = Object.assign ({method: 'get', url: url}, config) return this.request (options)} post (url: string, data?: unknown): Promise | Promise {return this.request ({method:' post', 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.proconst request = new HttpRequest (baseUrl) export default request

Take getting a list of books and book details as an example

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})}

The request method encapsulation still uses axios, but uses axios-miniprogram, which is basically the same as the web side. There are too many modules referenced in the http.js file, which is not listed in this article. You can visit the github address of this project directly.

Style encapsulation

IPhoneX bottom horizontal line fit

Assets/styles/common.scss

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

Bangs screen adaptation

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 } @ 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 } [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;}}

Multiline text ellipsis

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) } Thank you for reading this article carefully. I hope the article "how to develop Mini Program with Taro+Vue3" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.