专业小程序设计开发——助力新电商新零售

电话+V：159999-78052，欢迎咨询微信小程序整体风格，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]

一、微信小程序设计规范(二)

微信小程序的设计遵循严格的规定，以提供一致且直观的用户体验。视觉规范是设计中的重要组成部分，它确保了小程序与系统字体和色彩保持和谐统一。以下是关键的视觉元素规范：

1.字体:小程序内的字体选择与系统字体保持一致，常见字号包括22pt、17pt、15pt、14pt和12pt，以适应不同的内容展示需求。

2.字体颜色:为了清晰易读，字体颜色应确保在不同背景下都有良好的可读性，遵循对比度原则。

3.色板:小程序色彩搭配需遵循统一且有辨识度的调色板，保证整体风格的一致性。

4.列表:采用清晰的列表结构，使信息排列有序，便于用户浏览和理解。

5.按钮:按钮设计应明确功能，大小、形状和位置需符合用户的操作习惯，触感反馈明显。

6.图标:图标设计应简洁易懂，与文字配合使用，直观传达功能或信息。

二、微信小程序怎么排版好看

小程序页面的创意和整洁能够吸引用户使用小程序，并提高使用体验。基本上一个小程序开发出来能够和微信官方本身的风格保持一致，就算是排版成功。那么微信小程序如何排版呢?以下是一些排版的技巧。

阅读微信官方的设计文档是最有效的方式。

里面提供了大量的用户界面实例，开发者只需严格依据这份小程序介绍页设计文档，就可以做出兼具美观、实用的UI与交互模式。

为了帮助大家更快地理解小程序官方提供的设计文档，小编今天专门为大家解读一下，不仅将设计文档简洁到二分之一，还增加了小程序UI设计和传统的网页设计的比较，讲述二者的差异性。所以现在大家只需花费和之前相比一半都不到的时间就能了解小程序排版技巧了，能掌握设计小程序过程中需要掌握的所有要点。注：本文主要针对小程序开发者和UI设计师。小程序官方设计文档解读基本规则微信小程序设计文档将所有的设计范例分为了四个部分，分别是：

友好礼貌

清晰明确

便捷优雅

统一稳定

除此之外，微信官方还提供了一些便于开发者使用的组件，这些组件可以在微信官方的小程序IDE中直接使用。

设计文档也针对这部分组件进行了详细说明，包括每个组件的适用范围。同时，还提供了Sketch与Photoshop的设计模板，便于UI设计师直接使用。

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

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

本地打包：

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

提审：

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

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

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

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

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

【WINDRISES MINIPROGRAM PROMOTION】尊享直接对接老板

电话+V： 159999-78052

专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题