uni-app-初识

初识uni-app

作用

• 多端app的开发
• 跨端（APP，各种小程序，H5）开发框架

特点

• 运用了vue语法
• 小程序的组件模式
• 通过uni-app同意各端的api
• 编译出隔断的源代码

uni-app的目录结构

• components uni-app组件目录
  • comp-a.vue 可复用的a组件
• hybrid 存放本地网页的目录
• platforms 存放各个平台专用的页面目录
• pages 业务页面文件存放的目录
  • index 首页页面文件
    • index.vue index页面
  • list list页面文件
    • list.vue list页面

• static 存放应用引用静态资源（如：图片，视频等）
• wxcomponents 存放小程序组件的目录
• main.js Vue初始化入口文件
• App.vue 应用配置，用来配置App全局样式以及监听，应用生命周期
• manifest.json 配置应用名称，appid，logo，版本等打包信息
• pages.json 配置页面路由，导航条，选项卡等页面类信息

运行编译环境准备

• H5
• APP
  • 下载app模拟器（mumu模拟器，雷电模拟器）
  • 配置app模拟器的端口
    • HbuilderX中的操作：运行=>运行到手机或模拟器=>Android模拟器端口设置
      • mumu：7555
      • 雷电：5555
• 微信
  • 下载并安装微信开发者工具
  • 配置开发者工具启动端口
    • 设置=>安全设置=>服务器端口开启
  • HbuilderX操作：运行到小程序模拟器=>运行设置=>小程序开发者工具路径

index.vue页面分析

• template 模板
• script 业务逻辑
• style 样式

常用组件

• view—视图容器

  • 它类似于传统html中的div，用于包裹各种元素内容。
  • 参考

• text—行内元素

• 它类似于传统html中的文本元素，用于包裹各种文本内容。

  • 参考

• navigator—导航

  • url：应用内的跳转链接，值为相对路径或绝对路径，
  • open-type：跳转方式
  • 参考

条件编译

• 参考官方文档条件编译

常用条件—模板中

• H5页面

<!-- #ifdef H5 -->
	<image class="logo" src="/static/logo.png"></image>
<!-- #endif -->

• APP应用

<!-- app上面的 -->
<!-- #ifdef APP-PLUS -->
	<image class="logo" src="/static/pic.jpg"></image>
<!-- #endif -->

• 微信

<!-- 微信上的 -->
<!-- #ifdef MP-WEIXIN -->
	<image class="logo" src="/static/pic.jpg"></image>
<!-- #endif -->

常用条件—样式中

• 微信

<!-- 微信上的 -->
/* #ifdef MP-WEIXIN */
	.box {
		width : 100px;
	}
/* #endif */

常用条件—配置中

• 微信 或者 H5

// #ifdef MP-WEIXIN || H5
	"navigationBarTitleText" : "享受当下"
// #endif

• 单独配置
  • "h5" : {}
  • "app-plus" : {}

配置页面—pages.json

• globalStyle—用于设置应用的状态栏、导航条、标题、窗口背景色等（全局）。

  • 以下中style的都有

• pages—通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象（局部，每一个页面，局部>全局）

  • path—配置页面路径
  • style—配置页面窗口表现,
    • navigationBarBackgroundColor—导航栏背景颜色（同状态栏背景色），如"#000000"
    • navigationBarTextStyle—导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    • navigationBarTitleText—导航栏标题文字内容
    • backgroundColor—页面背景颜色
    • h5—设置编译到 H5 平台的特定样式
      • titleNView—值为：true，H5app的导航栏显示，false，隐藏，不能隐藏微信上面的导航栏
    • app-plus—设置编译到 App 平台的特定样式

• 参考官方文档pages.json配置