文章目录

  • 一、uni-app 简介
  • 二、开发工具
    • 1、下载
    • 2、安装
    • 3、安装 scss/sass 编译
    • 4、快捷键方案切换
    • 5、修改编辑器的基本设置
  • 三、创建uni-app项目
    • 1、文件 -> 新建 -> 项目
    • 2、填写项目基本信息
    • 3、项目创建成功
  • 四、目录结构
  • 五、把项目运行到微信开发者工具
    • 1、填写自己的微信小程序的 AppID
    • 2、在 HBuilderX 中，配置“微信开发者工具”的安装路径：
    • 3、在微信开发者工具中，通过 `设置 -> 安全设置` 面板，开启“微信开发者工具”的服务端口：
    • 4、在 HBuilderX 中，点击菜单栏中的 `运行 -> 运行到小程序模拟器 -> 微信开发者工具`，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：
    • 5、初次运行成功之后的项目效果：
  • 六、使用 Git 管理项目
    • 1、本地管理
      • （1）在项目根目录中新建 `.gitignore` 忽略文件，并配置如下
      • （2）打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库
      • （3）将所有文件都加入到暂存区
      • （4）本地提交更新
    • 2、把项目托管到码云
      • （1）注册并激活码云账号（ 注册页面地址：[https://gitee.com/signup](https://gitee.com/signup) ）
      • （2）生成并配置 SSH 公钥
      • （3）创建空白的码云仓库
      • （4）把本地项目上传到码云对应的空白仓库中

一、uni-app 简介

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

二、开发工具

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

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

1、下载

  • 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
  • 点击首页的 DOWNLOAD 按钮
  • 选择下载 正式版

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项目起步相关推荐

  1. 切换 uniapp_万能前端框架uni app初探03：底部导航开发

    前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...

  2. HBuilder X ——Uni app 学习笔记（一）

    HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

  3. uni app中使用图表

    关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

  4. HbuilderX:uni app踩坑之uView-ui

    HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

  5. uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱

    一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

  6. uni app 开发微信小程序及上线体验

    uni app 开发微信小程序及上线体验 项目创建及微信小程序AppId的申请 本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...

  7. 在uni-app的app项目中使用live-pusher实现人脸识别

    在uni-app的app项目中使用live-pusher实现人脸识别 前言 一.环境 二.使用步骤 三.permission.js源代码 四.face.vue源代码 五.代码效果 总结 前言 在uni ...

  8. uni app 手机端导航栏自定义

    uni app 手机端导航栏自定义 第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...

  9. vue后台管理、APP项目总结集合

    文章目录 后台管理界面 APP 项目整体总结 别慌,内容看起来多,其实都是一些小干货啦 后台管理界面 搭建一个vue项目: 配置相应的环境,如安装node,vue,webpack(最好安装一下淘宝镜像 ...

  10. vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...

    本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下 引入 在github(https://github.com/youzan/vant-wea ...

最新文章

  1. pandas使用extract函数根据正则表达式从dataframe指定数据列的字符串中抽取出数字(设置expand=false之后返回的为series)、将series转化为dataframe
  2. 计算机组成原理二进制地址码,计算机组成原理
  3. Xshell上传、下载文件到linux
  4. 给定关键字不在字典中怎么解决_什么是字典？我们为什么要学它？你不知，现在你只需1分钟就可学会...
  5. 用java进行LDAP用户登陆（用户认证）及修改密码
  6. 自由职业者：5步拿下新项目
  7. 企业需要成熟的云安全进程
  8. [转载] 消除vscode安装pylint后提示的unused variable
  9. 计算机科学与技术考研多少分算高分,清华计算机科学与技术系考研初复试高分经验分享...
  10. 什么是去中心化？交易所为什么要去中心化？
  11. 我的世界乘法计算机,《我的世界》计算器的加法和乘法器电路图文教程
  12. 浅谈压缩感知（二十七）：压缩感知重构算法之稀疏度自适应匹配追踪(SAMP)
  13. Windows Neptune的安装
  14. python小游戏————坦克大战
  15. java.sql.SQLException: Access denied for user ‘crm‘@‘localhost‘ (using password: YES)
  16. 专访CAPA梁振宇：信息无障碍是互联网产品的必选项
  17. 简单高效的图片降噪方法
  18. 名创优品通过上市聆讯：寻求双重主要上市 年营收91亿
  19. 连续8年 远见领跑｜山石网科入选Gartner 2021网络防火墙魔力象限
  20. c语言怎么做翻译软件,使用有道翻译API做翻译（c语言实现)

热门文章

  1. SpannableStringBuilder: SPAN_EXCLUSIVE_EXCLUSIVE spans cannot have a zero length关于edittext找不到输入值这个
  2. 内网DNS报错:** server can‘t find ns1.aaa.com: SERVFAIL
  3. 使用 parted 对单个磁盘进行分区并进行配额
  4. QT选择目录等常用文件/文件夹操作
  5. android软键盘上添加一个按钮
  6. 装修鸿蒙瓷砖选择,我家110平新房，简单装修花16万，还是地板的瓷砖最有档次！...
  7. python手写汉字识别_用python实现手写数字识别
  8. 一个HashMap对象所占内存的分析
  9. 三维实景应用制作工具有哪些？
  10. 广州出生婴儿登记入户程序