和首页一样，为了方便，个人中心页同样的我不一点一点的写布局和样式，找一个差不多的模板样式，然后修改并补充交互。
初始的样式长这个样子：
一、修改顶部
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-广告代码）【待完成】
- 手把手教你做短视频去水印微信小程序（7-Q&A整理）【待完成】
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
