微信小程序开发:页面分享卡片、风格选择、通道启用等可配置

上文说到,我们部署了定时任务,但是有个地方忘记在上文写了,这里补上,就是定时任务的超时时间问题,超时时间有7200秒:

我们改成7100秒:

再把云函数调用的云对象的超时时间也改下:

超时时间多一点,因为可能调用往返也需要一点时间,我们把这个时间稍微调大一点。

再把云函数的定时执行改成3小时执行一次,因为云函数的超时时间是两小时:

我们回到正文,我想要的效果是,我选择通道一或者通道二分享时是不同的标题和封面:

还有两个通道可以配置关闭任意一个,因为可能出问题了、或者某个通道额度不够,就需要隐藏掉。

还有一个想要的配置就是通道二是可以选择不同的风格的,如:

这些风格的排序、显示我也想通过配置控制,哪个风格在最前面、哪个风格不显示。

目前是写死在代码中的:

还有一个修改是两个通道的数据相互隔离,我使用了通道一接口,还能使用通道二的接口。

最后一个就是配置默认哪个通道,目前我是默认第二个通道。

现在这个页面看起来简单,但是背后的工作量还是挺多的。

整理一下本文要做的修改:
1、两个通道分享时配置不同的标题、封面

2、通道可选择是否启用

3、通道二的风格配置

4、两个通道数据隔离

5、默认通道配置

先从第一个配置开始,我的配置如下:

现在问题是如何在页面选择不同的通道时,使用不同的配置呢?

我在页面上方的通道使用的组件是uview的分段器,可以看到它有个current属性控制激活的选项,第一个通道就是0、第二个通道就是1:

我把current绑定到data的current变量,change时间函数原型很简单:

所以我在data中新建了变量一个为current映射config_value的key:

我们看看前端拿到的最终的配置结构:

我在share中的配置的键和微信小程序出发分享时的键是一样的,所以现在只需知道是使用阿里云的配置还是腾讯云的了:

这样就能实现不同的通道不同的分享内容了:

OK,第一点实现。

第二点是:通道可选择是否启用。

我们给每个配置一个switch,表示是否启用:

uniapp云开发用的数据库是nosql,就是一个json,可以随意新增字段。

让我想想这个分段器的启用该怎么做~

看了一下分段器的api,好像也不支持我的想法:

那就只能控制是否显示了,分段器绑定的list也是比较简单:

既然都控制是否启用了,不如将名字也一并配置了,说干就干:

然后就是如果switch为fasle,则追加到list即可实现通道的影藏了,先将list置空:

这个列表我们的页面的onload事件中修改:

打印:

页面:

尝试在配置中更改name:

刷新页面,看看页面有没有更新:

名字搞定!

接下来是是否启用,我们关掉一个:

看看页面:

只有通道二了,通道一被过滤了,符合我们的要求,此时又有新的问题出现,我们这里是默认通道二的,如果通道二被关掉了,那么就要默认显示通道一,所以我们还需要加一个是否默认的配置,以及一个索引:

更改一下load_list的代码:

让我们更改一下配置看看效果,此时的配置是两个通道都开启,但是通道一默认(以前是通道二默认):

让我们看看页面效果:

我们再把默认改成通道二:

再看看页面效果:

达到效果,但是又有新的问题出现,如果我两个通道都关闭呢?

那么就得兼容这种情况,如果真的两个通道都不可用,那么我们就得在页面提示功能不可用。

我们把两个通道的配置都关掉:

页面布局改成如下:

页面效果如下:

提示的配置我们也在后台配置,我们再加个配置:

页面此时也可用了:

OK,到目前未知,我们完成两个任务,开始第三个任务:通道二的风格配置。

我现在的风格配置是写死在代码里的:

直接把这块配置复制到配置里即可,这个配置是阿里云特有配置:

代码中style_select变量直接请空:

再在获取配置的函数中设置:

页面效果保持一致:

第三个任务完成,开始第四个任务:两个通道数据隔离。

目前通道一和通道二是共用一个结果变量的,实际效果就是,我在通道一上传了一张图片,切换到通道二还是这种图片,我想的效果是我在通道一上传了一张图片A,我切换到通道二后,上传区域是空白的,还可以上传,我就在通道二上传了一张图片B,此时我再切换会通道一,此时显示图片A。

第一个问题:两个通道的共享变量问题,先从组件的fileList开始:

data:

绑定的raw_images变量应该也要和分享时一样,不同的current不同的key,改造如下:

处理的函数:

输出:

这样就变成了每个类型单独的数组了。

我同时写了一个函数获取当前的类型:

所有读取和设置的地方再根据类型作为键即可,首先是组件:

删除和读取的地方:

追加图片的地方:

这样就能实现数据隔离了:

