重构篇
Q1：小程序动画效果较多
问题：小动画动画效果较多，手动调动画较繁琐
解决：使用在线动画制作工具，动画效果较好且快速
网站：动画成品微调、动画在线制作1、动画在线制作2Q2：小程序背景图
问题：小程序不支持background本地图。
解决：将图片上传七牛云服务器中的存储空间Q3：小程序上下拉动出现白屏
问题：当用力往下拉，页面顶部会出现一段空白的地方，用户体验不好
解决：在当前页面的json文件里，加上属性"disableScroll":true，再配合scroll-view一起使用，可解决多内容超出滚动，适配小屏幕手机Q4：小程序open-data组件
问题：open-data组件添加样式无效
解决：使用overflow: hiddenQ5：小程序scroll-view横向划动
问题：scroll-view横向划动无效
解决：
1.要给scroll-view设置宽度，并设置white-space:nowrap；
2.将容器内的子元素每一项设置宽度和display:inline-blockQ6：服务器图片缓存
问题：在服务器更新图片时，会有缓存，暂时访问不到最新的图片
解决：在请求的连接后加上参数-
Q7：小程序滑动滚动条
问题：小程序如何隐藏滑动滚动条?
解决：在wxss添加样式::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }
JS篇
1、tab切换效果
tab.gif
wxml
<view class='tab'>
<view data-id='1' class="tab-item {{currentTab=='1' || defaultTab=='1'? 'on' : ''}}" bindtap='tabSwich'>1</view>
<view data-id='2' class="tab-item {{currentTab=='2'? 'on' : ''}}" bindtap='tabSwich'>2</view>
<view data-id='3' class="tab-item {{currentTab=='3'? 'on' : ''}}" bindtap='tabSwich'>3</view>
</view>
<view class='cnt'>
<view class='cnt-item' wx:if="{{currentTab==='1'||defaultTab===1}}">1</view>
<view class='cnt-item' wx:if="{{currentTab==='2'}}">2</view>
<view class='cnt-item' wx:if="{{currentTab==='3'}}">3</view>
</view>
js
data: {
// tab 切换
currentTab: 0,
defaultTab: 1
},
tabSwich: function (e) {
// 点中哪个tab
let dataId = e.target.dataset.id;
let defaultTab = this.data.defaultTab;
// 点击后移除【激活】样式
if (defaultTab === 1) {
this.setData({
defaultTab: 0
});
}
this.setData({
currentTab: dataId
});
},
wxss
.tab {
width: 100%;
height: 50rpx;
}
.tab-item {
float: left;
width: 33.333%;
height: 100%;
line-height: 50rpx;
text-align: center;
}
.cnt {
width: 100%;
}
.cnt-item {
display: flex;
justify-content: center;
align-items: center;
height: 500rpx;
}
.on {
color: red;
}
保存图片到相册
wxml
<scroll-view class="container container--save" scroll-y="true">
<canvas canvas-id='save' style="width:100%;height:947rpx"></canvas>
<button plain='false' hover-class='none' class='btn-save' bindtap='saveImageToPhotosAlbum'>保存截图</button>
</scroll-view>
js
data: {
windowWidth:375,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSystemInfo();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.savePhoto();
},
getSystemInfo:function(){
let self=this;
wx.getSystemInfo({
success: function (res) {
self.setData({
windowWidth: res.windowWidth
})
}
})
},
savePhoto: function () {
let ctx = wx.createCanvasContext('save');
ctx.drawImage("图片地址", this.data.windowWidth / 2-36, 35, 72, 72);
ctx.setFontSize(18);
ctx.setTextAlign('center');
ctx.fillText('字体居中', this.data.windowWidth/2, 132);
ctx.draw(false, this.getTempFilePath);
},
//获取临时路径
getTempFilePath: function () {
wx.canvasToTempFilePath({
canvasId: 'save',
success: (res) => {
this.setData({
shareTempFilePath: res.tempFilePath
})
}
})
},
//保存至相册
saveImageToPhotosAlbum: function () {
if (!this.data.shareTempFilePath) {
wx.showModal({
title: '提示',
content: '图片绘制中，请稍后重试',
showCancel: false
})
}
wx.saveImageToPhotosAlbum({
filePath: this.data.shareTempFilePath,
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
}
})
},
小程序条形倒计时
效果图如下：
process.gif
wxml
<view class='headpiece-time flex-row'>
<text class='headpiece-txt'>倒计时：</text>
<view class='headpiece-process'>
<view class='headpiece-process-inner' style="width:{{width}}%"></view>
</view>
<text class='headpiece-num'>{{t}}</text>
</view>
wxss
.headpiece-num {
position: absolute;
top: -3rpx;
right: -35rpx;
width: 62rpx;
height: 100%;
text-align: center;
}
.headpiece-time {
position: relative;
width: 305rpx;
}
.headpiece-process {
position: relative;
width: 138rpx;
height: 14rpx;
margin-right: 14rpx;
border: 4rpx solid #000;
overflow: hidden;
background: #fff4b2;
}
.headpiece-process-inner {
position: absolute;
top: 0rpx;
left: 0rpx;
background: #f74242;
height: 100%;
transition: all 0.3s ease-out;
}
index.js
/**
* 获取系统信息
*/
getSystemInfo: function () {
return new Promise((a, b) => {
wx.getSystemInfo({
success: function (res) {
a(res)
},
fail: function (res) {
b(res)
}
})
})
},
/**
* 进度条动画
*/
countdown: function () {
const requestAnimationFrame = callback => {
return setTimeout(callback, 1000 / 60);
}, cancelAnimationFrame = id => {
clearTimeout(id);
};
this.getSystemInfo().then(v => {
let maxtime = this.data.maxtime,
width = this.data.width,
sTime = +new Date,
_ts = this,
temp,
animate;
(animate = () => {
temp = requestAnimationFrame(() => {
let time = maxtime * 1000,
currentTime = +new Date,
schedule = 1 - (currentTime - sTime) / time,
schedule_1 = schedule <= 0 ? 0 : schedule,
width = parseInt(schedule_1 * 100),
t = parseInt((this.data.maxtime) * schedule_1)+1;
_ts.setData({
width: width,
t:t
});
if (schedule <= 0) {
cancelAnimationFrame(temp);
_ts.setData({
width: width,
t: 0
});
return;
} else {
animate();
};
})
})();
});
},
