uni-app学习（一）

用处

使用Vue.js框架，可以使代码发布到多种平台，减少学习成本和开发成本。

环境搭建

工具

HbuilderX   下载地址：HBuilderX 文档

微信开发者工具 下载地址：微信开发者工具下载_微信开发者工具官方版下载[制作工具]-下载之家

项目创建

打开HbuiderX 点击新建 项目 选择uni-app 进行创建

​

创建成功后自动生成的文件名等结构

​

 运行文件---点击运行，内置浏览器（需要下载）

​

运行成功后点击local后面的网址，进入网址按f12进入网页的开发者模式（需要在网页设置中打开）-----点击如图所示的图标，就可以看到页面在移动端的显示格式。

​

创建新的页面，在pages文件夹中点击有点，新建页面，注意：勾选下方在pages.json中注册

 微信开发者工具的使用，下载好以后点击运行小程序模拟器中的微信开发者工具，配置工具的安装目录

​

配置后，手动打开微信开发者工具进行服务器端口的开启

​

打开后使用微信开发者工具运行程序

​

内部一些标签解释

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

 uni-app文档详解

pages.json--uni-ap