从0开始写一个去水印小程序

最新推荐文章于 2024-05-15 14:37:41 发布
最新推荐文章于 2024-05-15 14:37:41 发布
阅读量310 收藏
点赞数
文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kinga123b/article/details/127695437
版权

废话不多说，开源地址：https://www.ziyuanhe.cn/essay/4430（不想复制可以到这里下载）

首先这个是一个带后台得服务端。从0到1构建的小程序

注意注意最最下面有代码

演示小程序
在这里插入图片描述

演示图
在这里插入图片描述
在这里插入图片描述
小程序端
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
界面就是这样的。

代码专区（考虑到有地址，所以只展示部分代码，我太懒了）

<view class="index">
<view style="width: 100%;margin-top: 30rpx;">
<view style="font-size: 22px;">每日任务</view>
<view style="color: #47494b;font-size: 12px;">完成任务获得额外奖励</view>
<view style="display: flex;margin-top: 30rpx;flex-wrap: wrap;background: rgb(255, 255, 255);padding: 30rpx;border: 1px solid #efefef;border-radius: 8rpx;">
<view style="width: 100%;display: flex;">
<view style="width: 60%;display: flex;align-items: center;flex-wrap: wrap;">
<view style="display: flex;width: 100%;">
<view style="background-image: linear-gradient(135deg,#fb6c4e,#f94b45);border-radius: 2rpx;    border-radius: 4px;box-shadow: 2px 2px 2px 1px rgba(249,75,69,.2);color: #fff;font-size: 11px;margin-right: 6px;padding: 1px 4px;">hot</view>
<view>邀请新用户</view>
</view>
<view style="display: flex;width: 100%;font-size: 22rpx;margin-top: 20rpx;">
<view style="background-image: linear-gradient(135deg,#65a8ff,#542dff);border-radius: 2rpx;    border-radius: 4px;box-shadow: 2px 2px 2px 1px rgba(249,75,69,.2);color: #fff;margin-right: 6px;padding: 1px 4px;">UP</view>
<view>邀请一人奖励100次</view>
</view>
</view>
<view style="width: 40%;display: flex;align-items: center;justify-content: center;">
<button style="background-color: transparent;"openType="share">
<view style="width: 60%;margin: auto;background: rgb(255, 255, 255);background: #3030FF;color: white;border-radius: 12rpx;">去邀请</view>
</button>
</view>
</view>
</view>
<!----->
<view style="display: flex;margin-top: 30rpx;flex-wrap: wrap;background: rgb(255, 255, 255);padding: 30rpx;border: 1px solid #efefef;border-radius: 8rpx;">
<view style="width: 100%;display: flex;">
<view style="width: 60%;display: flex;align-items: center;flex-wrap: wrap;">
<view style="display: flex;width: 100%;">
<view style="background-image: linear-gradient(135deg,#fb6c4e,#f94b45);border-radius: 2rpx;    border-radius: 4px;box-shadow: 2px 2px 2px 1px rgba(249,75,69,.2);color: #fff;font-size: 11px;margin-right: 6px;padding: 1px 4px;">hot</view>
<view>每天签到</view>
</view>
<view style="display: flex;width: 100%;font-size: 22rpx;margin-top: 20rpx;">
<view style="background-image: linear-gradient(135deg,#65a8ff,#542dff);border-radius: 2rpx;    border-radius: 4px;box-shadow: 2px 2px 2px 1px rgba(249,75,69,.2);color: #fff;margin-right: 6px;padding: 1px 4px;">UP</view>
<view>每天签到下发一次奖励</view>
</view>
</view>
<view style="width: 40%;display: flex;align-items: center;justify-content: center;">
<button style="background-color: transparent;">
<view bindtap="pddl" style="width: 60%;margin: auto;background: rgb(255, 255, 255);background: #3030FF;color: white;border-radius: 12rpx;">去签到</view>
</button>
</view>
</view>
</view>
<!------>
<view style="display: flex;margin-top: 30rpx;flex-wrap: wrap;background: rgb(255, 255, 255);padding: 30rpx;border: 1px solid #efefef;border-radius: 8rpx;display: none;">
<view style="width: 100%;display: flex;">
<view style="width: 60%;display: flex;align-items: center;flex-wrap: wrap;">
<view style="display: flex;width: 100%;">
<view style="background-image: linear-gradient(135deg,#fb6c4e,#f94b45);border-radius: 2rpx;    border-radius: 4px;box-shadow: 2px 2px 2px 1px rgba(249,75,69,.2);color: #fff;font-size: 11px;margin-right: 6px;padding: 1px 4px;">hot</view>
<view>每天看一次广告</view>
</view>
<view style="display: flex;width: 100%;font-size: 22rpx;margin-top: 20rpx;">
<view style="background-image: linear-gradient(135deg,#65a8ff,#542dff);border-radius: 2rpx;    border-radius: 4px;box-shadow: 2px 2px 2px 1px rgba(249,75,69,.2);color: #fff;margin-right: 6px;padding: 1px 4px;">UP</view>
<view>观看广告完成后下发10次奖励</view>
</view>
</view>
<view style="width: 40%;display: flex;align-items: center;justify-content: center;">
<button style="background-color: transparent;">
<view bindtap="kf" style="width: 60%;margin: auto;background: rgb(255, 255, 255);background: #3030FF;color: white;border-radius: 12rpx;">去观看</view>
</button>
</view>
</view>
</view>
</view>
</view>

