微信小程序项目的总结集合（美图网）

},

id: -1,

album: {},

photos: [

{

id:0,

img:“http://img5.adesk.com/5efdbdb9e7bce7372377050a?imageView2/3/h/240”,

rank:7550,

time:‘5天前’,

atime:1511308982,

user:{

name:‘学无无无止境鸭!’,

avatar:“http://img5.adesk.com/5c10af74e7bce704a6350c41?imageView2/3/h/240”,

}

},

],

}

},

onLoad(options) {

// console.log(options)

this.id = options.id;

// this.id=“5fc9d441e7bce72c43389db0”

this.getList();

},

methods: {

getList() {

this.request({

url: http://service.picasso.adesk.com/v1/wallpaper/album/${this.id}/wallpaper,

data: this.params

}).then(result => {

// console.log(result)

this.album = result.res.album;

})

}

},

//区别于scroll-view

//使用下方这个时整个页面的分页

onReachBottom() {

uni.showToast({

title: “没有数据了哦!”

})

}

}

template部分：

{{album.name}}

关注专辑

{{album.user.name}}

{{album.desc}}

总结：

得到由页面A传递过来的参数，

1.这里使用options.id获取

2.获取后，赋值给全局data下的id

3.然后便可以使用这个指定的id，调用request发送异步请求

4.发送异步请求，获取得到指定数据，然后进行渲染

（根据你点击A页面不同项，那么传过去B页面的id也不一样，因此获取到的数据也是特定的，即实现了两者之间的关联）

注意项

es6语法中，``一般都会于 结 合 使 用 ， {}结合使用， 结合使用，{}包裹一变量

5.解决后台返回的数据时隐藏的json格式时

使用text标签

6.封装组件，多处使用

6.1需求分析：

6.1.1 实现功能

假设父组件为F（下图中的推荐页面中的图片，专辑详情页面），go-detail为组件页面A，imgdetail为组件页面B

go-detail组件主要实现以下功能

1.保存父组件F传过来的数据(list\index)

2.数据接收到将其保存到全局数据中(getApp().globalData)

3.实现跳转到页面B，页面B便可以获取到全局数据，然后整理数据之后，进行页面展示）

4.页面B时最终的展示效果，go-detail只是作为一个中间体，实现特定的功能）

上面两张图片都会跳转到图片详情页面，只不过需要一个实现一样功能的go-detail组件为中间体，在跳转至图片详情页面imgdetail

6.2封装组件的原因

• 实现一样的功能

• 多组件用到（月份和热门部分和专辑详情页面都有用到）

• 提高代码的复用性

6.3公共组件的设计

6.3.1 公共组件go-detail代码部分（A）

页面实现template部分

<navigator @click=“handleClick”>

说明：这里的solt插槽，用户父组件中放置图片，是的点击图片时实现跳转

js逻辑部分（这里主要是现实点击事件handleClick）

6.3.2 父组件的使用（F）

1.在专辑详情中使用

2. 在推荐页中的热门图片的使用

热门

6.3 图片详情页面（B）

主要逻辑部分:

onLoad() {

const {

list,

index

} = getApp().globalData;

console.log(“由父组件传递过来的list\n”,list)

this.imgDetail = list[index];

console.log(“经过处理后的list–imgDetail\n”,this.imgDetail)

//moment函數接收的是毫秒,而傳過去的值为秒,因此需要*1000

// 将时间戳atime:1511308982----转换成-----xx年前的格式(配合moment.locale(“zh-cn”)使用)

this.imgDetail.cntime = moment(this.imgDetail.atime * 1000).fromNow();

//改变评论数据中的时间格式,并将其添加为cntime属性

this.hot.forEach(v => v.cntime = moment(v.user_atime * 1000).fromNow())

},

说明：

主要显示部分

图片详情页面（B）的使用步骤：

• 先获取go-detail存储的全局数据

• 对数据进行处理（因为父组件Fchuanguol的list时一个多个对象的数组，

• 根据索引我便可以获取到特定的数据

• 然后在页面显示的时传过来指定索引index数据对象数据

6.4总体结构

7.使用common.js处理时间格式

举例：

• 比如后台返回的数据时时间戳的形式，例如：atime:1511308982

• 那么我希望将其转换为我需要的如上图的格式（或者其他格式，可以查看相关的文档进行实现）

• 将时间戳----转换成-----xx年前的格式(配合moment.locale(“zh-cn”)使用，因为原始返回的时英文格式)

import moment from ‘moment’;

//设置语言为中文

moment.locale(“zh-cn”)

