# dnpicture

**Repository Path**: linguanfu/dnpicture

## Basic Information

- **Project Name**: dnpicture
- **Description**: 基于uni-app的微信小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目描述
![](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/fe7b70b369d4c487ebcc06bb50ce28e.png)
![](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/86a3410b1a2ca3dd26d0794742e991c.png)
![](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/7fc8a2bdfca16e0bfb329f6829d4cfe.png)
![](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/7d0f79be57c251dddbe37a1bf8e6a82.png)
![alt](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/6ded3bf278453d5ae1737e9b74465ed.png)
![alt](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/50765c58c1dc4d52861e5760cde02b1.png)
![alt](https://lgf-tofullstack.oss-cn-hangzhou.aliyuncs.com/gitee/20fd73b3675f0180a18b319a5f8ba4f.png)

# 项目创建 
（推荐）脚手架安装： vue create -p dcloudio/uni-preset-vue xxx   Hbuildx: 创建项目

1. 启动项目: npm run serve  或者用Hbuildx

2. 打包项目: npm run build  或者用Hbuildx

# 安装项目所需的包

1. 安装sass依赖  cnpm i sass-loader node-sass -S

2. 引入字体图标 注意路径 要修改iconfont.css 路径

3. 使用uni-ui  cnpm i -S @dcloudio/uni-ui

#开发记录
1. 使用uni-request({url: ''}) 获取数据

2. 修改头部样式为黑 和标题

3. 使用 uni-ui 的分段器  俗称tab栏

4. 封装组件的异步请求  新建文件夹utils     封装 request.js 》 把封装好的js 封装到Vue原型上 方便使用  Vue.prototype.request = request;

5. 格式化时间 moment.js  day.js

6. <scroll-view @scrolltolower="handleToLower" class="recomment" scroll-y v-if="recommends.length>0"> <!-- 滚动标签 -->

7. onReachBottom() // 加载更多  uni-app自带的 触底函数 也可以实现滚动到底加载更多

8. Object.keys(this.album).length 用于判断对象是否有属性 返回数组

9. 使用getApp().globalData 把数据缓存到全局/共享

10. 封装手势滑动组件 *******
(1). 给容器绑定手势事件 @touchstart="handleTouchstart" @touchend="handleTouchend"
(2). 记录用户按下的时间 Date.now()
(3). 记录用户按下屏幕的坐标 event.changedTouches[0].clientX
(4). 记录用户离开的时间 Date.now()
(5). 记录用户离开屏幕的坐标 event.changedTouches[0].clientY
(6). 判断按下与离开的时间间隔 是否合法
(7). 判断滑动距离是否合法  判断用户滑动的方向

11. <button open-type="share"></button> 转发按钮

12. css3 滤镜 filter: blur(20px);