现在短视频很受欢迎，不过不少平台的视频都有水印。若想轻松去除这些水印，制作一个专门去水印的微信小程序是个好办法。今天我们就来具体介绍一下这个小程序首页的制作步骤。
小程序模板的利用
在制作小程序时，为了提高效率，众多开发者倾向于选用现成的小程序模板。这类模板起初可能仅是基础的静态页面，比如我们开发的短视频去水印小程序亦是如此。通过这种方式获取静态页，开发者无需从头开始进行布局、样式调整和页面设计，从而大大减少了时间投入。尽管如此，这并不意味着后续工作可以省略，还需在此基础上进行修改和功能扩展，以便小程序真正具备实用性。
<view class="platforms">
<text class="platforms-title">短视频去水印小帮手支持以下平台,部分平台不支持直接保存到相册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>
另一方面，使用模板时还需留意几点。比如，模板在功能上可能不够全面，和我们要达成的短视频去水印的精确效果有所出入。这时，如何恰当调整就变得尤为关键。否则，若与预期功能相差太远，最终的小程序可能无法有效满足用户需求。
<view class="watermark">
<view class="watermark-input">
<input id="inputText" placeholder=" 请复制视频链接，粘贴到这里" 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.comview>
view>
顶部banner功能区
小程序的顶部横幅在用户指引方面扮演着关键角色。在我们的短视频去水印小程序里，我们采用了图标并列的展示方法。这些图标主要用来告诉用户我们支持的平台。目前，这种展示仅限于静态，尚未加入操作功能。这样的设计便于用户快速了解我们支持哪些平台的短视频去水印服务。
这也有提升的可能。例如，在未来的开发阶段，可以给这些图标加入点击后跳转的功能。点击相应平台的图标，用户就能直接进入该平台短视频选择去水印的流程。这样做能提升用户操作的便捷性，也能增强他们对小程序的喜爱。
<input id="inputText" placeholder=" 请复制视频链接，粘贴到这里" 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>
地址解析是小程序的核心环节，它由三个重要部分组成。这直接影响到我们是否能够准确解析视频地址，进而实现去水印功能。在地址解析的代码中，首要任务是input框的双向绑定，这一步骤虽简单却至关重要。不同版本的微信小程序对特性的支持各不相同，我们的程序从基础库2.9.3版起支持input数据的双向绑定，例如使用modal:value="{{videoUrl}}"来简易实现输入url的赋值。许多初学者可能会忽略这一版本要求，导致在实际开发中遇到困难。
接着是代码的清晰度和精确度。每个环节的代码，比如输入框信息的录入、清空操作、检测剪贴板内容、解析视频链接等，都有其特定的编写规范。一旦某个环节的代码出现错误，就有可能使得整个视频地址解析失败，进而导致去水印功能无法实现。
// inputClear 清空输入框
inputClear: function () {
this.setData({
videoUrl: ''
})
},
input框输入相关代码
在输入框填写时，代码编写极为关键。微信小程序的基础库版本影响了众多功能的实现和代码的编写方式。比如，从基础库2.9.3版本起，input数据实现了双向绑定，例如使用modal:value="{{videoUrl}}"进行绑定。这种绑定方法能确保输入的URL被正确赋值。若绑定语法出错，小程序可能无法正确识别视频网址，进而影响去水印等后续操作。
不仅如此，若输入的代码存在其他错误，比如编码格式上的问题，那么小程序在尝试获取视频网址时将无法正确解析。这类问题可能因为代码表面看似无误，但实际上只是某个标点或字符集有细微差错，因此不易被发现。这样，问题往往在测试阶段或用户实际使用时才会显现出来。
<button bindgetuserinfo="parseVideo" class="parsing" hoverClass="parsing-btn-hover" openType="getUserInfo" >一键去除水印button>
input框清空功能
// 视频解析按钮绑定该提交函数
submit: function() {
// 优先判断是否还有免费次数
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: '免费解析次数已用完！',
icon: 'none'
})
//目前我们还没有广告能力，后续开通了广告主再修改此部分。
// // 超免费次数需要观看激励广告
// wx.showModal({
// title: "解析视频",
// content: "免费解析次数已用完，需观看完广告才可继续解析！",
// confirmColor: "#00B269",
// cancelColor: "#858585",
// success: (res) => {
// if (res.confirm) {
// videoAd.show().catch(() => {
// // 失败重试
// videoAd.load()
// .then(() => videoAd.show())
// .catch(err => {
// console.log('激励视频 广告显示失败')
// })
// })
// } else if (res.cancel) {
// wx.showToast({
// title: '广告观看完才可继续解析！',
// 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);
// 跳转到解析结果页做展示
wx.navigateTo({
url: "../video/video?url=" + noWaterUrl + '&image=' + imageUrl + '&preview=' + preview,
})
}
})
}
实现input框清空功能，需要编写wxml和js代码。这两部分代码是紧密相连，共同运作的。wxml负责构建页面结构，js则负责支撑页面逻辑。例如，在wxml中需精确找到input框元素，而在js中需编写正确的清空函数。如此，用户在需要重新输入视频网址时，操作会更加便捷。
用户若初次输入了错误的视频链接，或是希望重新输入另一个链接以去除水印，若系统缺乏清空输入框的功能或该功能存在故障，将会给用户带来诸多不便。用户可能需逐个字符手动删除，这无疑严重影响了他们的使用感受。
广告板块与底bar设置
<view style="height: 300px;">view>
广告区域在小程序功能较为单一的阶段，目前仅作为空白的视图占据位置。然而，随着小程序的进一步发展，广告区域将扮演关键角色。众多小程序依赖广告投放实现盈利，长远来看，这是确保小程序持续增长和运营的关键途径。比如，一些受欢迎的小程序通过广告获得了大量资金，这些资金被用于进一步的开发和运营成本。
小程序的导航效果，底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"
}
]
},
