Uni-app框架（小程序开发） 笔记

Uni-app框架（小程序开发）

一、安装以及配置

• 下载Hbuilder X标准版，下载插件，scss/sass编译、uni-app编译、内置浏览器、内置终端。查看更多
• 下载微信开发者工具，安装后，点设置=》安全=》开启服务端口。查看更多
• 登陆微信开发者工具，在微信公众平台上扫码登陆获得测试号的appID

• 第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。

• 在HbuilderX打开已有项目，点击运行->运行到小程序模拟器-微信开发者工具，可以同步更新

二、uni-app是什么

• 基于Vue.js开发的前端应用框架
• 开发一套代码，能同时发布到iOS. Android、 H5、以及 各种小程序平台。

• 支持通过npm安装第三方包

三、创建运行以及打包

3.1、创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

3.2、运行uni-app

此处只针对微信小程序开发，点击运行->运行到小程序模拟器-微信开发者工具

3.3、打包uni-app

此处只针对微信小程序发布

• 申请微信小程序AppID，参考：微信教程

• 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可

• 

四、框架介绍

4.1、目录结构

 ┌─components uni-app组件目录

│ └─comp-a.vue 可复用的a组件

├─hybrid 存放本地网页的目录，详见

├─pages 业务页面文件存放的目录

│ ├─index

│ │ └─index.vue index页面

│ └─list

│ └─list.vue list页面

├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此

├─wxcomponents 存放小程序组件的目录，详见

├─main.js Vue初始化入口文件

├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期

├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见

└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

4.2、开发规范

为了实现多端兼容，综合考虑编译速度，运行性能等因素，uni-app 约定了如下开发规范：

为兼容多端运行，建议使用 flex 布局进行开发

4.2.1 页面文件向导Vue单文件组件（SFC）规范

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块