uni-app从入门到精通在线教程-目录（黄菊华-跨平台开发系列教程）

前言 2
第一部分基础知识 11
第1章 uni-app入门 11
1.1 uni-app概要 11
1.2 快速上手 15
1.2.1 HbuilderX开发工具 15
1.2.2 通过 HBuilderX 可视化界面 16
1.2.3 通过 HBuilderX发布为小程序 26
1.2.4 通过vue-cli命令行 28
1.3 开发规范 30
1.3.1 Vue 单文件组件 (SFC) 规范 31
1.4 目录结构 33
1.5 资源路径说明 34
1.5.1 模板内引入静态资源 34
1.5.2 js文件引入 35
1.5.3 css引入静态资源 35
1.6 使用Vue.js注意事项 36
第2章 uni-app框架简介 54
2.1 生命周期 54
2.1.1 应用生命周期 54
2.1.2 页面生命周期 54
2.2 路由 56
2.2.1 路由跳转 56
2.2.2 页面栈 56
2.3 运行环境判断 57
2.3.1 开发环境和生产环境 57
2.3.2 判断平台 58
2.4 页面样式与布局 59
2.4.1 尺寸单位 59
2.4.2 样式导入 60
2.4.3 内联样式 61
2.4.4 选择器 61
2.4.5 全局样式与局部样式 62
2.4.6 CSS变量 62
2.4.7 固定值 64
2.4.8 Flex布局 64
2.4.9 背景图片 64
2.4.10 字体图标 65
2.5 和 66
2.6 ES6 支持 67
2.7 NPM支持 69
2.8 TypeScript 支持 70
2.9 小程序组件支持 72
2.10 WXS 76
第3章常用配置 82
3.1 配置概要 82
3.2 pages.json 83
3.2.1 配置项列表 83
3.2.2 globalStyle 85
3.2.3 pages 86
3.2.4 easycom 102
3.2.5 tabBar 104
3.2.6 condition 107
3.2.7 subPackages 108
3.2.8 preloadRule 110
3.3 manifest.json 111
3.3.1 配置项列表 111
3.3.2 uniStatistics 112
3.3.3 app-plus 112
3.3.4 h5 114
3.3.5 mp-weixin 118
3.3.6 mp-alipay 119
3.3.7 mp-baidu 119
3.3.8 mp-toutiao 120
3.3.9 mp-qq 120
3.3.10 关于分包优化的说明 121
3.3.11 完整 manifest.json 121
3.4 package.json 130
3.5 vue-config.js 133
3.6 uni.scss 135
3.7 App.vue 137
3.8 main.js 139
第4章 JSON数据 141
4.1 JSON 简介 141
4.2 JSON 语法 143
4.2.1 JSON 语法规则 144
4.2.2 JSON 使用 JavaScript 语法 145
4.3 JSON 对象 146
4.3.1 对象语法 146
4.3.2 访问对象值方式1 147
4.3.3 访问对象值方式2 148
4.3.4嵌套 JSON 对象 148
4.3.5 修改值 150
4.3.6 删除对象属性 151
4.4 JSON 数组 152
4.4.1 JSON 对象中的数组 153
4.4.2 数组的循环访问 154
4.4.3 嵌套 JSON 对象中的数组 156
4.4.4修改数组值 158
4.4.5 删除数组元素 159
4.5 JSON.parse() 159
4.5.1 浏览器支持 159
4.5.2 语法 160
4.5.3 JSON 解析实例 160
4.5.4 从服务端接收 JSON 数据 161
4.5.5 从服务端接收数组的 JSON 数据 162
4.6 JSON.stringify()转字符串 163
4.6.1 JSON.stringify()语法 163
4.6.2 JavaScript 对象转换 164
4.6.3 JavaScript 数组转换 164
4.7 eval函数 165
第5章基础语法和接口使用 168
5.1常用语法 168
5.1.1 Vue页面介绍 168
5.1.2 变量的定义和使用 169
5.1.3 事件的定义和使用 171
5.1.4 使用事件改变变量的值 172
5.1.5 组件中变量的使用 174
5.1.6 关键字true和false 175
5.1.7 三元运算 177
5.1.8 JSON对象的定义和使用 178
5.1.9 数组的定义和for语句的使用 179
5.1.10 对象数组的定义和使用 181
5.1.11 If语句 182
5.2 接口的使用 184
5.2.1 如何调用接口 184
5.2.2 接口参数的使用 185
5.3 表单的使用 187
5.3.1 表单的提交和重置 188
5.3.2 表单内数据的获取 190
5.4 参数的使用 193
5.4.1 url参数的传递 193
5.4.2 通过data- 设置和获取参数 195
第二部分进阶知识 197
第6章常用组件 197
6.1 导航 198
6.1.1 navigator页面链接 198
6.2 视图容器 199
6.2.1 view视图容器 199
6.2.2 swiper滑块视图容器 199
6.3 基础内容 201
6.3.1 icon图标 201
6.3.2 text文本 203
6.3.3 rich-text富文本 204
6.3.4 progress进度条 207
6.4 表单组件 209
6.4.1 button按钮 209
6.4.2 checkbox-group多项选择器 212
6.4.3 editor 富文本编辑器 213
6.4.4 form 表单 215
6.4.5 input 输入框 216
6.4.6 label 标签 219
6.4.7 picker 普通滚动选择器 219
6.4.8 Picker 多列选择器 220
6.4.9 picker 时间滚动选择器 221
6.4.10 picker 日期滚动选择器 221
6.4.11 radio-group 单项选择器 223
6.4.12 slider 滑动选择器 225
6.4.13 switch 开关选择器 226
6.4.14 textarea 多行输入框 226
6.5 媒体组件 229
6.5.1 audio 音频 229
6.5.2 image 图片 230
6.5.3 video 视频 231
6.6 web-view 浏览器组件 235
第7章 Flex布局 237
7.1布局入门 237
7.1.1 Flex Box概要和入门 237
7.1.2表单的简单布局 238
7.2容器的属性 241
7.2.1 Flex基本概念 241
7.2.2 flex-direction项目的排列方向 242
7.2.3 flex-wrap如何换行 242
7.2.4 flex-flow 243
7.2.5 justify-content内容对齐(左中右) 243
7.2.6 align-items(上中下对齐) 244
7.2.7 align-content设置各个行的对齐 245
7.3 Flex项目的属性 247
7.3.1 order子元素的排序 247
7.3.2 flex-grow项目的放大比例 247
7.3.3 flex-shrink项目的缩小比例 248
7.3.4 flex-basis项目占据的主轴空间 248
7.3.5 flex综合属性设置 249
7.3.6 align-self（子元素上中下的设置） 249
7.3.7 margin（对齐和居中） 250
7.4 九宫格布局 250
7.4.1 一个项目的布局 251
7.4.2 双项目的布局 254
7.4.3 三项目的布局 256
7.4.4 四项目的布局 257
7.4.5 六项目的布局 258
7.4.6 九宫格布局 261
7.4.7 一个项目的布局 264
7.4.8 八个项目的布局 267
7.4.9 七个项目的布局 271
7.4.10 六个项目的布局 276
7.4.11 五个项目的布局 280
7.4.12 四个项目的布局 284
7.4.13 三个项目的布局 288
7.4.14两个项目的布局 292
7.5网页布局实战 295
7.5.1 基本网格布局 295
7.5.2 百分比布局 297
7.5.3 固定的底栏 299
7.5.4 圣杯布局 302
7.5.5 输入框的布局 305
7.5.6 悬挂式布局 307
7.5.7 流式布局 311
第8章常用API 314
8.1 日志打印 314
8.2 定时器 315
8.2.1 setTimeout(callback, delay, rest) 315
8.2.2 clearTimeout(timeoutID) 315
8.2.3 setInterval(callback, delay, rest) 316
8.2.4 clearInterval(intervalID) 316
8.3 路由与页面跳转 316
8.3.1 uni.navigateTo(OBJECT) 316
8.3.2 uni.redirectTo(OBJECT) 317
8.3.3 uni.reLaunch(OBJECT) 318
8.3.4 uni.switchTab(OBJECT) 318
8.3.5 uni.navigateBack(OBJECT) 318
8.4 交互反馈 319
8.4.1 uni.showToast(OBJECT) 319
8.4.2 uni.hideToast() 320
8.4.3 uni.showLoading(OBJECT) 321
8.4.4 uni.hideLoading() 321
8.4.5 uni.showModal(OBJECT) 322
8.4.6 uni.showActionSheet(OBJECT) 323
8.5 网络请求uni.request(OBJECT) 324
8.5.1 基础语法 324
uni.request 向远程传递参数 329
uni.request 请求远程Json对象数据 329
uni.request 请求远程(对象)数组数据 330
8.6数据缓存 331
8.6.1 uni.setStorage(OBJECT) 331
8.6.2 uni.getStorage(OBJECT) 331
8.6.3 uni.getStorageInfo(OBJECT) 332
8.6.4 uni.removeStorage(OBJECT) 333
8.6.5 uni.clearStorage() 333
8.7系统信息 333
8.7.1 uni.getSystemInfo(OBJECT) 333
8.8 图片 336
8.8.1 uni.chooseImage(OBJECT) 336
8.9 上传 337
8.9.1 uni.uploadFile(OBJECT) 337
第三部分企业站实战 341
第9章界面开发 341
9.1 企业站首页 341
9.1.1 广告图 342
9.1.2 公司简介 342
9.1.3 最新产品 344
9.1.4 最新案例 346
9.1.5 最新资讯 349
9.2 产品列表 350
9.2.1 产品分类框架 351
9.2.2 左侧产品分类 355
9.2.3 右侧产品 356
9.3 案例列表 358
9.4 资讯列表 364
9.5 关于我们 367
9.5.1 关于我们 367
9.5.2 留言反馈 371
9.6 通用详情页面 375
第10章程序开发 378
10.1 全局变量定义 378
10.2 企业站首页 379
10.2.1 广告轮播 379
10.2.2 公司简介 381
10.2.3 最新产品 383
10.2.4 最新案例 386
10.2.5 最新资讯 390
10.3 产品列表和详情 392
10.3.1 产品列表-左侧分类 392
10.3.2 产品列表-右侧产品列表 395
10.3.3 产品列表-触底上拉加载更多 397
10.3.4 产品列表-左侧分类和右侧产品数据联动 400
10.3.5 产品详情 401
10.4 案例列表和案例详情 403
10.4.1 案例列表-左侧分类 404
10.4.2 案例列表-右侧案例列表 406
10.4.3 案例列表-触底上拉加载更多 409
10.4.4 案例列表-左侧分类和右侧案例数据联动 412
10.4.5 案例详情 413
10.5 资讯列表和资讯详情 416
10.5.1资讯列表-左侧分类 416
10.5.2资讯列表-右侧资讯列表 418
10.5.3资讯列表-触底上拉加载更多 421
10.3.4资讯列表-左侧分类和右侧资讯数据联动 424
10.5.5资讯详情 425
10.6 关于我们 427
10.5.4 关于我们首页 427
10.5.5 关于我们详情 430
10.5.6 留言反馈 432
10.7 自定义组件的开发 436
10.7.1 创建自定义组件 436
10.7.2 使用组件 437
10.7.3 自定义组件实战 438
第11章打包APP和运行小程序 442
11.1 运行微信小程序 442
11.1.1 Hbuilder X中小程序运行配置 442
11.1.2 微信开发者工具配置 443
11.1.3 发布微信小程序 444
11.2 安卓APP打包 446
11.2.1 配置manifest.json 446
11.2.2 原生App-云打包 448
11.2.3 获取apk文件和部署 451
11.2.4 安装apk和实际效果 452
11.3 运行到苹果手机 457
11.3.1 手机连接到电脑 457
11.3.2 运行到苹果手机 458
11.4 小节 464

