豆瓣阅读页
文章首页静态布局制作
就是简单的页面，和样式的应用以及轮播插件的使用
swiper
滑块视图容器。
属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String “” 当前所在滑块的 item-id ，不能与 current 被同时指定
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
vertical Boolean false 滑动方向是否为纵向
previous-margin String “0px” 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin String “0px” 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items Number 1 同时显示的滑块数量
skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindtransition EventHandle swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish EventHandle 动画结束时会触发 animationfinish 事件，event.detail 同上
从 1.4.0 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：
autoplay 自动播放导致swiper变化；
touch 用户划动引起swiper变化；
其他原因将用空字符串表示。
注意：其中只可放置组件，否则会导致未定义的行为。
swiper-item
仅可放置在组件中，宽高自动设置为100%。
属性名 类型 默认值 说明 最低版本
item-id String “” 该 swiper-item 的标识符 1.9.0
示例代码：
在开发者工具中预览效果
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
文章首页template使用以及动态渲染数据
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：
模板template的使用,
（作者：_房东的猫 来源：CSDN
原文：https://blog.csdn.net/u013128651/article/details/79736485 ）
如下图，我们经常做这样的列表页，课程搜索结果页和课程列表页结构是完全一样的，非常适合使用模板来完成页面搭建。
这样我们就不用写那些重复的代码了,而且修改界面的时候也只需要改动模板一个地方
一、定义模板
1、新建一个template文件夹用来管理项目中所有的模板；
2、新建一个personCourseTmp.wxml文件来定义模板；
3、使用name属性，作为模板的名字。然后在内定义代码片段。
那我们开始实现吧,建模板2个文件
personCourseTmp.wxml
<view class="money-border"> ￥
<text class="money">{{cardMoney}}</text>/课时</view>
<view class="name">
<text class="ename">GillMo</text>
<text class="cname">.小川</text>
</view>
<view class="mark">
<view>{{cardMark}}</view>
</view>
.courses-list {
height: 342rpx;
margin: 40rpx auto;
border-top: 2rpx solid #f0f0f0;
margin-top: 10rpx;
flex-direction: column;
align-items: flex-start;
width: 670rpx;
border-radius: 8px;
}
.money-border {
font-family: PingFangSC-Semibold;
font-size: 28rpx;
color: #fff;
letter-spacing: -0.41px;
height: 56rpx;
margin-top: 20rpx;
margin-left: 20rpx;
}
.money {
font-size: 40rpx;
}
.name {
margin-top: 158rpx;
margin-left: 20rpx;
font-family: PingFangSC-Semibold;
color: #fff;
letter-spacing: -0.41px;
}
.ename {
font-size: 40rpx;
}
.cname {
font-size: 30rpx;
}
.mark {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #fff;
margin-left: 20rpx;
letter-spacing: -0.41px;
margin-bottom: 18rpx;
}
那我们如何在页面上使用呢,引入样式文件和视图文件
比如我们要在Course.wxss上面引入样式文件
@import “…/template/personCourseTmp.wxss”;
只需要在Course.wxss里面加入上面的代码
我们要在Course.wxml上面引入视图文件
传数据时item前面加三个点... 模板里面就不需要写item了,如果要传多个数据到模板
用逗号分开,item 是对象,index是单个数据,要用键值对,template就介绍到这来新建一个目录
wxml页面
/封装内容/
wxss页面需要封装内容的样式全都拿到新建里面来
原目录
wxml页面：（后面是路径）
wxss页面：@import ‘post-item/post-item-template.wxss’;
js页面：var postsData = require(’…/…/data/posts-data.js’)
this.data.postList = postsData.postList;
this.setData({
posts_key: postsData.postList
});
微信小程序 this.setData（） 详解
1、定义
setData（）函数用于将逻辑层数据发送到视图层，同时对应的改变this.data的值。
2、setData（）参数格式
接受一个对象，以键（key）值（value）的方式改变值。
其中，key十分灵活，以数据路径的方式给出 – array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
3、实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 Page({
data: {
text: ‘init data’,
array: [{text: ‘init data’}],
object: {
text: ‘init data’
}
},
changeText: function() {
this.data.text = ‘changed data’ //这是错误的，因为在JavaScript中this代表当前对象，会随着程序的执行而上下改变–解决办法看下面<1,<2
<1 var that=this; //复制一份this到临时变量that中
this.setData({ //此时OK
text: ‘changed data’
})
<2 函数名:res=> {
this.setData({ //此时OK
text: ‘changed data’
})
}
}
界面并不会更新，这就说明我们需要更新this.setData管理的那个数据对象才能更新界面，而界面真正加载的数据也是来自那里。想要知道具体怎么实现的，那就要去看源代码了。
三、结论
总结一下就是：this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。
文章详情页静态页面制作
跟首页差不多也是简单的布局
文章详情页渲染数据
跟首页的差不多，详细的内容往上看
播放背景音乐组件
// 播放背景音乐
onMusicTap:function(event){
var currentPostId = this.data.currentPostId;
var postData = postsData.postList[currentPostId];
var isPlayingMusic = this.data.isPlayingMusic;
if (isPlayingMusic){
wx.stopBackgroundAudio();
this.setData({
isPlayingMusic: false
})
}
else{
wx.playBackgroundAudio({
dataUrl: postData.music.url,
title: postData.music.title,
coverImgUrl: postData.music.coverImg
})
this.setData({
isPlayingMusic:true
})
}
},
1.wx.seekBackgroundAudio(OBJECT)
作用：控制音乐播放进度。
注意： 该事件 会触发 wx.onBackgroundAudioPlay(CALLBACK) 事件 ，也就是相当于在调整进度后，后台会自动的调用wx.playBackgroundAudio(OBJECT)函数。
2.使用 audio组件 制作的播放器，即使点击"显示在微信顶部"，音乐依然会停止,使用 wx.playBackgroundAudio 相关API制作的播放器才不会。
3.wx.playBackgroundAudio(OBJECT)，wx.pauseBackgroundAudio()，wx.seekBackgroundAudio(OBJECT)，wx.stopBackgroundAudio()
注意：上述四个操作都是 异步操作，都可以设置OBJECT参数，都有 success , fail , complete 回调 ，参照 wx.playBackgroundAudio(OBJECT) 的 OBJECT说明，OBJECT说明
4.后台播放音乐暂停后怎么从上次播放的地方继续播放？
使用 seekBackgroundAudio。
官网并没有相关解释，初步思路是使用 playBackgroundAudio 播放音乐后，再调用 seekBackgroundAudio 将进度调整到上次停止的地方，但是由上面的第一条所描述，这样做的结果会导致onBackgroundAudioPlay 会被触发两次，所以我们可以直接调用seekBackgroundAudio调整播放进度即可（前提是之前有播放过歌曲，就是确保歌曲地址已经被设置，不然无效），随后音乐会自动播放.
使用 playBackgroundAudio
经测试调用playBackgroundAudio,并且传入的歌曲地址参数和上次相同时，歌曲会从上次暂停的时间位置继续播放
5.wx.stopBackgroundAudio
注意：经测试,再调用 wx.stopBackgroundAudio 函数之后，紧接着调用 wx.playBackgroundAudio ，在pc端模拟测试时正常，后台会停止播放音乐，然后再播放新的音乐,但是，在手机上却会打断紧接着调用的 wx.playBackgroundAudio 的播放(坑啊T-T)，测试真机为phone5。
6.回调函数的触发时机。
wx.onBackgroundAudioPlay(CALLBACK) 监听音乐播放。
wx.onBackgroundAudioPause(CALLBACK) 监听音乐暂停。
wx.onBackgroundAudioStop(CALLBACK) 监听音乐停止。
上述监听函数会在调用对应的wx.playBackgroundAudio(OBJECT)，wx.pauseBackgroundAudio()，wx.stopBackgroundAudio()等函数时，会被立即触发,对应的操作可能并没有完成，比如调用 playBackgroundAudio播放音乐，只是给后台发送信息，要播放音乐，但是此时音乐并没有开始播放，可能还在加载等等,但是onBackgroundAudioPlay的回调函数会立即调用。
而wx.playBackgroundAudio(OBJECT)，wx.pauseBackgroundAudio(OBJECT)，wx.seekBackgroundAudio(OBJECT)，
wx.stopBackgroundAudio(OBJECT)中OBJECT里面的回调函数会在如下对应条件触发：
在歌曲加载完成之后，可以播放时触发
在歌曲暂停之后，没有声音之后触发
歌曲进度设置完成并且开始播放之后触发
歌曲停止之后触发
wx.onBackgroundAudioPlay(CALLBACK) , wx.onBackgroundAudioPause(CALLBACK) , wx.onBackgroundAudioStop(CALLBACK) 函数可以监听后台操作歌曲时，触发的事件，比如当小程序退出后，音乐暂停，也包括我们使用 wx.pauseBackgroundAudio 等函数时触发的事件。
在wx.onBackgroundAudioPause(OBJECT)里面的 暂停回调函数函数不会被触发，wx.pauseBackgroundAudio(OBJECT)里面的回调函数只是当次主动操作有效。后台自动暂停歌曲时并不会触发该回调函数，wx.playBackgroundAudio(OBJECT)，wx.pauseBackgroundAudio()，wx.seekBackgroundAudio(OBJECT)，wx.stopBackgroundAudio()都是一样的机制。
7.怎么获取歌曲播放时的 回调函数？
微信小程序官方文档，playBackgroundAudio相关额API并没有提供此函数,但是提供了wx.getBackgroundAudioPlayerState函数用于获取歌曲播放时歌曲额进度信息，所以我们可以使用setInterval定时函数模拟这个事件。下面是我模拟的相关事件,
var timer = setInterval(() => {
wx.getBackgroundAudioPlayerState({
success:function(res){
//调用需要更新的
//self._onUpdate(res);
}
});
}, 500);
微信小程序的本地存储，收藏组件制作和本地缓存使用
//收藏开始 初始化代码
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
var postCollected = postsCollected[postId]
this.setData({
collected: postCollected
})
} else {
var postsCollected = {}
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
},
说明
本地数据缓存是小程序存储在当前设备上硬盘上的数据，本地数据缓存有非常多的用途，我们可以利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。我们还可以利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度，在特定的场景下可以提高页面的渲染速度，减少用户的等待时间。
读写本地数据缓存
小程序提供了读写本地数据缓存的接口，通过wx.getStorage/wx.getStorageSync读取本地缓存，通过wx.setStorage/wx.setStorageSync写数据到缓存，其中Sync后缀的接口表示是同步接口，执行完毕之后会立马返回，示例代码和参数说明如下所示。
读取本地缓存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 wx.getStorage({
key: ‘key1’,
success: function(res) {
// 异步接口在success回调才能拿到返回值
var value1 = res.data
},
fail: function() {
console.log(‘读取key1发生错误’)
}
})
try{
// 同步接口立即返回值
var value2 = wx.getStorageSync(‘key2’)
}catch (e) {
console.log(‘读取key2发生错误’)
}
表4-4 wx.getStorage/wx.getStorageSync详细参数
写本地缓存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 // 异步接口在success/fail回调才知道写入成功与否
wx.setStorage({
key:“key”,
data:“value1”
success: function() {
console.log(‘写入value1成功’)
},
fail: function() {
console.log(‘写入value1发生错误’)
}
})
try{
// 同步接口立即写入
wx.setStorageSync(‘key’, ‘value2’)
console.log(‘写入value2成功’)
}catch (e) {
console.log(‘写入value2发生错误’)
}
表4-5 wx.setStorage/wx.setStorageSync详细参数
缓存隔离与限制
小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。
小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。
由于本地缓存是存放在当前设备，用户换设备之后无法从另一个设备读取到当前设备数据，因此用户的关键信息不建议只存在本地缓存，应该把数据放到服务器端进行持久化存储。
利用本地缓存提前渲染界面
前端页面处理
提交时保存数据
页面初始化时执行渲染