基于微信小程序的项目
handleClick(){
wx.switchTab({
url: '/pages/read/read',
})
}
<swiper>
<swiper-item>
....
</swiper-item>
</swiper>
.wxml
<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}"
indicator-active-color="{{active}}">
<swiper-item wx:for="{{banners}}" wx:key="item">
<image src="{{item.imageUrl}}"></image>
</swiper-item>
</swiper>
.js
data: {
indicatorDots:true,
indicatorColor:"rgba(11,44,66,.6)",
//焦点选中颜色
active:"#c20c0c",
},
//3-1 设一一个对象装载缓存
{
"0":"false",
"1":"true",
"2":"false",
"3":"true"
}
//3-2 有缓存设获取缓存,没有缓存则设置缓存
var collection =wx.getStorageSync('collection');
/* 有缓存,获取缓存 */
if(collection){
collected = collection[id];
this.setData({
isCollected:collected
})
}else{
/*没有缓存,就设置缓存 */
var collection = {};
collection[id] = false;
wx.setStorageSync('collection', collection)
/* {"0":"false","1":"false"} */
}
//3-3 设计点击事件
<image bind:tap="handleCollect" ...></image>
handleCollect(){
/* 获取缓存 */
var collection= wx.getStorageSync('collection')
var collected = !collection[this.data.id];
collection[this.data.id] = collected;
/* 更新缓存 */
wx.setStorageSync('collection', collection)
this.setData({
isCollected:collected
})
}
module.exports = {
postList: local_database,
bannerUrl:"https://music.aityp.com/banner"
}
.js
var data=require('../../data/local')
Page({
data: {
item:"",
id:""
},
onLoad: function (options) {
var {id}=options;
var {postList}=data;
this.setData({
item:postList[id],
id,
})
.wxml
直接渲染item下面的数据
<text class="text">{{item.author}}</text>
<text class="publish">发表于</text>
<text class="text">{{item.dateTime}}</text>
1-1弹窗
//wx.showModal
wx.showModal({
title:'收藏',
content:'收藏文章',
success:(res)=>{
if(res.confirm){
if(collected){
wx.setStorageSync('collection', collection)
this.setData({
isCollected:collected
})
}
}else if(res.cancel){
if(collected==false){
wx.setStorageSync('collection', collection)
this.setData({
isCollected:collected
})
}
}
}
})
1-2分享
//wx.showActionSheet
wx.showActionSheet({
itemList: ['分享到微信','分享到朋友圈'],
itemColor: '#000000',
success: (res)=>{
console.log(res.tapIndex)
},
fail: ()=>{},
complete: ()=>{}
});
封装showModal
showModal(collected,collection){
wx.showModal({
title:'收藏',
content:'收藏文章',
success:(res)=>{
if(res.confirm){
if(collected){
wx.setStorageSync('collection', collection)
this.setData({
isCollected:collected
})
}
}else if(res.cancel){
if(collected==false){
wx.setStorageSync('collection', collection)
this.setData({
isCollected:collected
})
}
}
}
})
}
调用showModal
handleCollect(){
var collection=wx.getStorageSync('collection');
var collected=!collection[this.data.id];
collection[this.data.id]=collected;
/* 更新缓存 */
// 直接调用
this.showModal(collected,collection)
},
<image class="play" bind:tap="handleMusic" ></image>
handleMusic(){
if(this.data.isPlay){
//播放状态
audio.pause();
this.setData({
isPlay:false
})
}else{
audio.title=this.data.item.music.title;
audio.src=this.data.item.music.url;
this.setData({
isPlay:true
})
}
}
audio.onPlay(()=>{
this.setData({
isPlay:true
})
})
audio.onPause(()=>{
this.setData({
isPlay:false
})
})
//app.js
//1-4-1 定义g_isPlay记录音乐播放的状态
App({
onLaunch:function(options){
},
globalData:{
g_isPlay:false
}
})
//1-4-2 在handleMusic事件中设置g_isPlay
handleMusic(){
if(this.data.isPlay){
audio.pause();
this.setData({
isPlay:false
})
app.globalData.g_isPlay=false;
}else{
audio.title=this.data.item.music.title;
audio.src=this.data.item.music.url;
this.setData({
isPlay:true
})
app.globalData.g_isPlay=true;
}
}
//1-4-3 在onLoad()生命周期中监听
if(app.globalData.g_isPlay){
this.setData({
isPlay:true
})
//设置一下app.globalData
app.globalData.g_isPlay=false;
}else{
this.setData({
isPlay:false
})
app.globalData.g_isPlay=true;
}
},
//1-5-1 在app.json 定义g_palyId记录正在播放音乐的id
App({
globalData:false,
g_playId:""
})
//1-5-2 在音乐播放函数中
handleMusic(){
if(this.data.isPlay){
audio.pause();
this.setData({
isPlay:false
})
app.globalData.g_isPlay=false;
}else{
audio.title=this.data.item.music.title;
audio.src=this.data.item.music.url;
this.setData({
isPlay:true
})
app.globalData.g_playId=this.data.id;
app.globalData.g_isPlay=true;
}
}
//1-5-3 onLoad()生命周期中
onLoad(){
//如果播放状态和当前id是一样的才是播放按钮状态
if(app.globalData.g_isPlay && app.globalData.g_playId==id){
this.setData({
isPlay:true
})
}else{
this.setData({
isPlay:false
})
}
},
function formatStar(value){
var value=value.slice(0,1);
/* 3.5
3 [1,1,1,0,0] */
var arr=[]
for(var i=1;i<=5;i++){
if(i<=value){
arr.push(1)
}else{
arr.push(0)
}
}
return arr;
}
module.exports={
formatStar:formatStar
}
<view class="head">
<image src="{{imageUrl}}" class="logo"
bind:tap="handleImage" ></image>
</view>
data:{
imageUrl:"/images/avatar/logo.png",
}
handleImage(){
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], //album是相册,camera是相机
success: function(res){
const src=res.tempFilePaths[0]
this.setData({
imageUrl:src
})
}
})
}
使用坐标拾取器
data:{
//当前位置
longitude:114.504383, //经度
latitude:30.552500, //纬度
scale:18
showCompass:true,
//定位小图标
markers:[{
iconPath:"/images/icon/location.png",
id:0,
latitude:30.552500,
longitude:114.504383,
height:20,
width:20
}],
//路线图
polyline: [{
points: [{
longitude:114.504383, //起点
latitude:30.552500
}, {
longitude: 113.324520, //终点
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}],
//周围范围
circles:[
{
longitude:114.504383,
latitude:30.552500,
radius:50,
fillColor:"#c20c0c66"
}
]
}
<map class="map" longitude="{{longitude}}"
latitude="{{latitude}}" scale="{{scale}}"
show-compass="{{showCompass}}"
markers="{{markers}}"
polyline="{{polyline}}"
circles="{{circles}}"
show-location="{{location}}">
</map>
<!-- <scroll-view scroll-x="{{x}}" class="scroll">
<view wx:for="{{movie.casts}}" wx:key="{{item.name}}">
<image src="{{item.avatars.small}}" class="item">
</image>
<text>{{item.name}}</text>
</view>
</scroll-view> -->
data:{
x:true
}
.scroll{
white-space: nowrap;
}
.scroll view{
display: inline-block;
}
.item{
width:200rpx;
height: 270rpx;
}
1.跳转到music-play页面音乐可以播放
onLoad(){
...
myaudio.title = name;
myaudio.src = url;
var poster = wx.getStorageSync('poster')
myaudio.coverImgUrl = poster;
}
2.执行点击事件,音乐可以暂时停止播放
handleClick(){
if(this.data.isPlay){
this.setData({
isPlay:false
})
myaudio.pause()
wx.setStorageSync('playState', false)
}else{
this.setData({
isPlay:true
})
myaudio.play()
wx.setStorageSync('playState', true)
}
}
3.bottom-playIcon和音乐播放暂停一致
onLoad(){
myaudio.onPlay(()=>{
this.setData({
isPlay:true
})
})
myaudio.onPause(()=>{
this.setData({
isPlay:false
})
})
}
4。存在一个问题:跳转回music-detail播放的状态不会改变
解决:使用缓存去存储音乐播放的状态,
1.点击事件中存储
2.onLoad
handleClick(){
if(this.data.isPlay){
this.setData({
isPlay:false
})
myaudio.pause()
wx.setStorageSync('playState', false)
}else{
this.setData({
isPlay:true
})
myaudio.play()
wx.setStorageSync('playState', true)
}
}
onLoad(){
....//播放音乐的逻辑
wx.setStorageSync('playState', true)
myaudio.onPlay(()=>{
this.setData({
isPlay:true
})
wx.setStorageSync('playState', true)
})
myaudio.onPause(()=>{
this.setData({
isPlay:false
})
wx.setStorageSync('playState', false)
})
}
5.在music-detail获取缓存 -->获取音乐播放的状态
onShow(){
onShow() {
var playState = wx.getStorageSync('playState');
var playId = wx.getStorageSync('playId')
if(playState!=null){
this.setData({
isPlay:playState
})
}
this.setData({
playId
})
}
}
<image src="{{isPlay?'/images/icons/play.png':'/images/icons/pause.png'}}" class="play-icon"></image>
6.解决以上问题
方案:将正在播放的id回传,只有播放的id等于列表页的id就是播放的状态
6-1 music-play.js
onLoad(){
...
wx.setStorageSync('playId',id)
}
6-2 music-detail.js 获取id
onShow(){
var playId = wx.getStorageSync('playId')
this.setData({
playId
})
}
6-3 music-detail.wxml
//只有音乐为播放状态同时playId等于正在播放音乐的id,才显示播放的状态
<image src="{{isPlay &&playId == item.id?...}}></image>
<image src="{{item.avatars.small}}" data-url="{{item.avatars.small}}" bind:tap="handleImage" class="item"></image>
handleImage(event){
var url=event.currentTarget.dataset.url;
var casts=this.data.movies.casts;
var urls=casts.map(item=>{
return item.avatars.small;
})
wx.previewImage({
current: url,
urls
});
}