uni-app 开发

一、uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架 。开发者编写一套代码，可发布到 iOS 、 Android 、

H5 、以及各种小程序（微信 / 支付宝 / 百度 / 头条 /QQ/ 钉钉 / 淘宝）、快应用等多个平台。

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/  

二、工具安装使用

 1.安装 HBuilderX

1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html

2. 点击首页的 DOWNLOAD 按钮

3. 选择下载 正式版 -> App 开发版

 2、安装 scss/sass 编译

为了方便编写样式（例如： <style lang="scss"></style> ），建议安装 scss/sass 编译 插

件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

 

3、快捷键方案切换  

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

操作步骤：工具 -> 设置 -> 打开 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

}

Tips ：可以使用 Ctrl + 鼠标滚轮 缩放编辑器

 三、新建 uni-app 项目

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

 2. 填写项目基本信息

3. 项目创建成功  

4、目录结构

一个 uni-app 项目，默认包含如下目录及文件：

┌─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. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口： 

 

3. 运行

在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具 ，将当前 uni

app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：