Uniapp

Uniapp

文章目录

1. uni-app简介
2. 开发工具
   • 下载 HBuilderX
   • 安装 HBuilderX
   • 安装 scss/sass 编译
   • 快捷键切换
   • 修改编辑器的设置
3. 创建 uni-app 项目
4. 目录结构
5. 运行到微信开发者工具

1.uni-app 简介

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

详细的 uni-app 官方文档 请看 uni-paa官方文档

2.开发者工具

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

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

当然   你依然可以根据自己的喜好   选择使用  VS Code   Sublime  记事本 等一切自己喜欢的编辑器

2.1.下载 HBuilderX

1. 访问 HBuiderX 的官方首页 https://www.dcloud.io/hbuilderx.html
2. 点击首页的 DOWNLOAD 按钮
3. 选择下载 正式版 —> App 开发版
   

2.2.安装 HBuilderX

1. 下载的 zip包 进行解压
2. 解压之后 的文件夹 一定要放到 纯英文的目录中 不能含有特殊符号
3. 双击 HBuilderX.exe 即可启动 HBuilderX
   

2.3.安装 scss/sass 编译

为了方便编写样式 例如 建议安装 scss/sass 编译 插件
地址： https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面 之后 点击右上角 使用 HBuilderX 导入插件 按钮进行自动安装

2.4.快捷键方案切换

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

2.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
}

3.新建 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 等页面类信息

5.项目运行到微信开发者工具

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

2. 在 HBuilderX 中 配置微信开发者工具的 安装路基
   工具 设置 运行配置 微信开发者
   

3. 在微信开发者工具中 通过 设置 下的 安全设置 面板 开启微信开发者工具的服务端口
   

4. 在 HBuilderX 中 点击菜单栏的 运行 运行微信小程序模拟器 微信开发者工具 把项目编译后 自动运行微信开发者工具
   

5. 运行成功后的效果