手把手教你做短视频去水印微信小程序（3-个人中心）

手把手教你做短视频去水印微信小程序系列教程（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～

• 短视频去水印小程序源码-小程序端
• 短视频去水印小程序源码-服务端（php）