手把手教你做短视频去水印微信小程序系列教程(3-个人中心)
文章目录
前言
和首页一样,为了方便,个人中心页同样的我不一点一点的写布局和样式,找一个差不多的模板样式,然后修改并补充交互。
初始的样式长这个样子:
一、修改顶部
1.1 颜色修改
因为样板的颜色是橙色,我们改为和首页一样的色值。
首先修改 pages/mine/mine.json
文件:
// pages/mine/mine.json
{
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#99CCFF",
"navigationBarTextStyle": "white",
"component": true,
"usingComponents": {
"icon": "./icon/index"
}
}
然后将 .center .blue-top
的颜色也改为 #99CCFF
。同时,我们将原有的“已为您服务天数”改为“免费解析次数”,并将左右交换位置,这样我们后续可以增加一个逻辑:让用户在超过免费的解析次数后,观看激励广告才能继续解析。
<view class="blue-top">
<view class="user-card">
<view class="card-top">
<view class="user-top">
<view class="user-vip" style="position:relative;">
<image class="user-pic" src="{{hasUserInfo ? userInfo.avatarUrl : '/images/my.png'}}"></image>
</view>
<view class="user-board">
<button wx:if="{{!hasUserInfo}}" class="user-name" open-type="getUserInfo" bindgetuserinfo="getUserInfo">点击登陆</button>
<view wx:if="{{hasUserInfo}}" class="user-name">{{userInfo.nickName}}</view>
</view>
</view>
</view>
<view class="card-bottom">
<view class="left">
<view class="count">
<text class="num">{{dailyFreeParseNum}} 次</text>
</view>
<text class="txt">今日免费次数</text>
</view>
<view class="right">
<view class="count">
<text class="num">{{totalParseNum}} 次</text>
</view>
<text class="txt">共为您解析次数</text>
</view>
</view>
</view>
</view>
1.2 用户信息展示/登陆
在第一章中,我们封装了http请求方法,以及一个getUserInfo
方法登陆并获取用户信息及token,这里我们可以直接复用该方法。
首先我们在data中定义两个变量
data: {
userInfo: null,
hasUserInfo: false,
},
然后可以注意到我们的wxml中,在没有用户信息时展示的是登陆button,绑定了getUserInfo方法
<view class="user-board">
<button wx:if="{{!hasUserInfo}}" class="user-name" open-type="getUserInfo" bindgetuserinfo="getUserInfo">点击登陆</button>
<view wx:if="{{hasUserInfo}}" class="user-name">{{userInfo.nickName}}</view>
</view>
我们在/pages/mine/mine.js
中声明该方法,添加loading提示,核心逻辑复用app.js中的方法:
/**
* 授权登录
*/
getUserInfo(e) {
if (e.detail.errMsg !== 'getUserInfo:ok') {
wx.showToast({
title: '未授权,登录失败',
icon: 'none'
})
return false;
}
wx.showLoading({
title: "正在登录",
mask: true
});
// 执行登录
app.getUserInfo(res => {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: app.globalData.hasUserInfo,
})
wx.hideLoading();
})
}
这里注意的是我们传入了一个回调,来设置当前页面的userInfo、hasUserInfo变量的值。
1.3 获取解析次数
在data中增加dailyFreeParseNum
、totalParseNum
两个参数,并将默认值设置为 --
,
data: {
dailyFreeParseNum: '--',
totalParseNum: '--',
userInfo: null,
hasUserInfo: false,
},
在onShow阶段获取每日免费解析次数、总解析次数
onShow: function() {
if (app.globalData.hasUserInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: app.globalData.hasUserInfo,
})
}
// 获取每日剩余免费解析次数
this.getDailyFreeParseNum(),
// 获取当前用户总解析次数
this.getTotalParseNum();
},
下面我们来实现这两个方法
1.3.1 今日免费解析次数
每日的免费解析次数使用本地存储,不走服务端,不做强限制。
/**
* 获取当日免费次数
* 使用本地存储,不走服务端
*/
getDailyFreeParseNum() {
var today = util.formatDate(new Date(), '');
var lastParseDate = wx.getStorageSync('lastParseDate');
if (lastParseDate != today) {
wx.setStorageSync('lastParseDate', today);
wx.setStorageSync('dailyFreeParseNum', DEFAULT_DAILY_FREE_PARSE_NUM);
return DEFAULT_DAILY_FREE_PARSE_NUM;
} else {
return wx.getStorageSync('dailyFreeParseNum');
}
},
1.3.2 总解析次数
该处使用的url网络请求的数据。
/**
* 获取总解析次数
* 返回示例:
* {"total_num":354}
*/
getTotalParseNum() {
app.apiRequest({
url: '/records/total',
success: res => {
this.setData({
totalNum = res.data.total_num
})
}
})
},
二、修改菜单
2.1 菜单样式
这里我们只保留几个认为有用的菜单项:
<view class="center-list">
<navigator bindtap="pingMenu" class="center-list-item" url="/pages/history/history">
<icon class="icon1" color="#00c8fd" size="50" type="download"></icon>
<text class="list-text">解析记录查询</text>
<icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
</navigator>
<!--navigator target="miniProgram"/--->
<button class="center-list-item" openType="contact">
<icon class="icon1" color="#00c8fd" size="50" type="kefu"></icon>
<text class="list-text">联系客服</text>
<icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
</button>
<button class="center-list-item" openType="share">
<icon class="icon1" color="#00c8fd" size="40" type="share"></icon>
<text class="list-text">分享</text>
<icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
</button>
<button bindtap="showQrcode" open-type="navigate" class="center-list-item" >
<icon class="icon1" color="#00c8fd" size="50" type="zan1"></icon>
<text class="list-text">赞赏支持</text>
<icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
</button>
</view>
2.1.1 联系客服
<button class="center-list-item" openType="contact">
<icon class="icon1" color="#00c8fd" size="50" type="kefu"></icon>
<text class="list-text">联系客服</text>
<icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
</button>
如上,我们只要对button添加openType="contact"
即可。
2.1.2 分享
<button class="center-list-item" openType="share">
如上,同样的,对button添加openType="share"
即可,不过要定义分享函数 onShareAppMessage
:
//分享小程序
onShareAppMessage: function() {
return {
title: this.data.config_base_list.share_title ? this.data.config_base_list.share_title : '推荐一款超好用的视频去水印工具,免费解析不限次,大家都在用',
path: '/pages/index/index',
imageUrl: this.data.config_base_list.share_imageUrl ? this.data.config_base_list.share_imageUrl : '/images/share.jpg',
success: function(e) {
wx.showToast({
title: "分享成功",
icon: "success",
duration: 2e3
});
},
fail: function(e) {
wx.showToast({
title: "分享失败",
icon: "none",
duration: 2e3
});
}
}
},
}
2.1.3 赞赏支持
这里为了菜单多一点,添加了一个打赏菜单,实现简单,点击后弹出个图片就行:
//打赏
showQrcode() {
wx.previewImage({
urls: ['http://xxxx/images/xxx.jpg'],
current: 'http://xxxx/images/xxxx.jpg' // 当前显示图片的http链接
})
},
三、历史解析列表
该处使用的url网络请求的数据。
3.1 页面样式
<view class="no-data" wx:if="{{!list||list.length==0}}">暂无相关信息~</view>
<view class="container">
<view class="scroll-gap"></view>
<view class="video-box shadow" wx:for="{{list}}" wx:key="id">
<view class="video-btm">
<view class="video-title ellipsis" bindtap="Copy_video_info" bindlongpress="Copy_video_info" data-content="{{item.url}}" data-tip="标题已复制">{{item.url}}</view>
<button data-content="{{item}}" openType="share">
<icon color="#9cf" size="30" type="share"></icon>
</button>
</view>
<video autoplay class="video-item" bindlongpress="Copy_video_info" data-content="{{item.image_url}}" data-tip="图片链接已复制" poster="{{item.image_url}}" src="{{item.no_water_mark_url}}" wx:if="{{index===downloadIndex}}"></video>
<view class="video-cover" wx:else>
<image class="video-cover-poster" mode="aspectFit" src="{{item.image_url}}" bindtap="Copy_video_info" bindlongpress="Copy_video_info" data-content="{{item.image_url}}" data-tip="图片链接已复制"></image>
<icon bindtap="videoPlay" data-idx="{{index}}" class="video-cover-icon" color="#00c8fd" size="55" type="bofang"></icon>
<text class="video-date">{{item.updated_at}}</text>
</view>
<view class="btn">
<button class="btn-left" bindtap="Copy_video_info" bindlongpress="Copy_video_info" data-content="{{item.url}}" data-tip="视频地址已复制">复制链接</button>
<button class="btn-center" bindtap="Download" data-link="{{item.url}}">重新下载</button>
<button class="btn-right" bindtap="DEL" data-key="{{index}}" data-id="{{item.id}}">删除记录</button>
</view>
</view>
<view class="scroll-gap"></view>
</view>
3.2 获取历史解析列表
分页获取
/**
* 历史解析记录
*/
history: function() {
this.setData({
loading: true
})
wx.showLoading({
title: '加载中...',
});
app.apiRequest({
url: '/records',
data: {
page: this.data.page,
},
success: res => {
console.log(res);
this.setData({
list: this.data.list.concat(res.data.data),
})
},
complete: (res) => {
this.setData({
loading: false
})
wx.hideLoading();
}
})
},
触底加载下一页
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.setData({
page: this.data.page + 1
})
this.history();
},
3.3 删除记录
DEL: function(e) {
var id = e.currentTarget.dataset.id;
var key = e.currentTarget.dataset.key;
wx.showModal({
title: '提示',
content: '你确定要删除吗?',
success: res => {
if (res.confirm) {
app.apiRequest({
url: '/records/' + id,
method: 'DELETE',
success: res => {
this.data.list.splice(key, 1);
this.setData({
list: this.data.list
})
}
})
} else if (res.cancel) {}
}
})
},
3.4 重新下载
/**
* 重新下载
* 复制原始链接跳转首页重新让用户解析
* @param e
*/
Download: function(e) {
console.log(e)
wx.setClipboardData({
data: e.currentTarget.dataset.link,
})
wx.reLaunch({
url: "/pages/index/index"
})
},
3.5 复制地址
//复制视频详情内容
Copy_video_info: function(t) {
wx.setClipboardData({
data: t.currentTarget.dataset.content,
success: function(a) {
wx.showToast({
title: t.currentTarget.dataset.tip,
duration: 1200
});
}
});
},
总结
最终,我们的个人中心页长这个样子:
历史解析记录列表长这个样子:
系列文章
- 手把手教你做短视频去水印微信小程序(0-概述)
- 手把手教你做短视频去水印微信小程序(1-封装网络请求&登陆逻辑)
- 手把手教你做短视频去水印微信小程序(2-首页)
- 手把手教你做短视频去水印微信小程序(3-个人中心)
- 手把手教你做短视频去水印微信小程序(4-转换结果页)
- 手把手教你做短视频去水印微信小程序(5-服务端代码)
- 手把手教你做短视频去水印微信小程序(6-广告代码)
github源码地址
欢迎浏览,欢迎star~