.index {
    background-color: #fff;
    padding: 0 35rpx;
    position: relative;
}

.top {
    padding: 20rpx 0;
}

.title {
    color: #656565;
    font-size: 60rpx;
    font-weight: 650;
    letter-spacing: 5rpx;
}

.result {
    display: flex;
    margin: 20rpx 0;
}

.txt {
    color: #656565;
    font-size: 35rpx;
    font-weight: 700;
}
.detail {
    height: 100vh;
    margin: 60rpx 35rpx;
}

.punch {
    letter-spacing: 6rpx;
    margin: 40rpx 0;
}

.punch_text {
    color: #656565;
    font-size: 22rpx;
    font-weight: 400;
    line-height: 15px;
}

.text_c {
    color: #07c160;
}

.text_c,.text_cc {
    display: inline-block;
    font-weight: 650;
}

.text_cc {
    color: #ec2a2a;
}

.punch_title {
    color: #656565;
    font-size: 25rpx;
    font-weight: 700;
    margin-bottom: 30rpx;
}

.punch_coun {
    display: flex;
    font-size: small;
    margin: 30rpx 0;
}

.punch_copy,.title {
    color: #07c160;
}

.title {
    font-size: 45rpx;
    font-weight: 700;
    margin-bottom: 30rpx;
    text-align: center;
}

.container {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40rpx 0 20rpx;
}

.container,.content {
    display: flex;
}

.content {
    background-color: #f8f8f8;
    border-radius: 20rpx;
    box-shadow: 0 0 .8px #c1d3ea;
    height: 100rpx;
    margin: 25rpx 0;
    width: 44%;
}

.content,.file {
    line-height: 100rpx;
}

.file {
    text-align: center;
    width: 100%;
}

.images1 {
    height: 15rpx;
    margin-right: 30rpx;
    margin-top: 4PX;
    width: 15rpx;
}

.graee {
    background-color: #07c160;
}

.share {
    border-radius: 25rpx;
    line-height: 60rpx;
}

.text1 {
    color: #fff;
}

button {
    background-color: #f8f8f8;
    border-radius: 25rpx;
    margin: 0;
    padding: 0;
}

image {
    height: 45rpx;
    margin-right: 20rpx;
    vertical-align: middle;
    width: 45rpx;
}

.copy {
    height: 35rpx;
    margin-right: 15rpx;
    width: 35rpx;
}

.text {
    display: inline-block;
    font-size: 32rpx;
    font-weight: 500;
}

.public {
    background-color: #fff;
    color: #c0bdbd;
    font-size: 30rpx;
}

.Praise,.public {
    text-align: center;
}

.Praise {
    height: 140rpx;
    position: relative;
    width: 100%;
}
@keyframes box-ani {
    from {transform: rotate(0)}
    to {transform: rotate(360deg)}
  }
