来找图小程序项目的知识点

uniapp基础

一、uniapp 初体验

1.1 开发方式

• 使用DCloud公司提供的HbuilderX来快速开发
• 使用脚手架来快速搭建和开发

1.2 脚手架搭建项目

1. 全局安装

   npm install -g @vue/cli
   

2. 创建项目

   vue create -p dcloudio/uni-preset-vue my-project
   

3. 启动项目(微信小程序)

   npm run dev:mp-weixin
   

4. 微信小程序开发者工具导入项目

二、项目结构介绍

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 功能分析

• 页面渲染
• 播放视频
• 开关声音
• 转发
• 下载视频