第四个任务完成后,第五个任务:默认通道配置,这个其实已经在做第二个任务的时候已经完成了,设置某个通道为默认。

还有个小修改,就是我在通道二上传了原图,我切换到通道一后,此时通道一是没有上传图片的,是不能点击转换按钮的,但现在的问题就是我在通道二上传了图片再切换到通道一,此时也是可以点击转换按钮,所以这个bug得修复一下。

这里就需要标识下第一次上传的才是原图,后面的都是转换的结果图:

第一次上传的地方:

转换成功后追加的地方,默认false:

这样就能动态切换转换按钮的激活属性了:

干脆把按钮的文字页一并配置好了:

接到页面:

到此基本当前页面所有的内容都可控制了。

风格选择换了个颜色:

个人觉得好看了点,哈哈,要是各位看官有好的想法还请评论区指点一下。

把删除按钮也调大了点:

样式如下:

突然又想到一个修改点,如果后台配置通道二为默认,此时用户分享了通道一给好友,那么好友打开时也是通道一才对。

那么分享时就得带参数了,在跳转的url后面加了一个index参数作为区别:

在onload中检测并覆盖设置:

搞定!

本文到此到尾声了,我们总结一下本文所完成的功能有:

1、两个通道分享时配置不同的标题、封面

2、通道可选择是否启用

3、通道二的风格配置

4、两个通道数据隔离

5、默认通道配置

6、转换按钮可用判断

7、打开分享的通道为分享时的通道

接下来就是提审了,提审时间为本文发布时间后一点,现在时间为:2024-3-6 15:37:53。

本地打包:

本地编译后再跑一遍流程测试下,看下现在的分包大小:

提审:

等审核,估计得明天啥时候了:

小程序名:《一方云知》。欢迎大家使用,人像动漫化接口是免费使用的。

这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。

想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。

感谢你的阅读与支持,期待在未来的文章中与你再次相遇!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/434793.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

20240306作业

1.编写一个伪终端&#xff1a;在真正的终端上运行这个伪终端程序之后&#xff0c;能够执行所有的shell指令&#xff0c;甚至再次运行自己 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <unistd.h> #include <sys/types.h…

Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案

chunk-vendors.js 是/node_modules 目录下的所有模块打包成的包&#xff0c; 但是这包太大导致页面加载很慢&#xff08;我的都要3-4秒了&#xff09;&#xff0c; 这个时候就会出现白屏的情况 解决方案 1、compression-webpack-plugin 插件解决方案 1&#xff09;、安装 npm …

Docker数据卷篇

1. 数据卷&#xff08;容器数据管理&#xff09; 引言&#xff1a;在之前的nginx案例中&#xff0c;修改nginx的html页面时&#xff0c;需要进入nginx内部。并且因为没有编辑器&#xff0c;修改文件也很麻烦。 这就是因为容器与数据&#xff08;容器内文件&#xff09;耦合带…

用位运算维护状态码,同事直呼牛X!

位运算是一种非常高效的运算方式。在算法考察中比较常见&#xff0c;它使用位级别的操作来表示和控制状态&#xff0c;这在管理多个布尔标志或状态时尤其有用。那么业务代码中我们如何使用位运算呢&#xff1f; 位运算基础 我们先来回顾一下位运算的基础&#xff1a; 与&…

领到了腾讯云服务器红包,可以用于购买服务器,开心!

在2024年腾讯云新春采购节优惠活动上&#xff0c;可以领取新年惊喜红包&#xff0c;打开活动链接 https://curl.qcloud.com/oRMoSucP 会自动弹出红包领取窗口&#xff0c;如下图&#xff1a; 腾讯云2024新春采购节红包领取 如上图所示&#xff0c;点击“领”红包&#xff0c;每…

腾讯云十大优惠活动曝光,TOP10值得买云服务器配置报价

腾讯云服务器多少钱一年&#xff1f;61元一年起&#xff0c;2核2G3M配置&#xff0c;腾讯云2核4G5M轻量应用服务器165元一年、756元3年&#xff0c;4核16G12M服务器32元1个月、312元一年&#xff0c;8核32G22M服务器115元1个月、345元3个月&#xff0c;腾讯云服务器网txyfwq.co…

python爬虫(一)

一、python中的NumPy模块&#xff08;数据的存储和处理&#xff09; 这里是下载完成之后的表现 &#xff08;1&#xff09;创建数组 1、使用array&#xff08;&#xff09;函数创建数组 使用array函数可以创建任意维度的的数组 下面是一个创建二维数组的代码示例 下面是代码…

L1-096 谁管谁叫爹分数

L1-096 谁管谁叫爹 分数 20 全屏浏览 切换布局 作者 陈越 单位 浙江大学 《咱俩谁管谁叫爹》是网上一首搞笑饶舌歌曲&#xff0c;来源于东北酒桌上的助兴游戏。现在我们把这个游戏的难度拔高一点&#xff0c;多耗一些智商。 不妨设游戏中的两个人为 A 和 B。游戏开始后&…

