:-: 小程序02
# 目标
![首页tab页](https://box.kancloud.cn/16421e1eda1fcb585b04321e681e0e4f_373x670.png)
![文章详情](https://box.kancloud.cn/d4a47712d327887aa911480e559c767d_373x625.png)
- 跳转到文章详情
- 详情页面
- 收藏原理
- 本地存储实现收藏功能
- 收藏提示
- 各种弹框
- 音乐播放
# 实战1: 跳转携带参数
1. template 添加事件技巧
2. `data-*`扩展属性传参
3. event对象获取扩展属性参数值
4. option获取传递数据
# 实战2: 详情页获取数据
1. 获取文章id
2. 导入数据文件找到对象
3. 传输到页面并展示
`data或 this.setData()`
# 实战3:详情页面样式
# 实战4:详情页面数据展示
# 实战5: 打电话
# 实战6: 定位本地位置
# 实战7: 收藏 [难一上午]
1. 收藏流程
![](https://box.kancloud.cn/b1d94e749466678fe0ce08e292c1c6a8_1001x553.png)
2. 本地存储api
3. 所有文章存储格式:
![](https://box.kancloud.cn/85e2b414349e08774e4ae9b192af9ead_1012x364.png)
4. onload中判断是否第一次打开文章
![](https://box.kancloud.cn/20343561c7f1a53552b594db5aa31d9e_1107x509.png)
5. 点击状态切换
7. 图片路径变化
# 实战8: api提示框
1. 提示框
2. 确认框
3. 底层弹出菜单
# 实战9: 分享
# 实战10: 音乐播放
1. 流程说明
2. 标记变量实现状态切换
4. 点击播放调用api