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

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

本地打包：

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

提审：

等审核，估计得明天啥时候了：

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

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

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

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