uni-app 项目搭建流程指南(Hbuild/vue2/vue3)
第一步:新建项目
打开 Hbuild
点击文件-新建-项目
填写你的项目名称和存放目录,然后选择你需要的模板和 vue 的版本
一般是选择默认模板或者 uni-ui 项目(uni-ui 是一个 uni 的 ui 组件库,还是很好用的),然后点击下面的创建
第二步:运行项目
填写 AppID
在新建好的项目目录中找到 manifest.json 文件-微信小程序配置-填写 AppID
运行项目
运行-运行到小程序模拟器-微信开发者工具
成功运行(微信开发者工具需要打开服务端口)
如果没有成功打开微信开发者工具,需要在微信开发者工具中设置开启服务端口
第三步:项目基础配置
增加.gitignore 文件,过滤掉打包文件
.gitignore
unpackage;
dist;
写一个全局组件
把所有页面都放在该组件中,这样就可以进行全局页面统一管理,比如权限校验,loading 效果之类的
components/my-page/my-page.vue
<template>
<div class="my-page">
<slot></slot>
</div>
</template>
后面每个新写的页面,直接写在 my-page 组件中就行了
<template>
<my-page>新页面</my-page>
</template>
小程序常用方法的封装
获取 DOM 的 style
utils/index.js
// 获取DOM的style
export function getRect(selector, all) {
return new Promise(resolve => {
const instance = getCurrentInstance();
uni
.createSelectorQuery()
.in(instance.proxy)
[all ? "selectAll" : "select"](selector)
.boundingClientRect(rect => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect);
}
if (!all && rect) {
resolve(rect);
}
})
.exec();
});
}
睡眠函数
utils/index.js
export function delay(time = 1000) {
return new Promise(resolve => {
setTimeout(resolve, time);
});
}
获取当前页面的信息,获取页面的参数
utils/index.js
// 获取当前页面信息
export function getCurrentPage(index = 0) {
const pages = getCurrentPages();
const i = pages.length - 1 + index;
if (i > -1) {
return pages[i];
}
return null;
}
export function getQuery() {
const curPage = getCurrentPage();
if (!curPage) return null;
const { options, $route } = curPage;
if ($route) {
return $route.query;
}
return options;
}
将对象变成字符串参数
utils/index.js
/**
* 拼接 url query 参数
* @param {string} url
* @param {Record<string, string | number>} query
*/
export function concatQuery(url, query) {
if (isEmptyObject(query)) return url;
let queryString = "";
for (const key in query) {
queryString += `${key}=${query[key]}&`;
}
if (!url.includes("?")) return `${url}?${queryString}`;
if (url.endsWith("?") || url.endsWith("&")) return url + queryString;
return `${url}&${queryString}`;
}
/** @type {(obj: any) => obj is Empty} */
export function isEmptyObject(obj) {
// eslint-disable-next-line no-unreachable-loop
for (let _ in obj) return false;
return true;
}
路由跳转
小程序的跳转需要将参数拼接到路径后面,非常不方便,所以我们可以将其封装成 vue-router 一样的形式,通过路径加对象传参来进行路由跳转
utils/index.js
export function go(path, param) {
const url = concatQuery(path, param);
// 小程序最多打开10个页面栈
const pages = getCurrentPages();
if (pages && pages.length > 9) {
uni.redirectTo({ url: url, fail: e => console.log("navigate fail", e) });
} else {
uni.navigateTo({ url: url, fail: e => console.log("navigate fail", e) });
}
}
export function redirect(path) {
uni.redirectTo({
url: path,
fail: e => {
console.log(e);
},
});
}