uniapp基础
一、uniapp 初体验
1.1 开发方式
- 使用DCloud公司提供的HbuilderX来快速开发
- 使用脚手架来快速搭建和开发
1.2 脚手架搭建项目
-
全局安装
npm install -g @vue/cli
-
创建项目
vue create -p dcloudio/uni-preset-vue my-project
-
启动项目(微信小程序)
npm run dev:mp-weixin
-
微信小程序开发者工具导入项目
二、项目结构介绍
2.1 项目目录介绍
官网文档https://uniapp.dcloud.net.cn/
三、样式和sass
3.1 样式和sass
- 支持小程序的rpx和h5 的vw、vh
- 内置有sass的配置,只需要安装对应的依赖即可
npm install sass-loader node-sass
- vue组件中,在style标签中加入属性
<style lang='scss'>
即可
四、基本语法
4.1 介绍
- 数据的展示
- 数据的循环
- 条件编译
- 计算属性、
4.2 数据展示
- 在js的data中定义数据
- 在template中通过 {{数据}} 来显示
- 在标签的属性上通过:data-index= ’数据‘ 来使用
4.3 数据循环
- 通过v-for来指定要循环的数组
- item 和 index 分别为 循环项 和循环索引
- :key 指定唯一的属性,用来提高循环效率
4.4 条件编译
- 通过 v-if 来决定显示和隐藏 不适合做频繁的切换显示
- 通过 v-show 来决定显示和隐藏 适合做频繁的切换显示
<view v-if="true">显示</view>
<view v-if="isShow">显示或者隐藏</view>
<view v-if="false">隐藏</view>
4.5 计算属性
- 可以理解为是对data中数据提供了一种加工或者过滤的能力
- 通过computed来定义属性
五、事件
5.1 事件的使用
- 注册事件 @click = “handleClick”
- 定义事件监听函数 需要在 “methods” 中定义
- 事件的传参
六、组件
-
组件的简单使用
-
组件传参
-
组件插槽
6.1 组件的简单使用
- 组件的定义
- 在
src
目录下新建 文件夹components
用来存放组件 - 在
components
目录下直接新建组件*.vue
- 在
- 组件的引入
- 在页面中引入组件
import 组件名 from "组件路径"
- 在页面中引入组件
- 组件的注册
- 在页面中实例中,新增属性
components
- 属性
components
是一个对象,把组件放进去注册
- 在页面中实例中,新增属性
- 组件的使用
- 在页面的标签,直接使用引入的组件
<组件></组件>
- 在页面的标签,直接使用引入的组件
6.2 组件传递参数
- 父向子传递参数 通过属性的方式
- 子向父传递参数 通过触发事件的方式
- 使用全局数据传递参数
- 通过挂载vue的原型上
- 通过
globalData
6.2 父向子传递数据
- 父页面向子组件
ul-com
通过属性名list传递了一个数组数据 - 子组件通过
props
进行接收数据
<ul-com :list="[1, 2, 3, 4]"
props: {
list: Array
},
6.2 子向父传递数据
- 子组件通过 触发事件 的方式向父组件传递数据
- 父组件通过 监听数据 的方式来接收数据
methods: {
handleClick() {
this.$emit("textChange",'来自子组件的数据')
}
}
<ul-com :list="[1,2,3,4]" @textChange="hangdleTextChange">
6.2 全局共享数据
- 通过Vue的原型共享数据
- 通过globalData 共享数据
- vuex
- 本地存储
Vue.prototype.baseURL="http://www.baidu.com"
getApp().globalData.text = 'test'
6.3 组件插槽
- 标签其实也是数据中的一种,想实现动态的给子组件传递标签,就可以使用插槽
slot
- 通过
slot
来实现占位符
七、生命周期
7.1 介绍
- uni-app框架的生命周期结合了vue 和微信小程序的生命周期
- 全局的APP中 使用
onLaunch
表示应用启动时 - 页面中 使用
onLoad
或者onShow
分别表示 页面加载完毕时 和 页面显示时 - 组件中使用
mounted
组件挂载完毕时
八、懂你找图项目
1. 项目介绍
1.1 项目介绍
2. 项目搭建
2.1 新建项目
- 创建项目
vue create -p dcloudio/uni-preset-vue dnpicture
- 安装sass依赖
npm install sass-loader node-sass
2.2 新增tabbar页面2
pages.json
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/video/index",
"style": {
"navigationBarTitleText": "精美视频"
}
},
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/horizontal/index",
"style": {
"navigationBarTitleText": "横屏"
}
},
{
"path": "pages/search/index",
"style": {
"navigationBarTitleText": "搜索"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "懂你找图",
"navigationBarBackgroundColor": "#000"
},
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#d4237a",
"backgroundColor": "#fff",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/index",
"text": "首页",
"iconPath": "./static/icon/_home.png",
"selectedIconPath": "./static/icon/home.png"
},
{
"pagePath": "pages/horizontal/index",
"text": "横屏",
"iconPath": "./static/icon/_img.png",
"selectedIconPath": "./static/icon/img.png"
},
{
"pagePath": "pages/video/index",
"text": "精美视频",
"iconPath": "./static/icon/_videocamera.png",
"selectedIconPath": "./static/icon/videocamera.png"
},
{
"pagePath": "pages/search/index",
"text": "搜索",
"iconPath": "./static/icon/_search.png",
"selectedIconPath": "./static/icon/search.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "./static/icon/_my.png",
"selectedIconPath": "./static/icon/my.png"
}
]
}
}
2.2 引入字体图标
- 字体图标使用的是 iconfont
- 在App.vue中全局引入
3. uni-ui
3.1 uni-ui介绍
- https://uniapp.dcloud.net.cn/component/#uniui
- uni-ui是DCloud提供的一个跨端ui库,他是基于vue组件的,flex布局,无dom的跨全端ui框架
- uni-ui不包括基础组件,他是基础组件的补充
- 数字角标、日历、卡片、折叠面板、倒计时、抽屉、悬浮按钮、收藏按钮、底部购物导航、空格、图标、索引列表、列表、加载更多、自定义导航、通告栏、数字输入框、分页器、弹出层、评分、搜索栏、分段器、步骤条、滑动操作、轮播图指示点、标签。
3.2 uni-ui使用
- 安装 uni-ui
- 局部引入组件
- 注册组件
- 使用组件
4. uni-api
4.1 uni-api介绍
- https://uniapp.dcloud.net.cn/api/#
- 原生的微信小程序的api都是不支持promise
- uni-app对大部分的小程序的原生api做了封装,使之支持promise
- 使用方式
- 原生微信小程序wx.request
- uni-api的方式 uni.request
- 其他api的使用方式也类似
首页模块
1. 功能分析
1.1 功能分析
- 修改导航栏的外观
- 使用 分段器组件 搭建子页面
- 封装自己异步请求
2. 搭建子页面
2.1 搭建子页面
- 首页模块分为4个部分,分别是推荐、分类、最新、专属
- 新建自定义组件来代替 上述的4个页面
- home-recommend
- home-category
- home-new
- home-album
2.2 分段器介绍
分段器指的是 uni-ui 中的一个组件,其实就是我们俗称的 标签页 ,tab栏
https://ext.dcloud.net.cn/plugin?id=54
3. 封装自己的异步请求
3.1 为什么要封装
- 原生的请求不支持promise
- uni-api 的请求不能方便的添加 请求中 效果
- uni-api 的请求返回值是个数组,不方便
3.2 封装的思路
- 基于原生的promise来封装
- 挂载到Vue的原型中
- 通过
this.request
的方式来使用
4. 首页-推荐
4.1 功能介绍
-
接口文档
https://www.showdoc.com.cn/414855720281749?page_id=3678621017219602
-
数据动态渲染
-
moment.js 的使用
-
“热门” 列表的基于scroll-view 的分页加载
4.2 分页功能分析
- 使用 scroll-view 标签充当分页的容器
- 绑定滚动条触底事件 scrolltolower
- 实现分页逻辑
5. 首页-专辑
5.1 专辑列表
- 使用 setNavigationBarTitle 修改页面标题
- 发送请求获取数据
- 使用 swiper 轮播图组件
- 使用 scroll-view 组件实现分页
- 点击跳转到 专辑详情页面
5.2 专辑详情
- 发送请求获取数据
- 使用onReachBottom 事件触发 上拉加载下
6. 首页-图片详情
- 封装超链接组件
- 发送请求获取数据
- 使用moment.js 处理特殊时间格式
- 封装 手势滑动组件
- 下载图片
6.1 封装超链接组件
- 缓存图片详情页面需要滑动的图片数组和图片索引
- 跳转到图片详情页面
6.2 moment.js处理时间格式
7. 封装手势滑动组件
7.1 手势封装的思路
- 手指在容器上产生了移动
- 手指按下屏幕事件 touchstart
- 手指离开屏幕事件 touchend
- 手指在屏幕上的坐标 event.changedTouches[0].clientX 和 clientY
- 手指在容器上滑动的时间不能太长
- 记录按下屏幕的时间
- 记录离开屏幕的时间
- 根据坐标判断滑动方向
- 手指离开屏幕的时候根据坐标判断滑动的方向
7.2 实现滑动手势组件 swiper-Action
- 实现插槽slot功能
- 向父组件传递 滑动的方向
7.3 下载图片到本地
- downloadFile 下载远程文件到小程序的内存中
- saveImageToPhotosAlbum 将图片从内存中下载到本地
8. 图片分类
8.1 首页分类
8.1.1 功能分析
- 发送请求获取数据
- 渲染页面
8.1.2 功能分析
- 分段器的使用
- 发送请求获取数据
- 渲染页面
- 分页加载
- 跳转到图片详情页面
9. 精美视频
- 精美视频的首页
- 视频播放
9.1 功能分析
-
分段器的使用
-
发送请求获取数据
- 每个子页面用到的接口地址或者接口参数都不一样
- 将每一个页面的接口地址和接口参数都封装到标题数组中
- 点击标题的时候,也传递对应的接口路径和参数给内容组件
- 需要在组件中使用watch 来监控接收的参数发生变化
- 内容组件接收参数,发送请求渲染页面
-
渲染页面
-
分页加载
9.2 功能分析
- 页面渲染
- 播放视频
- 开关声音
- 转发
- 下载视频