草庐IT

uni-app 项目搭建流程指南

易风有点疯 2024-05-11 原文

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

有关uni-app 项目搭建流程指南的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  3. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  4. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  5. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  6. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时,API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名,以便它在GitHub上正确呈现。更好的是,我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作?是否有某个地方可以查找可以修改的主页文件的名称?还是我必须编写一个新的Rake任务?额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么?为什么不只有一个?

  7. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  8. ruby - 使用 postgres.app 在 rvm 下要求 pg 时出错 - 2

    我正在使用Postgres.app在OSX(10.8.3)上。我已经修改了我的PATH,以便应用程序的bin文件夹位于所有其他文件夹之前。Rammy:~phrogz$whichpg_config/Applications/Postgres.app/Contents/MacOS/bin/pg_config我已经安装了rvm并且可以毫无错误地安装pggem,但是当我需要它时我得到一个错误:Rammy:~phrogz$gem-v1.8.25Rammy:~phrogz$geminstallpgFetching:pg-0.15.1.gem(100%)Buildingnativeextension

  9. ruby - 如何在 Ruby 字符串中插入项目符号字符? - 2

    我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是,当我输入它时,我收到有关非ASCII字符的语法错误。我该怎么做? 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1195

  10. ruby - 在 Rails 项目中测试本地版本的 gem - 2

    我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时,我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意,我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR,但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好,但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb,这看起来不对或者b)升级版本,推送到Github,然后运行​​bundleup,这除了耗时之外显然是一场灾难,因为我不确定我所做的promise是否正

随机推荐