初识uni-app
作用
- 多端app的开发
- 跨端(APP,各种小程序,H5)开发框架
特点
- 运用了vue语法
- 小程序的组件模式
- 通过uni-app同意各端的api
- 编译出隔断的源代码
uni-app的目录结构
-
components
uni-app组件目录
-
hybrid
存放本地网页的目录
-
platforms
存放各个平台专用的页面目录
-
pages
业务页面文件存放的目录
-
index
首页页面文件
-
list
list页面文件
-
static
存放应用引用静态资源(如:图片,视频等)
-
wxcomponents
存放小程序组件的目录
-
main.js
Vue初始化入口文件
-
App.vue
应用配置,用来配置App全局样式以及监听,应用生命周期
-
manifest.json
配置应用名称,appid,logo,版本等打包信息
-
pages.json
配置页面路由,导航条,选项卡等页面类信息
运行编译环境准备
H5
-
APP
- 下载app模拟器(mumu模拟器,雷电模拟器)
- 配置app模拟器的端口
- HbuilderX中的操作:
运行
=>运行到手机或模拟器
=>Android模拟器端口设置
-
微信
- 下载并安装微信开发者工具
- 配置开发者工具启动端口
- HbuilderX操作:
运行到小程序模拟器
=>运行设置
=>小程序开发者工具路径
index.vue页面分析
-
template
模板
-
script
业务逻辑
-
style
样式
常用组件
条件编译
常用条件—模板中
<!-- #ifdef H5 -->
<image class="logo" src="/static/logo.png"></image>
<!-- #endif -->
<!-- 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 */
常用条件—配置中
// #ifdef MP-WEIXIN || H5
"navigationBarTitleText" : "享受当下"
// #endif
- 单独配置
"h5" : {}
"app-plus" : {}
配置页面—pages.json