小程序入门技术点总结第三篇

今天这篇分享几个小功能点，主要讲如何让实现。

1、页面的收藏和分享功能

2、背景音乐播放

---

一、页面的收藏和分享功能

先看看效果图。

分享 取消 收藏

具备知识点：条件渲染、缓存api、数据绑定、事件绑定、界面交互api

分析功能：由于收藏功能是在关闭小程序，下次打开小程序之后，如果之前有点击收藏，那么该图片还是显式收藏。所以根据该功能就需要使用缓存技术来实现。

实现思路：

1、在页面加载时，判断是否有缓存值。如果没有就设置一个缓存值，然后保存在页面初始数据中。

2、给图片设置点击事件，从初始数据中找到该变量，将该变量的值取反，然后重新将变量设置在初始数据中。

两张图片使用条件渲染，通过判断collected值的变化。 页面加载时进行缓存值读取、或者设置缓存值。在改变页面初始数据 点击事件取反，然后进行缓存值设置。

分析：分享功能，不止一次分享。只要点击事件就触发就行

分享功能：wx:showActionSheet()-----API

分享

二、背景音乐播放

分析功能：

1、背景音乐未播放时，点击图片，改变图片。播放背景音乐

2、背景音乐播放时，点击图片改变图片状态，退出播放状态。

但是问题来了，关闭页面我不希望背景音乐关闭，那就使用全局变量，也就是在App.js中声明变量

app.js 点击改变播放状态 解决关闭页面不播放背景音乐问题