.songimg{
    border-radius:50%;
    position: relative;
    /* margin-left: -30rpx; */
}
.Praise_img {
    left: 26%;
    margin: 0;
    position: absolute;
}
.count {
    color: #07c160;
    padding: 0 10rpx;
}
.typexx {
    background-color: #f8f8f8;
    border-radius: 15rpx;
    box-shadow: 0 0rpx 1rpx rgba(0,0,0,.04);
    display: flex;
    padding-top: 0;
    position: relative;
    width: 100%;
}
.search {
    background-color: #f8f8f8;
    border-radius: 15rpx;
    box-shadow: 0 0rpx 1rpx rgba(0,0,0,.04);
    display: flex;
    height: 100rpx;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.delete {
    display: block;
    right: 17%;
    top: 38%;
    z-index: 10;
}

.del,.delete {
    position: absolute;
}

.del {
    height: 25rpx;
    right: -9rpx;
    top: 20%;
    width: 25rpx;
}

input {
    background-color: #f8f8f8;
    border-radius: 15rpx;
    display: block;
    font-size: 35rpx;
    height: 100%;
    padding-left: 34rpx;
    position: relative;
    width: 72%;
}

button:not([size="mini"]) {
    border-radius: 8rpx;
}

.glass {
    display: inline-block;
    height: 50rpx;
    line-height: 100rpx;
    position: absolute;
    right: 8rpx;
    text-align: center;
}

.single {
    background-color: #f8f8f8;
    border-radius: 15rpx;
    box-shadow: 0 0rpx 1rpx rgba(0,0,0,.04);
    height: 150rpx;
    margin: 30rpx 0;
    width: 100%;
}

.single_content {
    justify-content: space-between;
    padding: 35rpx 25rpx;
}

.single_content,.single_l {
    display: flex;
}

.single_l {
    width: 83%;
}

.single_l image {
    height: 80rpx;
    width: 80rpx;
}

.single_c {
    margin-left: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
}

.name {
    font-size: 28rpx;
    font-weight: 600;
    white-space: nowrap;
    width: 100%;
}

.file {
    color: #656565;
    font-size: 20rpx;
    font-weight: 400;
    margin-top: 10rpx;
}

.single_r {
    line-height: 90rpx;
    text-align: center;
    width: 10%;
}

.single_r image {
    height: 40rpx;
    width: 40rpx;
}

.down {
    height: 80rpx;
    margin: 20rpx 0;
    position: relative;
    width: 100%;
}

.ad {
    bottom: 8%;
    position: fixed;
    right: 4%;
    width: 30%;
}

.down_text {
    color: #a9a9a9;
    font-size: 30rpx;
    line-height: 80rpx;
    position: absolute;
    text-align: center;
    width: 100%;
}
是陈教授呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从0开发小程序，一个月时间实现盈利！内附抖音去水印原理
Smhhs
09-28 3637
一、开发前奏 1.背景 近几年短视频行业的兴起，涌现出抖音快手等优秀的app，但是在app上发现优秀视频想要下载到本地时，又奈何总是全程有水印又末尾有平台独白，搜索众多app和小程序大部分要嘛广告众多烦人，要嘛每天有解析次数限制，要嘛超过次数就要收费的。刚好本人是个码农，我想，那何不自己开发一个小程序解决自己需求的同时，又能够帮助他人呢（当初没想到竟然能盈利）。 2.选型 技术选型采用微信小程序做开发，一来是微信小程序发布后在android和ios都可以使用，二来是去水印只是个简单的小功能，没必要再开发一个
简单的去水印小程序源码~无需授权版
xiaopakchoi的博客
05-09 3519
介绍 某宝买的去水印小程序无需授权，可自定义接口 同时拥有代理功能，代理面板是独立的，也同时管理N个小程序主后台可以控制代理后台管理小程序数量！ 1.支持小程序后台流量主banner广告、支持小程序后台流量主、激励视频广告 2.支持全网短视频解析，苹果安卓通用 3.支持客服在线回复 4.支持一键保存到IOS系统相册 5.自主研发独立后台，支持无限分站功能 演示小程序 嗨去水印 前端展示 后端展示 源码下载 密码：eczg ...
如何快速搭建一个去水印小程序1
最新发布
sunjintao135的博客
05-15 491
如何快速搭建一个去水印小程序
去水印小程序
MMKJSH的博客
10-22 1750
去水印小程序
2023年3月已更新，云开发去水印小程序源码，无需服务器
seeanyun的博客
07-18 4724
虽不同于一般的云开发，本小程序独创全新的后端管理方式，小程序的后台可以在前端“我的”中设置，非常的方便，可以对小程序的轮播图、消息、通知、域名、解析接口、流量主代码、流量主开关、积分管理等进行全方位的设置管理。小程序是属于云开发的，需要HBuider进行编译发布，关联阿里云、腾讯云免费空间，可以免除服务器和备案域名高成本的烦恼，节约运营成本。还可以在工具页面设置跳转小程序，方便矩阵推广，大大增加小程序的使用，提高流量。好了，废话就不多说了，下面送上小程序源码，有需要的自行去测试研究吧。是不是非常简单方便？.
微信短视频去水印小程序搭建教程（含源码），超级详细哦，支持流量主的
m0_57984075的博客
05-22 4657
介绍 小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用 注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可 安装说明： 上传源码，修改data/config.php里面的数据库连接信息 输入域名访问 帐号密码admin 登录后台添加安装小程序，配置你自己的小程序信息即可！ 配置好了之后用微信开发者工具打开前端修改 5C9493E66D08C8FF3AF2FBE1160510
去水印小程序源码，新手小白也适用
10-13
去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小程序源码去水印小...
2023去水印小程序源码修复版
09-18
"2023去水印小程序源码修复版" 是一个特定的软件开发项目，指的是一个在2023年更新或修复过的小程序源代码，其主要功能是去除图像或视频中的水印。这个修复版可能是在原有的基础上解决了之前存在的问题，提升了性能...
最新版去水印小程序源码/基于WordPress的短视频去水印小程序源码
04-08
最新版去水印小程序源码，基于WordPress的短视频去水印小程序源码。本版本全开源，是Wordpress插件 上传到Wordpress 安装插件，启动之后绑定自己的小程序id就可以了。 wordpress可以在宝塔一键部署，也可以用源码带...
2022最新版去水印小程序源码+安装教程
02-25
这个【标题】"2022最新版去水印小程序源码+安装教程"所代表的是一个针对短视频的去水印解决方案，它提供了2022年更新的源代码，并且包括了安装和配置的教程。这样的工具对于那些想要去除短视频中的水印，或者需要...
新版小程序去水印源码.zip
04-23
新版小程序去水印源码，开源产品，未加密未授权，可调用别人的接口和自己的接口，喜欢的朋友可以下载使用学习
2023去水印小程序源码修复版.zip
03-13
去水印小程序源码，前端+后端，内置接口+第三方接口，修复数据库账号密码错误问题，内置接口支持替换第三方接口，看了一下文件挺全的，可以添加流量主代码，搭建需要准备一台服务器，备案域名，小程序开发工具，前端文件用HBuilder打开，后台文件上传服务器。 使用内置接口将使用程序自带的解析接口，不过支持的平台很少，后面陆续更新 使用第三方接口需要到后端代码中修改，其文件路径是 source/application/api/controller/Apis.php文件
最新去水印小程序源码.zip
10-21
去水印小程序源码
2023最新去水印小程序源码，无需后台，对接接口，支持全网去水印
10-31
在2023年的最新技术趋势中，去水印小程序源码的应用变得越来越广泛，尤其在社交媒体、短视频分享等场景下，用户对于去除视频或图片上的水印有着强烈的需求。 一、去水印小程序的实现原理 去水印小程序通常基于深度...
2021年最新版去水印小程序搭建教程
醉里挑灯看剑的博客
03-21 2442
环境搭建要求： 新入手的朋友可以选择： Linux + 宝塔面板 + apache2.4+ php7.3 使用条件：备案域名（小程序是不支持IP的） 经过测试，程序完全可用。 第一步骤，后台模块： 后台我采用的是tp开源框架onebase 后台界面看起来还是比较舒服的，而且可以快速开发。 至于搭建宝塔的话，大家可以在网上搜索一下教程。下面的是我部署的宝塔界面： 部署好之后，需要配置ssl证书，我这个证书是在阿里云申请的免费使用一年，大家也可以通过自己的途径进行申请： ...
去水印微信小程序uniapp版本（带后台，全开源）
m0_57979876的博客
09-11 2114
这是一个工具类小程序，由我个人开发，其主要功能就是帮助用户去除视频的水印（这里的水印是现在一些热门平台如dy、ks、xhs等下载视频和图片上的平台作者水印）。小程序通过微信接口wxLogin中返回的openId作为识别用户的标志，从而建立用户的后台管理，实现对用户日使用次数的调整、用户的使用情况的数据收集。小程序端和后端通过jwt生成的token进行接口验证和用户信息传递。小程序可开通微信流量主，后台管理系统可设置是否开启广告和banner广告、激励视频广告、插屏广告、视频广告的adId设置。
分享最新水印小程序搭建教程和源码
oShiJieDeJinTou的博客
02-22 1582
下载解压后在微信开发者工具导入源码，填入小程序的APPID，APPID在微信公众平台找，没有的去注册一个，或者用测试号，这里只是演示如何搭建这样一个小程序，点击导入。导入之后，可以在预览窗口看到小程序的界面，小程序文件结构包括：images、pages、utils，分别是保存图片资源、界面程序、工具代码。在app.js中，添加后台url链接，接口返回的数据是去除水印后的视频的url连接，我们在小程序界面，用vedio标签将其添加进来就可以。// 获取每日剩余免费解析次数。// 在适合的场景显示插屏广告。
基于Q去水印小程序源码+已自带API接口
grthrsdte的博客
04-22 730
正文: 安装环境需要PHP5.6坏境以下，数据库版本5.6以上，域名需要有HTTPs协议，其它的大家自行去研究吧，如果API失效，我这里是有新的API接口，关于如何获取API的话，压缩包里有详细的说明，大家自行去查看。 安装说明:修改app.js这个js文件为自己的域名即可。 lanzou.com/ixFUP03kn9pg ...
写一个小红书图片去水印的程序代码
09-11
写一个小红书图片去水印的程序代码比较复杂，因为小红书的水印是嵌入在图片中的，需要通过图像处理的方法来去除。 首先，我们需要使用图像处理库，如OpenCV来读取图片。代码示例如下： ```python import cv2 def ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值