uni-app项目起步

Posted 步步生花@苏殿主

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app项目起步相关的知识，希望对你有一定的参考价值。

文章目录

一、uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 ios、android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

二、开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

  • 模板丰富
  • 完善的智能提示
  • 一键运行

1、下载

2、安装

  • 将下载的 zip包 进行解压缩
  • 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
  • 双击 HBuilderX.exe 即可启动 HBuilderX

3、安装 scss/sass 编译

为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：
https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：

4、快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

5、修改编辑器的基本设置

操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置

源码视图下可用的参考配置：


  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false

三、创建uni-app项目

1、文件 -> 新建 -> 项目

2、填写项目基本信息

3、项目创建成功

四、目录结构

┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

五、把项目运行到微信开发者工具

1、填写自己的微信小程序的 AppID

2、在 HBuilderX 中，配置“微信开发者工具”的安装路径：

3、在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

4、在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：


5、初次运行成功之后的项目效果：

六、使用 Git 管理项目

1、本地管理

（1）在项目根目录中新建 .gitignore 忽略文件，并配置如下

# 忽略 node_modules 目录
/node_modules
/unpackage/dist



注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪

此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位

（2）打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库

git init



（3）将所有文件都加入到暂存区

git add .

（4）本地提交更新

git commit -m "初始化项目"

2、把项目托管到码云

（1）注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）

（2）生成并配置 SSH 公钥

在C:\\Users\\7data目录下，新建 .ssh 文件夹

进入 .ssh 目录下，单机鼠标右键，选择 Git Bash here

输入命令：ssh-keygen -t rsa -C "xxx@xxx.com"

为避免后续生成其它 ssh 被覆盖，这里推荐手动修改文件名。如图，我这里修改为 gitee_id_rsa

打开生成的 gitee_id_rsa.pub 文件，全选并复制内容

登录gitee , 点击设置

进入【SSH公钥】，粘贴 gitee_id_rsa.pub 文件里复制的内容

粘贴后自动生成标题，点击确定

输入账号密码进行验证

验证成功

测试公钥是否配置成功：　ssh -T git@gitee.com，成功如下所示：

如果出现如下问题

解决方法如下：（详请点击进入）
新建并配置config 文件


（3）创建空白的码云仓库



创建成功！

（4）把本地项目上传到码云对应的空白仓库中


上传成功

uni-app入门教程——环境配置与运行

uni-app入门教程

1.uni-app简介

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2.uni-app开发工具的下载

    “工欲善其事，必先利其器。”这么牛逼的框架当然需要配上合适的开发工具了。目前uni-app的开发工具首推Hbuilder，下载链接如下：
    官方IDE下载地址
    进入下载页面之后，选择与电脑系统对应的APP开发版工具，点击下载压缩包。下载完成之后，将压缩包解压到想要放置的位置，例如解压之后效果截图：

接下来，点击里面的Hbuilder.exe文件运行。

2.1 Hbuilder电脑桌面适配

    打开之后，发现页面打开后明显不适配，上面的菜单选项都看不全。解决方法：打开电脑显示设置，将缩放与布局更改然后重启Hbuilder，然后再将缩放与布局设回原值，再次重启Hbuilder即可。

3.Hbuilder运行uni-app项目


    如上图所示，新建一个Hbuilder项目，项目创建完如下图所示：

3.1 浏览器预览uni-app项目

    对于uni-app项目的预览，直接点击下图位置即可：

点击之后Hbuilder会自动进行编译并跳转到浏览器端显示运行效果，对于浏览器的手机端和PC端显示，可以使用后台调试切换甚至自定义设备尺寸：

3.2 微信小程序预览uni-app项目

    对于小程序的预览目前还是主要以微信小程序为主，因此可以下载一个微信小程序开发者工具，下载链接如下：
    稳定版 Stable Build

下载完成之后，打开小程序，然后将里面的 设置->通用设置->安全里面的服务端口打开，如下图所示：

设置完成时候关闭微信开发者工具。
    接下来，回到Hbuilder工具中，在菜单运行中找到微信小程序开发工具中打开选项。

此时，这里提示需要找到微信开发这工具的路径。这时回到桌面，可使用如下方法找到微信开发者工具位置：
在路径选择处只需要找到微信开发者工具.exe文件路径并点击确定即可。接下来Hbuilder会自动编译打开微信开发者工具。
    但是报错如下：

VM27 WAService.js:2 TypeError: Cannot read property ‘forceUpdate‘ of undefined

本质上这个是由于没有登陆Hbuilder工具导致的，解决方法如下：
回到Hbuilder工具里面，找到微信开发者密匙配置，填入自己的微信开发者工具appID,如下图所示：

至于其他的小程序，应该和这个差不多。

3.3 手机预览预览uni-app项目

    手机预览其实可以使用更为强大的模拟器，但是模拟器需要占用的内存较大，加上现在只是做个基础的测试，因此我直接真机测试代替了。
    我这里使用的是华为手机（Android），下面的操作可能有些新奇。首先是用手机的数据项将电脑和手机连接，接着打开手机的开发者选项，华为手机打开方式为：找到手机设置，点击关于手机，然后连续五次点击手机的版本号，会弹出一个安全密码输入框，输入密码即可打开开发者选项。
    然后，回到关于手机目录，点击进入开发者选项，点击开启USB调试，得到结果如下：

遗憾的是并没有匹配到设备。经过一番尝试，最终弹出如下提示框证明连接成功：

但是，我个人觉得这个方法不是很好，因为这种方式你得还有其他机型的手机，这种调试方法不太安全，就比如说，我打开时间长了之后，手机管家提示：手机因为开启USB调试导致存在支付安全隐患，如果长期开发uni-app项目，还是考虑使用模拟器吧。
    初次入门uni-app，请大佬们多多关照吖~。

以上是关于uni-app项目起步的主要内容，如果未能解决你的问题，请参考以下文章

随笔uni-app项目的开发

前端框架-- Node.js从小白起步

前端UI框架bootstrap

跨平台应用开发进阶(三十七)uni-app前端监控方案 Sentry 探究

uni-app写微信登录 前端

uni-app入门教程——环境配置与运行