uni-app 项目搭建流程指南

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