【uniapp参考资料】
（1）uni-app跨平台开发入门到实战 https://ke.qq.com/course/package/26512?tuin=2b10d56
（2）uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059?tuin=2b10d56
（3）基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977?tuin=2b10d56

uni-app从入门到精通在线教程-目录（黄菊华-跨平台开发系列教程）相关推荐

3.3.4 h5 -manifest.json-常用配置【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】
自定义模板需要使用自定义模板的场景,通常有以下几种情况:  调整页面 head 中的 meta 配置  补充 SEO 相关的一些配置(仅首页)  加入百度统计等三方js 使用自定义模板时,1. ...
2.10 WXS ---uni-app框架简介【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】
WXS是微信小程序的一套脚本语言,规范详见. 它的特点是运行在渲染层.当需要避免逻辑层和渲染层交互通信折损时,可采用wxs. uni-app可以将wxs代码编译到微信小程序.QQ小程序.APP.H5上 ...
5.3.2 表单内数据的获取 -表单的使用- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
5.3.2 表单内数据的获取在表单的组件,我们需要定义name的值,然后我们在提交表单的时候,就可以通过name获取对应的值,获取内容的格式如下: e.detail.value.组件的name 提示 ...
5.1.9 数组的定义和for语句的使用- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
5.1.9 数组的定义和for语句的使用我们在uni-app中,实际制作作品中,要显示资讯列表.商品列表等都需要用到数组的循环显示,我们使用v-for语句来实现. 我们用 v-for 指令根据一组数 ...
9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
9.5.2 留言反馈本小节讲解留言反馈页面的制作,效果如图9-14. 布局代码如下: < template> <view class='group'><view cla ...
微信公众号开发系列教程一（调试环境部署）
http://www.cnblogs.com/zskbll/p/4074855.html 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试 ...
SploitFun Linux x86 Exploit 开发系列教程
SploitFun Linux x86 Exploit 开发系列教程原文:Linux (x86) Exploit Development Series 在线阅读 PDF格式 EPUB格式 MOBI格 ...
微信程序开发系列教程（二）微信订阅号+人工智能问答服务
我的前一篇文章**微信程序开发系列教程(一)**开发环境搭建已经介绍了微信服务器的开发环境搭建.本文作为开发系列的第二篇文章,介绍如何给您的微信订阅号开发一个最简单的问答服务,非常好玩. 这个系列的 ...
unity2d游戏开发系列教程：四、一个2D游戏所需要的主要功能（游戏框架）
目录 unity2d游戏开发系列教程:一.环境安装 unity2d游戏开发系列教程:二.新建工程并熟悉Unity编辑器常用功能 unity2d游戏开发系列教程:三.场景布置,增加怪物和机关原文下载 ...

uni-app从入门到精通在线教程-目录（黄菊华-跨平台开发系列教程）

uni-app从入门到精通在线教程-目录（黄菊华-跨平台开发系列教程）相关推荐

最新文章

热门文章