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

上文说到,我们部署了定时任务,但是有个地方忘记在上文写了,这里补上,就是定时任务的超时时间问题,超时时间有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。

本地打包:

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

提审:

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

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

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

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

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