一、搭建项目

1. 使用taro初始化项目

使用 npm 安装 CLI  
$ npm install -g @tarojs/cli  
  
使用 yarn 安装 CLI  
$ yarn global add @tarojs/cli

使用命令创建模板项目：

$ taro init my-miniApp

回车之后，选择你需要的配置，我的选择是vue3+TS+Sass+webpack5+yarn+github模板的vue3-NutUI

选择完成后，它会自动帮你拉好依赖，然后就可以运行这个项目了

二、项目配置

1. alias配置（用于配置目录别名，从而方便书写代码引用路径。）

(1)、config-index.js配置

alias: {
    '@/store': path.resolve(__dirname, '..', 'src/store'),
    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
    '@/api': path.resolve(__dirname, '..', 'src/api'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/hooks': path.resolve(__dirname, '..', 'src/hooks'),
},

（2）、tsconfig.json配置

{
  "compilerOptions": {
    ......
    "baseUrl": ".",
    "paths": {
      "@/store/*": ["./src/store/*"],
      "@/assets/*": ["./src/assets/*"],
      "@/api/*": ["./src/api/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/hooks/*": ["./src/hooks/*"],
    }
  }
}

（3）、注意点

若你用的编辑器是webstorm，它可能会出现找不到该模块的问题此时需要再添加一个文件：webpack.config.js，并添加如下代码，并将它配置到编辑器里：

进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可

/**
 * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
 * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
 */
const resolve = dir => require('path').join(__dirname, dir);

module.exports = {
    resolve: {
        alias: {
            '@/store': resolve('/src/store'),
            // '@/component': resolve('/src/component'),
            '@/api': resolve('/src/api'),
            '@/assets': resolve('/src/assets'),
            '@/utils': resolve('/src/utils'),
            '@/hooks': resolve('/src/hooks'),
            // '@/pages': resolve('/src/pages'),
        }
    }
};

3. pinia的安装和配置

pinia官方文档：pinia.vuejs.org/zh/getting-…

（1）、安装：

yarn add pinia
# 或者使用 npm
npm install pinia

（2）、配置：

在app.ts文件下加入如下代码，然后我们就可以使用了

import {createPinia} from "pinia";
App.use(createPinia())

（3）、使用：

在store文件夹下新建modules文件，并新建userInfo.ts文件，使用Taro.setStorageSync()是为了在本地也存一份，这个看自己需求，可以不加

// 用户信息相关
import {defineStore} from "pinia";
import Taro from "@tarojs/taro";

// 命名最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
export const useUserInfoStore = defineStore({
    id: "userInfo",//是必须传入的， Pinia 将用它来连接 store 和 devtools
    state: () => ({
        userInfo: {},
    }),
    actions: {
        setUserInfo(value: any) {
            this.userInfo = value;
            Taro.setStorageSync('USER_INFO', value);
        }
    },
    getters: {
        getUserInfo() {
            this.setUserInfo(Taro.getStorageSync('USER_INFO'))
            return this.userInfo;
        }
    }
});

使用：

<script setup>
import {useUserInfoStore} from "@/store/modules/userInfo";
const userInfoStore = useUserInfoStore()

onMounted(()=>{
    userInfoStore.setUserInfo({name:'张三'}) // 赋值
    console.log(userInfoStore.userInfo) //直接使用
    console.log(userInfoStore.getUserInfo) //getters的使用也是，可以直接使用
})
</script>

4. 请求方法的封装（Taro.request()）可通用

import Taro from '@tarojs/taro';

let needLoadingRequestCount = 0;

// loading配置，请求次数统计
function startLoading() {
    Taro.showLoading({
        title: '加载中',
        // icon: 'loading',
        mask: true
    })
}

function endLoading() {
    Taro.hideLoading();
}

// 声明一个对象用于存储请求个数
function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading();
    }
    needLoadingRequestCount++;
}

function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return;
    needLoadingRequestCount--;
    if (needLoadingRequestCount === 0) {
        endLoading();
    }
}

//loading是做了多个请求同时发起的时候防止动画叠加
interface RequestConfig {
    url: string;
    params?: any;
    method: any;
    header?: any;
    loading?: boolean;
}

export const request = async (obj:RequestConfig) => {//默认加载都带动画设置false不加载
    const {url, params, method = 'GET', header = {}, loading = true} = obj;
    loading && showFullScreenLoading();
    return new Promise((resolve, reject) => {
        Taro.request({
            url,,
            method,
            data: params,
            header,
            success: (res) => {
                tryHideFullScreenLoading();
                const {code, msg} = res.data
                if (code === 0) {
                    resolve(res.data);
                } else {
                   //其他操作
                }
            },
            fail: (error) => {
                console.log('请求失败fail', error);
                tryHideFullScreenLoading();
                Taro.showToast({
                    title: error.errMsg,
                    icon: 'error',
                    duration: 2000
                })
                reject(error)
            },
        })
            .catch(error => {
                console.log('请求失败catch', error);
                Taro.showToast({
                    title: error.errMsg,
                    icon: 'error',
                    duration: 2000
                })
                reject(error);
                throw new Error(error);
            });
    })
}

小程序的登录流程

我画了大概的流程图，仅供参考

具体API的方法可参考微信官方文档：developers.weixin.qq.com/miniprogram…

有个注意的地方，getUserProfile()调整了新的规则，不再授权给头像和昵称了，并提供了增加头像和昵称的方法，具体见:developers.weixin.qq.com/community/d…

小程序多环境的配置（部分公司会用，基本很少用到）

思路就是当你进入小程序的时候，他根据你的openID判断你现在处于哪个环境，根据当前所处环境（默认是生产环境），拿到当前的请求地址前缀，可以拼接在请求方法Taro.request()的url之前

Taro+vue3+ts+pinia+Nut-ui开发微信小程序