uniapp 微信小程序

HBuilderx 创建

// 下载 安装 HBuilderx

// 创建 uniapp 项目
// 新建项目->选择 uni-app 项目->选择项目目录->输入项目名称->选择项目模板->vue版本->点击创建

// 安装插件
// 工具->插件安装->搜索并安装 uni-app(vue3) 插件

// 运行项目
// 运行->运行到小程序模拟器->微信开发者工具

// 微信开发者工具 开起服务端口
// 微信开发者工具->设置->安全设置->服务端口->勾选启用服务端口

命令创建项目

//使用Vue3/Vite版
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

//安装依赖
pnpm install

//运行
pnpm run dev:mp-weixin

//微信开发者工具
dist/dev/mp-weixin

VSCode 开发uni-app项目

// 安装插件
uni-create-view
uni-helper
uniapp小程序扩展


// ts 类型声明文件
pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
// tsconfig.json
"compilerOptions": {
    "types": ["@types/wechat-miniprogram", "@uni-helper/uni-app-types"]
}
"vueCompilerOptions": {
    "experimentalRuntimeMode": "runtime-uni-app"
}
//唤起代码提示 ctrl+i


// json 文件不能注释问题
// 点底部小齿轮，打开设置->搜索'文件关联'->点击添加项，项：输入文件名，值：输入"jsonc"

uni-ui 组件库

//安装 uni-ui
pnpm i @dcloudio/uni-ui

//配置easycom
//打开项目根目录下的 pages.json 并添加 easycom 节点：
// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

// uni-ui 类型生命文件，由于uni-ui 组件库是纯 js 文件，所以需要安装类型声明文件
pnpm i -D @uni-helper/uni-ui-types

// 配置 tsconfig.json
"compilerOptions": {
    "types": ["@uni-helper/uni-ui-types"]
}

使用pinia

//下载pinia
npm install pinia

//在main.js中引入pinia
const pinia = createPinia()
app.use(pinia)

//创建store文件夹
//编写counter.js文件
import { defineStore } from 'pinia'

export const counterStore = defineStore('counter', {
    state: () => ({
        count: 0
    }),
    getters: {},
    actions: {
        increment() {
            this.count++
        }
    }
})

//在页面中使用
import { useStore } from '@/store/counter.js'
import {storeToRefs} from 'pinia'

const store = useStore()
const {count, increment} = storeToRefs(store);


//pinia数据持久化 （uni-app）存储在uniStorage ///////////////////
npm i pinia-plugin-persistedstate

//main.js
import { createPinia } from 'pinia';
import persist from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(persist);

app.use(pinia);


/////////////////
export const useMemberStore = defineStore(
  'counter',
  () => {
    //…省略
  },
  {
    // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
        getItem(key) {
          return uni.getStorageSync(key)
        },
      },
    },
  },
)

请求

//请求拦截器 ////////////////
//测试请求
import '@/utils/http.ts';

const getData = () => {
  uni.request({
    method: 'GET',
    url: '/home/banner',
    success: (res) => {
      console.log(res.data)
    },
    fail: (err) => {
      console.error(err)
    }
  })
}

//utils/http.ts
const baseURL = 'https://api.example.com';
const httpInterceptor = {
  //拦截前触发
  invoked(options:UniApp.RequestOptions) {
    if(!options.url.startsWith('http')){
      options.url = baseURL + options.url;
    }
    options.timeout = 10000;
    options.header = {
      ...options.header,
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + 'token'
    }
  }
};
uni.addInterceptor('request',httpInterceptor);
uni.addInterceptor('uploadFile',httpInterceptor);

//请求函数封装 ////////////////////////////////////////
interface Data<T> {
  code:string,
  msg:string,
  result:T
}
export const http = <T>(options: UniApp.RequestOptions) => {
  return new Promise<Data<T>>((resolve,reject)=>{
    uni.request({
      ...options,
      success: (res) => {
        if(res.statusCode >= 200 && res.statusCode < 300){
          resolve(res.data as Data<T>);
        }else if(res.statusCode === 401){
          //清理用户数据
          reject(res);
        }else{
          //提示信息
          uni.showToast({
            title: (res.data as Data<T>).msg || '请求错误',
            icon: 'none'
          });
          reject(res);
        }
      },
      fail: (err) => {
        uni.showToast({
          title: '网络错误，请稍后再试',
          icon: 'none'
        });
        reject(err);
      }
    })
  })
}

//测试请求
import { http } from '@/utils/http.ts';
const getData = async () => {
  const res = await http<string[]>({
    url: '/home/banner',
    method: 'GET',
  })
  console.log(res)
}

组件自动导入

// pages.json
"easycom": {
    "autoscan": true,
    "custom": {
      ...
      "Xtx(.*)":"@/components/Xtx$1.vue"
    }
  },

//components文件夹，创建组件文件
XtxButton.vue
XtxButtonGroup.vue

//页面中直接使用

// 类型声明文件

路由

// 安装路由
pnpm i -S vue-router@4

// 创建路由文件
// components/components.d.ts
import XtxSwiper form './XtxSwiper.vue';

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    XtxSwiper: typeof XtxSwiper
  }
}