uni-app【项目搭建，项目运行】

uni-app的基本使用

环境搭建

安装编辑器HbuilderX 下载地址

HbuilderX是通用的前端开发工具，但为uni-app做了特别强化。

安装微信开发者工具 下载地址

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app，填写项目名称，项目创建的目录

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PFF6iflb-1622777419761)(F:/Typoraimage/image-20210604080604279.png)]

运行项目

运行到浏览器

• 点击菜单栏运行>运行到浏览器>Chrome

  

• 效果

  

运行到微信小程序

• 点击菜单栏运行>运行到小程序模拟器>微信开发者工具

  

• 第一次需要配置路径，找到微信小程序的路径

  

注意：

可能会提示微信开发者工具的服务端口未开启，需要手动开启。

开启方式

• 打开微信开发者工具>菜单栏设置>安全设置

  

• 关闭微信开发者工具，重新运行HbuilderX，这时候就打开了微信开发者工具

  

运行到真机

• 手机和电脑通过数据线连接

• 点击菜单栏运行>运行到手机或模拟器>下载真机运行插件>下一步

  

页面结构

├── pages                      # 页面文件夹
│   │── index                  # index文件夹
│   │   │── index.vue          # index页面
├── static                     # 静态资源
│   │── logo.png               # 图片，视频或字体图标
├── unpackage                  # 存放打包输出的文件
├── App.vue                    # 项目根组件
├── main.js                    # 项目入口文件
├── manifest.json              # 应用的配置文件
├── pages.json                 # 页面存放目录，全局外观
├── uni.scss                   # 整体控制应用的风格

介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue 是我们的根组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件，可以调用应用的声明周期函数。

main.js 是我们的项目入口文件，主要作用是初始化 vue 实例并使用需要的插件。

uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss 文件里预置了一批scss变量预置。

unpackage 就是打包目录，在这里有各个平台的打包文件。

pages 所有的页面存放目录

static 静态资源目录，例如图片等。

components 组件存放目录。

页面开发规范

• 页面文件遵循 Vue 单文件组件 (SFC) 规范；
• 组件标签靠近小程序规范；
• 接口能力 (JS API) 靠近微信小程序规范，但需要将前缀 wx 替换为 uni；
• 数据绑定及事件处理同 Vue.js 规范，同时不充了 App 及页面的声明周期
• 为兼容多端运行，建议使用 flex 布局进行开发。

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏，导航条、标题、窗口背景色等。详细文档

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

创建新的message页面

右键pages文件>创建页面---------直接生成页面结构

• 会在pages文件夹下生成刚才命名的文件名

  

• 这种创建方法，会在pages.json文件中自动引入新创建的文件，默认是排在pages文件下面，不会直接显示新创建的页面样式。

  

最终效果

配置h5特定样式

配置编译到 H5 平台时的特定样式 详细信息

属性	类型	描述
titleNView	Object	导航栏
pullToRefresh	Object	下拉刷新

修改下拉样式

pages.json页面

{
   
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages