手把手教你做短視頻去水印微信小程序系列教程（2-首頁）

前言

這里為了方便，我使用了一個(gè)現(xiàn)成的小程序模板，沒有從頭一點(diǎn)一點(diǎn)的寫布局、調(diào)樣式、設(shè)計(jì)頁面，我最初得到的只是一個(gè)簡單的靜態(tài)頁，我在此基礎(chǔ)上，進(jìn)行修改和交互的擴(kuò)充。

在這里插入圖片描述

一、頂部banner

頂部使用一個(gè)簡單的圖標(biāo)羅列，告知用戶我們支持的平臺(tái)，只是靜態(tài)展示，沒有任何功能。

<view class="platforms">
    <text class="platforms-title">短視頻去水印小幫手支持以下平臺(tái),部分平臺(tái)不支持直接保存到相冊(cè)</text>
    <view class="page-body">
      <view class="page-section page-section-spacing swiper">
        <swiper>
          <swiper-item>
            <view class="swiper-item {{item}}">
              <view class="platforms-item">
                <image src="../../images/logo-douyin.png"></image>
                <text>抖音</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-gitShow.png"></image>
                <text>快手</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-ppx.png"></image>
                <text>皮皮蝦</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-volcano.png"></image>
                <text>火山視頻</text>
              </view>
            </view>
            <view class="swiper-item {{item}}">
              <view class="platforms-item">
                <image src="../../images/logo-microview.png"></image>
                <text>微視</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-meipai.png"></image>
                <text>美拍</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-xiaokaxiu.png"></image>
                <text>小咖秀</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-zuiyou.png"></image>
                <text>最右</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>

二、地址解析

1.整體代碼

<view class="watermark">
  <view class="watermark-input">
    <input id="inputText" placeholder=" 請(qǐng)復(fù)制視頻鏈接，粘貼到這里" type="text" modal:value="{{videoUrl}}"></input>
    <button bindtap="inputClear" id="clearInputText">
      <image src="../../images/icon-clear.png" wx:if="{{videoUrl==''}}"></image>
      <image src="../../images/icon-clear-active.png" wx:else></image>
    </button>
  </view>
  <button bindgetuserinfo="getUserInfo" class="parsing" hoverClass="parsing-btn-hover" openType="getUserInfo" >一鍵去除水印</button>
  <view class="center">@ yaqi.wang.com</view>
</view>

其中有3個(gè)關(guān)鍵的部分：input框輸入雙向綁定、清空輸入框、解析視頻鏈接。

2. input框輸入

微信小程序從基礎(chǔ)庫 2.9.3 開始支持input數(shù)據(jù)雙向綁定modal:value="{{videoUrl}}"，這里我們通過 簡易雙向綁定 來實(shí)現(xiàn)輸入url的賦值
代碼如下（示例）：

<input id="inputText" placeholder=" 請(qǐng)復(fù)制視頻鏈接，粘貼到這里" type="text" modal:value="{{videoUrl}}"></input>

3.input框清空

代碼如下（wxml）：

<button bindtap="inputClear" id="clearInputText">
 <image src="../../images/icon-clear.png" wx:if="{{videoUrl==''}}"></image>
  <image src="../../images/icon-clear-active.png" wx:else></image>
</button>

代碼如下（js）：

// inputClear 清空輸入框
inputClear: function () {
  this.setData({
    videoUrl: ''
  })
},

4.自動(dòng)檢測(cè)剪貼板

為了提升用戶體驗(yàn)，我們?cè)黾舆@樣一種功能：判斷剪切板是否有url，如果有則提示用戶是否自動(dòng)填入。

  • onShow階段調(diào)用wx.getClipboardData()方法剪切板內(nèi)容 
    onShow() {
    // 如果剪切板內(nèi)有內(nèi)容則嘗試自動(dòng)填充
    wx.getClipboardData({ success: res => {
      var str = res.data.trim()
      // 如果是合法url則提示用戶是否自動(dòng)填入
      if (this.regUrl(str)) {
        wx.showModal({
          title: '檢測(cè)到剪切板有視頻地址，是否自動(dòng)填入？',
          success: res => {
            if (res.confirm) {
              this.setData({
                videoUrl: str
              })
            }
          }
        })
      }
    }})
},

    這里提一句，關(guān)于剪切板小程序低版本基礎(chǔ)庫有一個(gè)bug，就是wx.getClipboardData方法會(huì)有有兩次success回調(diào)，官方在 2.13.1 版本進(jìn)行了修復(fù)。

  • 匹配剪切板字符串是否是url 
     // 視頻地址匹配是否合法
  regUrl: function (t) {
    return /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(t)
  },

這樣，在用戶進(jìn)入小程序時(shí)，如果復(fù)制了url則可以自動(dòng)填入了。

5.解析視頻鏈接

<button bindgetuserinfo="parseVideo" class="parsing" hoverClass="parsing-btn-hover" openType="getUserInfo" >一鍵去除水印</button>

上面我們的按鈕綁定了parseVideo函數(shù)，來將輸入的url請(qǐng)求到服務(wù)端獲取解析后的視頻地址，這里我們暫時(shí)在函數(shù)內(nèi)部先僅用toast，后續(xù)再添加具體的解析邏輯。

// 視頻解析按鈕綁定該提交函數(shù)
submit: function() {
  // 優(yōu)先判斷是否還有免費(fèi)次數(shù)
  var num;
  var today = util.formatDate(new Date(), '');
  var lastParseDate = wx.getStorageSync('lastParseDate');
  if (lastParseDate != today) {
    wx.setStorageSync('lastParseDate', today);
    wx.setStorageSync('dailyFreeParseNum', app.globalData.defaultDailyFreeParseNum);
    num = app.globalData.defaultDailyFreeParseNum;
  } else {
    num = wx.getStorageSync('dailyFreeParseNum');
  }
  if (num > 0) {
    this.parseVideo();
  } else {
    wx.showToast({
      title: '免費(fèi)解析次數(shù)已用完！',
      icon: 'none'
    })
    //目前我們還沒有廣告能力，后續(xù)開通了廣告主再修改此部分。
    // // 超免費(fèi)次數(shù)需要觀看激勵(lì)廣告
    // wx.showModal({
    //   title: "解析視頻",
    //   content: "免費(fèi)解析次數(shù)已用完，需觀看完廣告才可繼續(xù)解析！",
    //   confirmColor: "#00B269",
    //   cancelColor: "#858585",
    //   success: (res) => {
    //     if (res.confirm) {
    //       videoAd.show().catch(() => {
    //         // 失敗重試
    //         videoAd.load()
    //           .then(() => videoAd.show())
    //           .catch(err => {
    //             console.log('激勵(lì)視頻 廣告顯示失敗')
    //           })
    //       })
    //     } else if (res.cancel) {
    //       wx.showToast({
    //         title: '廣告觀看完才可繼續(xù)解析！',
    //         icon: 'none'
    //       })
    //     }
    //   }
    // })
  }
},

// 視頻解析
parseVideo: function () {
  app.apiRequest({
    url: '/video-parse',
    method: 'POST',
    data: {
      url: this.data.videoUrl
    },
    success: res => {
      var noWaterUrl = encodeURIComponent(res.data.url);
      var imageUrl = encodeURIComponent(res.data.image);
      var preview = res.data.preview;
      wx.setStorageSync('dailyFreeParseNum',  wx.getStorageSync('dailyFreeParseNum') - 1);
      // 跳轉(zhuǎn)到解析結(jié)果頁做展示
      wx.navigateTo({
        url: "../video/video?url=" + noWaterUrl + '&image=' + imageUrl + '&preview=' + preview,
      })
    }
  })
}

三、廣告板塊

由于我們的功能其實(shí)很單一，其余部分準(zhǔn)備用廣告代碼填充，暫時(shí)用空view站位：

<view style="height: 300px;"></view>

//Todo 廣告代碼接入見后續(xù)章節(jié)

四、底bar

在app.json中增加底bar的配置：

"tabBar": {
    "custom": false,
    "color": "#dbdbdb",
    "selectedColor": "#337AFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "images/icon-home.png",
        "selectedIconPath": "images/icon-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/icon-me.png",
        "selectedIconPath": "images/icon-me-selected.png"
      }
    ]
  },

這里我們只設(shè)計(jì)“首頁”、“我的”兩個(gè)菜單。
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

總結(jié)

<font color=#999AAA >最終我們頁面長這個(gè)樣子：


在這里插入圖片描述
在這里插入圖片描述

系列文章

github源碼地址

20200312162118248.jpg

歡迎瀏覽，歡迎star～

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容