使用统一功能完善图书管理系统

目录 一、前提 二、实现强制登陆传统方式 三、拦截器 1、概念 2、拦截器 &#xff08;1&#xff09;定义拦截器 &#xff08;2&#xff09;注册拦截器 &#xff08;3&#xff09;运行 3、使用拦截器实现强制登陆 4、DispatcherServlet源码解析 四、适配器模式 1、适…

Postman 接口自动化测试教程:入门介绍和从 0 到 1 搭建 Postman 接口自动化测试项目

关于Postman接口自动化测试的导引&#xff0c;全面介绍入门基础和从零开始搭建项目的步骤。学习如何有效地使用Postman进行API测试&#xff0c;了解项目搭建的基础结构、环境设置和测试用例的编写。无论您是新手还是经验丰富的测试人员&#xff0c;这篇教程都将为您提供清晰的指…

IIC 接口

IIC 接口 IIC总线概述IIC总线简介IIC总线通信过程IIC总线寻址方式 IIC总线信号实现起始信号、停止信号字节传送与应答同步信号 IIC典型时序 IIC总线概述 IIC总线简介 IIC总线是Philips公司在八十年代初推出的一种串行、半双工总线&#xff0c;主要用于近距离、低速的芯片之间…

SpringBoot集成图数据库neo4j实现简单的关联图谱

社交领域&#xff1a;Facebook, Twitter&#xff0c;Linkedin用它来管理社交关系&#xff0c;实现好友推荐 图数据库neo4j安装&#xff1a; 下载镜像&#xff1a;docker pull neo4j:3.5.0运行容器&#xff1a;docker run -d -p 7474:7474 -p 7687:7687 --name neo4j-3.5.0 ne…

信息熵、KL散度、交叉熵、互信息、点互信息

信息熵 信息量 信息量是对信息的度量&#xff0c;衡量事件的不确定性&#xff0c;越小概率的事件发生了产生的信息量越大。我们应该用什么形式的函数表达信息量呢&#xff1f;除了随着概率增大而减少&#xff0c;这个函数还有具有以下性质&#xff1a; 如果有两个事件x和y彼…

云消息队列 Confluent 版正式上线!

作者&#xff1a;阿里云消息队列 前言 在 2023 年杭州云栖大会上&#xff0c;Confluent 成为阿里云技术合作伙伴&#xff0c;在此基础上&#xff0c;双方展开了深度合作&#xff0c;并在今天&#xff08;3月1日&#xff09;正式上线“云消息队列 Confluent 版”。 通过将 Co…

vue3学习(续篇)

vue3学习(续篇) 默认有vue3基础并有一定python编程经验。 chrome浏览器安装vue.js devtools拓展。 文章目录 vue3学习(续篇)1. element-ui使用2. axios 网络请求1. 简介2. 操作 3. flask-cors解决跨域问题1. 简介2. 操作 4. 前端路由 vue-router1. 简单使用2. 配置路径别名和…

基于远程NDIS的Internet共享设备驱动出现感叹号(Windows 仍在设置此设备的类配置 代码 56)解决办法

USB共享网络出现了RNDIS/MBIM设备驱动显示感叹号&#xff08;Windows 仍在设置此设备的类配置。 (代码 56)&#xff09;的情况的解决办法&#xff1a; 1.设置中搜索安全模式/更改高级启动选项->立即重新启动 2.重启后界面中选择疑难解答->高级选项->启动设置->屏…

触发HTTP preflight预检及跨域的处理方法

最近在做需求的过程中&#xff0c;遇到了很多跨域和HTTP预检的问题。下面对我所遇到过的HTTP preflight和跨域的相关问题进行总结&#xff1a; 哪些情况会触发HTTP preflight preflight属于cors规范的一部分&#xff0c;在有跨域的时候&#xff0c;在一定情况下会触发preflig…

迭代的 CKKS 高精度自举

参考文献&#xff1a; [KDE23] Kim A, Deryabin M, Eom J, et al. General bootstrapping approach for RLWE-based homomorphic encryption[J]. IEEE Transactions on Computers, 2023.[BCC22] Bae Y, Cheon J H, Cho W, et al. Meta-bts: Bootstrap** precision beyond the …

Java基础概念 7-计算机中的数据存储

目录 Java基础概念 7-计算机中的数据存储 计算机的存储规则 进制 十进制:0123456789 二进制:01 常见的进制 不同进制在代码中的表现形式 计算机为什么用二进制存储数据? 进制之间的转换 任意进制转十进制 公式: 系数*基数的权次幂 相加 二进制转十进制** 八进制转…

基于springboot+vue的智能无人仓库管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…