export default {

onLoad() {

const {

list,

index

} = getApp().globalData;

this.imgDetail.cntime = moment(this.imgDetail.atime * 1000).fromNow();

//改变评论数据中的时间格式,并将其添加为cntime属性

this.hot.forEach(v => v.cntime = moment(v.user_atime * 1000).fromNow())

},

结果：

8.在页面中，对于结构相同的模块，为其设置相同的类名class，使得样式的复用

8.1 举例

9.改变数组元素特定属性值，并以新的属性返回

需求：

我想循环改变hot数组中每个对象元素的时间格式，并且将改变的值以新属性ctime返回

10. 将图片和视频下载到本地

10.1 uni.downloadFile(OBJECT)相关说明

• 实质发送异步请求

• 返回的时一个Promise对象

10.2 下载图片

• 1.使用uni.downloadFile()，将远程文件下载到本地内存中(小程序会返回一个临时路径，这里使用const {tempFilePath} = result1[1];结构出临时路径，然后这个路径用于2.中的板寸到本地)

• 2.然后使用uni.saveImageToPhotosAlbum({})，将小程序内存中的临时文件下载到本地上，

• 实现逻辑代码

• 

说明：我这里使用的时ES7的async await语法，也可以使用官方提供的方式，

上面的代码并没有对用户点击取消下载时做处理，下面进行如下优化：

• 页面

<view class=“down_button” @click=“handleDownload”>

下载图片

• 逻辑

//点击下载图片按钮，触发事件

async handleDownload() {

// uni.downloadFile({url:this.imgDetail.img}).then(result=>{})=====等价于async awiat

// 1.将远程文件下载到本地内存中(小程序会返回一个临时路径)

//触发下载图片的事件,然后弹出

uni.showLoading({

title: “下载中”

})

const result1 = await uni.downloadFile({

url: this.imgDetail.img

})

const {

tempFilePath

} = result1[1];

// console.log(tempFilePath)

//2.将小程序内存中的临时文件下载到本地上

uni.saveImageToPhotosAlbum({

filePath: tempFilePath,

success:()=>{

// console.log(‘下载成功’)

uni.hideLoading(

uni.showToast({

title: “下载成功”,

})

)

},

fail: () => {

// console.log(‘下载失败’)

uni.hideLoading(

uni.showToast({

title: “取消下载”,

})

)

}

})

}

• 结果：

• 当用户点击保存时，文件保存后关闭加载中的提示，并弹出下载成功的提示；

• 当用户点击取消时，关闭加载中的提示，同时弹出取消下载的提示

10.3 下载视频（同理与下载图片）

• 页面

<view class=“onload_button” @click=“onLoadToLocal”>

下载高清

• 逻辑

async onLoadToLocal(){

//分两步

//1.保存到小程序内置内存

//2.保存到本地

// uni.downloadFile({

// url:this.videoObj.video

// }).then(result=>{

// // console.log(result)

uni.showLoading({

title: “视频下载中”

})

const result1=await uni.downloadFile({

url:this.videoObj.video

})

const {tempFilePath}=result1[1]

console.log(tempFilePath);

// })

uni.saveVideoToPhotosAlbum({

filePath: tempFilePath,

success:()=>{

// console.log(‘下载成功’)

uni.hideLoading(

uni.showToast({

title: “下载视频成功”,

})

)

},

fail: () => {

// console.log(‘下载失败’)

uni.hideLoading(

uni.showToast({

title: “取消下载视频”,

})

)

}

})

// const result2=await uni.saveVideoToPhotosAlbum({

// filePath:tempFilePath

// })

// uni.hideLoading(

// await uni.showToast({

// title: “视频下载成功”,

// })

// )

• 结果：

11.使用scroll-view组件踩坑记（样式不生效问题）

11.1 需求

• 向使用scroll-view组件实现固定区域滑动效果

• 同时叶子啊scroll-view中使用了flex布局

返回页面发现scroll-view滑动生效了，但是我的flex布局没有生效！！！

11.2 解决

• 在scroll-view标签中添加 ----enable-flex 变可以生效！

• 页面（加上enable-flex）

<scroll-view scroll-y enable-flex @scrolltolower=“handelToLower” class=“category_tab_content”>

• 样式

.category_tab_content {

display: flex;

flex-wrap: wrap;

height: calc(100vh - 43px);

.category_imgs_item{

width: 33.33%;

border: 5rpx solid #FFFFFF;

image{

width: 100%;

}

}

}

12.解决类似以下来回切换时，数据不更新的功能bug

由于下面的导航切换我是用了分段器（具体使用参考文档）

12.1 引入分段器

12.2 实现

• 逻辑实现

在data的items中添加了order属性，因此我们在点击切换的时候，可以很方便取到这个order值，将其复制给params，重新发送请求获取不同类的数据（‘hot’ 、 ‘new’）

data() {

return {

items: [{

//为了方便改变params中的参数order,使其点击时根据索引取出这个order

title: ‘最新’,

order:‘new’

},

{

title: ‘热门’,

order:‘hot’

},

],

}

• 在onClickItem事件中，当点击不同的分段器时

主要思路：

1）改变order值----this.params.order=this.items[e.currentIndex].order; （这个order值时发送请求时，获取hot还是new数据的主要依据）

2）清空之前数组记录—this.vertical=[]

3）跳过数目为0----this.params.skip=0;

4）重新发送请求-----this.getList()

onClickItem(e) {

//console.log(e)

//点击切换的时候,改变params参数中的order,并重新发送请求,

//因为最开始默认的order时"new"

if (this.current !== e.currentIndex) {

this.current = e.currentIndex;

}else{

//表示点击了多次相同的hot\new那直接返回即可

return

}

this.params.order=this.items[e.currentIndex].order;

this.params.skip=0;

this.vertical=[]

this.getList()

},
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。