微信小程序开发：页面分享卡片、风格选择、通道启用等可配置
<p data-track="1">上文说到，我们部署了定时任务，但是有个地方忘记在上文写了，这里补上，就是定时任务的超时时间问题，超时时间有7200秒：</p><div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/fecde5df03ec4c56b623fa09ce4f98e6~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=lv9Fe1THdSX%2F3vC9Psn6sYEWmzI%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="2">我们改成7100秒：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5fe4d4c93e5a4fca89a41ecafc168401~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=rp%2B%2FdbW4O1mwTrSIwxjJdxCw6vg%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="3">再把云函数调用的云对象的超时时间也改下：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/3d9a601fc4df4793a642193d9c7f5977~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=XHpYBdY5WpbW3HyGj4Gm92opfhI%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="4">超时时间多一点，因为可能调用往返也需要一点时间，我们把这个时间稍微调大一点。</p>
<p data-track="5">再把云函数的定时执行改成3小时执行一次，因为云函数的超时时间是两小时：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/89cb5d27f5384b0cbb904539b38b0cc4~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=wyFLmkGDzSrMZlzQAI7VFtGFNpA%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="6">我们回到正文，我想要的效果是，我选择通道一或者通道二分享时是不同的标题和封面：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/a7bc15ec235b471287459eb5547799d0~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=TijNMV1afOUg9luxK90RE6Vqqag%3D">
<p class="pgc-img-caption"> </p>
</div>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/3bf67a15249742b2b18f31021065180f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=orlzJ6tW%2FOEBvmU22Umn2qx4YsY%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="7">还有两个通道可以配置关闭任意一个，因为可能出问题了、或者某个通道额度不够，就需要隐藏掉。</p>
<p data-track="8">还有一个想要的配置就是通道二是可以选择不同的风格的，如：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/325b31805fdc437983d77bb6ee399c6f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=S%2B8lEAfJKv6gG2pBpvscZ2eZMM0%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="9">这些风格的排序、显示我也想通过配置控制，哪个风格在最前面、哪个风格不显示。</p>
<p data-track="10">目前是写死在代码中的：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6c5d609a777345c28e1885ab9761e844~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=tavE%2FGLc%2FutwBJxezu6iFz%2FRre8%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="11">还有一个修改是两个通道的数据相互隔离，我使用了通道一接口，还能使用通道二的接口。</p>
<p data-track="12">最后一个就是配置默认哪个通道，目前我是默认第二个通道。</p>
<p data-track="13">现在这个页面看起来简单，但是背后的工作量还是挺多的。</p>
<p data-track="14">整理一下本文要做的修改：<br class="sysbr">1、两个通道分享时配置不同的标题、封面</p>
<p data-track="15">2、通道可选择是否启用</p>
<p data-track="16">3、通道二的风格配置</p>
<p data-track="17">4、两个通道数据隔离</p>
<p data-track="18">5、默认通道配置</p>
<p data-track="19">先从第一个配置开始，我的配置如下：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/f6d1aee204384be68b44701ba2a7b740~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=oO8VcoK1NhDdQqTdpLsW8YFmRks%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="20">现在问题是如何在页面选择不同的通道时，使用不同的配置呢？</p>
<p data-track="21">我在页面上方的通道使用的组件是uview的分段器，可以看到它有个current属性控制激活的选项，第一个通道就是0、第二个通道就是1：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/1a339842226a48c7a1a543de0e4fd7ce~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=jGvhEabyIivBBM8iQ23v5Q2Qi0c%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="22">我把current绑定到data的current变量，change时间函数原型很简单：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6bd04a2641e84b318e2f7bff52b4b18b~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=F1xFEE%2BuhykpQAX5YGn2ad5M1Ro%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="23">所以我在data中新建了变量一个为current映射config_value的key：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/09f85d7702f84d9388766435a64b5d02~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=Ft7SX8bFsAf%2B9yg2Y0rjFw0hTn8%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="24">我们看看前端拿到的最终的配置结构：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/4e9aa176fbc54bd58e076938cde16dfb~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=wmBS2ywL7dTFz2%2BQy8lcJndIoYw%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="25">我在share中的配置的键和微信小程序出发分享时的键是一样的，所以现在只需知道是使用阿里云的配置还是腾讯云的了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/843ce28c4e9349c7b454b8d9dec3dfca~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=S5UNp1yeQ61bYS35aFprIp9ZOTc%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="26">这样就能实现不同的通道不同的分享内容了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/8fb5ac1a2dec413f9db7d747b725e989~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=OCs0zExO%2BkRrfpnIVNM%2F9DyeaWI%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="27">OK，第一点实现。</p>
<p data-track="28">第二点是：通道可选择是否启用。</p>
<p data-track="29">我们给每个配置一个switch，表示是否启用：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/4194431c08b14e44896834bb5cad0b1f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=hrWh9xNbczLMhKVqkQQTkurdCfs%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="30">uniapp云开发用的数据库是nosql，就是一个json，可以随意新增字段。</p>
<p data-track="31">让我想想这个分段器的启用该怎么做~</p>
<p data-track="32">看了一下分段器的api，好像也不支持我的想法：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/e6efab3c0366421c91f2e6e0b73fb3b6~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=y8Ag8orLVf%2BPbHPL1NS3%2FwIl0%2Bw%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="33">那就只能控制是否显示了，分段器绑定的list也是比较简单：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/9778e2df04464d9fb89d38c63f877e60~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=5HyOlqtSxbotwEHzeoc5jiz4m3Y%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="34">既然都控制是否启用了，不如将名字也一并配置了，说干就干：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/53d3c8d565364c59a71bbbb5e790dc8e~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=Zn7w5%2FHAPpSpFsPZpoFmQ3IK6Ko%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="35">然后就是如果switch为fasle，则追加到list即可实现通道的影藏了，先将list置空：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/3f31a373391e4e04978ce2032223fb23~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=IqTJbTubSQdKTYWSQ5XNWMjXOT0%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="36">这个列表我们的页面的onload事件中修改：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/9f47bf95a6f64dc3be0a5057d8804d89~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=i0VtaIJQy2S37x4WC368xYZKOcE%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="37">打印：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p9-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5f16038e10cc465aba3f53099038609f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=0flnLXJqR4GaatNZkkUPdC3n8ew%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="38">页面：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/4f89f3d410664ef7a5df2aa70788c202~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=Il%2BJ5NtKovj2E46R7VvS8VwfXpM%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="39">尝试在配置中更改name：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/2e59e720e3344f09b90b2f054c10c0b6~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=LY%2BoeVxTd2Yo5FEfV5ZoREuvkjY%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="40">刷新页面，看看页面有没有更新：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/a5b6369db47c48e3b13068f85e7287bf~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=jF1%2BxVJJiVWjR3O%2BpIMpbBWPQww%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="41">名字搞定！</p>
<p data-track="42">接下来是是否启用，我们关掉一个：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/075dfacd30404437869e641f11ccdb58~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=TAb9KCGIs8XIB6okhctKpoe1tX4%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="43">看看页面：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/b1ad9a9114f543c39ff2be0f642ba256~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=uB6x0PheoGbCHBBdBg3mxXpxnwA%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="44">只有通道二了，通道一被过滤了，符合我们的要求，此时又有新的问题出现，我们这里是默认通道二的，如果通道二被关掉了，那么就要默认显示通道一，所以我们还需要加一个是否默认的配置，以及一个索引：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/e3a0bc1a26464b7098908144e6c416f9~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=%2FmRWu%2BoB4AMwfrzFFcZY%2BB5I9f4%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="45">更改一下load_list的代码：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/8c94d147eb1e4d0d9fa358208ee2f293~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=iz7%2F2i9xwP3n9Uxssa3fOkcQpEQ%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="46">让我们更改一下配置看看效果，此时的配置是两个通道都开启，但是通道一默认（以前是通道二默认）：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/8f90bca6d22846edbc81c4e777134378~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=aSkQBl5MzGOxxzAQdDMrMMA1Pwk%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="47">让我们看看页面效果：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/fedd9dfe43c140e9940a8576bb5d3df5~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=Alv1hq%2FOwC0mq4rEdFuv4oNYd0U%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="48">我们再把默认改成通道二：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/592376a4e30049c6ad58306e7d472139~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=bpCQydZpHS2cGXPW5zRoGf9cVRU%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="49">再看看页面效果：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/3783c9d521ce4505b0506d3e8adff336~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=GI4P1AofyGLjZwsEvxCAwsxykIo%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="50">达到效果，但是又有新的问题出现，如果我两个通道都关闭呢？</p>
<p data-track="51">那么就得兼容这种情况，如果真的两个通道都不可用，那么我们就得在页面提示功能不可用。</p>
<p data-track="52">我们把两个通道的配置都关掉：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/28261d2c3367485e9a904c55b7e037e2~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=fRsyPQTWuLZiiuf%2FihTHbE4na5E%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="53">页面布局改成如下：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/a5cd99e770814f52aa428e9d2b6d4357~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=jHxqAIN1osyr21KAPl%2BqIQc8myQ%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="54">页面效果如下：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/14248a469e7848ff934522f3dac781dd~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=EeKjdSwvoxwGi1pDC59Gfc%2FNBys%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="55">提示的配置我们也在后台配置，我们再加个配置：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7322948ec30f48d88f190c08a43e7783~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=96Gkx27ku8XDQb4Am7i0K7Rp78U%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="56">页面此时也可用了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/17e8244bdd43467faf1733f86896f0ae~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=VjgEoySQ%2Fx08W1ZGTOSBkAjqxBw%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="57">OK，到目前未知，我们完成两个任务，开始第三个任务：通道二的风格配置。</p>
<p data-track="58">我现在的风格配置是写死在代码里的：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/56826c13b6d34396845be1ce5b008556~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=NEVKtW%2B7dfS2qXyPfQo7UFSWPqM%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="59">直接把这块配置复制到配置里即可，这个配置是阿里云特有配置：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/51888aec40f64cf0ac9d6979ab5914e4~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=X0fEEGQ8yUy8OodspxI7qCtkx0Q%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="60">代码中style_select变量直接请空：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/19f5e4d28e554d5fb80f46e8b23f988a~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=DdqDSWJ%2FSpCPFSL7Vj526zW1g%2BE%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="61">再在获取配置的函数中设置：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/24cff8d009c34218963b9b063e5d23f0~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=LSHZBYJOoNiFnO2SwiCtCYqJnzM%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="62">页面效果保持一致：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/bdb8aca41a754c1f9a8127531d173163~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=SezVrVev6XC46CTGyzuTL05s2aA%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="63">第三个任务完成，开始第四个任务：两个通道数据隔离。</p>
<p data-track="64">目前通道一和通道二是共用一个结果变量的，实际效果就是，我在通道一上传了一张图片，切换到通道二还是这种图片，我想的效果是我在通道一上传了一张图片A，我切换到通道二后，上传区域是空白的，还可以上传，我就在通道二上传了一张图片B，此时我再切换会通道一，此时显示图片A。</p>
<p data-track="65">第一个问题：两个通道的共享变量问题，先从组件的fileList开始：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/dba6c6ce97c640f0b70cb1259db37dcc~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=dNVKNoWm1emraboJ6t9b4yZk8bw%3D">
<p class="pgc-img-caption"> </p>
</div>
<p class="syl-line-pure-english" data-track="66">data：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/86aa5187d1cb498bbad49785efebf9a9~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=3nt2aRzN5vX%2BKmfWaK4S12lO9iM%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="67">绑定的raw_images变量应该也要和分享时一样，不同的current不同的key，改造如下：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/15227829f975476abb82c0c66f1dc56d~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=TPXp1J5w2SvreFt7hLUVQU91l8Y%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="68">处理的函数：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/3d352c9d7f55413eb3714caff253efca~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=ZN8wm16EhHWVes7hMzjeCo5bM1I%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="69">输出：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5dcdcd1c79a54474a91df3edd3e8138f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=RccDg6BDUIbR4cz69YrGXJp3%2B3M%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="70">这样就变成了每个类型单独的数组了。</p>
<p data-track="71">我同时写了一个函数获取当前的类型：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/f1d87790e3854dcea9b0afb7a2fb5517~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=TqP%2FS3ybZf7NH3lyto2bx31WE9Y%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="72">所有读取和设置的地方再根据类型作为键即可，首先是组件：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/f0dc4e928be0482d9dcc3dd82f313229~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=nIcKCvA%2FW7dOXNuovW11XNOSnLk%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="73">删除和读取的地方：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/2aa2f16a63604328928e85d75a2b9524~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=8eDvlMCe9H1gAAPnMIM3SIGuLAg%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="74">追加图片的地方：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/35acdb08306843ecb0bf1c26c796244f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=pFOwC0G8dPhCzNLB7zb3oS0DYw0%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="75">这样就能实现数据隔离了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/0ad891f3ecea4153b8f1eae1722c2f2f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=6pOt6ycVYlV4OmD0WCW%2Bc52qi3o%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="76">第四个任务完成后，第五个任务：默认通道配置，这个其实已经在做第二个任务的时候已经完成了，设置某个通道为默认。</p>
<p data-track="77">还有个小修改，就是我在通道二上传了原图，我切换到通道一后，此时通道一是没有上传图片的，是不能点击转换按钮的，但现在的问题就是我在通道二上传了图片再切换到通道一，此时也是可以点击转换按钮，所以这个bug得修复一下。</p>
<p data-track="78">这里就需要标识下第一次上传的才是原图，后面的都是转换的结果图：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/565743f8aa3d4a028abba4904185160f~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=EJDtItvY6tyjiacP07BOGCDjLxU%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="79">第一次上传的地方：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/2d2b35b65fd64c329b8dfc6b74b6043e~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=3EtqQebB5Cr%2FavxOwWGNAGF4lr4%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="80">转换成功后追加的地方，默认false：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/66ca9e5a783d4353abd0bd6d77ff7852~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=8Is%2FfhDX2TO4kExKoznMjjzuvzE%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="81">这样就能动态切换转换按钮的激活属性了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7c432c0f133647c9a2dc541661fdbee2~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=D%2FSlRiWDch1g9JBx9XE2qVZP%2B2U%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="82">干脆把按钮的文字页一并配置好了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/4220ce3267034064accbd009bbd68db2~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=DugPoazFvX%2Fh1JtfO00SbQ7oHo8%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="83">接到页面：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/4cee6f755308463bb78c7cb1ceb3f98d~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=LKQdg2NJtWpoZtx7hLE2TeJui6o%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="84">到此基本当前页面所有的内容都可控制了。</p>
<p data-track="85">风格选择换了个颜色：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/faa4d5234c7e46059b9e8074c443b228~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=1RP3d%2FacwqijPwGWQ%2F48KxbYjts%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="86">个人觉得好看了点，哈哈，要是各位看官有好的想法还请评论区指点一下。</p>
<p data-track="87">把删除按钮也调大了点：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/d508f0ea89834362827cfe43a46362a3~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=QxFFYYiixaAe%2FuJa3YsQ%2Bj3OnI0%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="88">样式如下：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/d2bd31a263aa48af94a06a6eb18e2bcb~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=sXjPUlvINwCdTuZxvzOY4KBxybg%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="89">突然又想到一个修改点，如果后台配置通道二为默认，此时用户分享了通道一给好友，那么好友打开时也是通道一才对。</p>
<p data-track="90">那么分享时就得带参数了，在跳转的url后面加了一个index参数作为区别：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/c6fdf6a14b4e467d894c1ac5e6fa735b~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=QsSGQE215vpv1EKJ1cBGLAZyGyo%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="91">在onload中检测并覆盖设置：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/b527c323f2e54c3c8e60cbb2d75dcfbf~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=jwD1Bj1t%2BfR6QSSyY%2F1fjGGXBbM%3D">
<p class="pgc-img-caption"> </p>
</div>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/cbe7f12236a6439ba01c5218e29413ce~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=ALfQZO9KPba%2F7fHOY1pa2L8X%2FsI%3D">
<p class="pgc-img-caption"> </p>
</div>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/fb07f47695724268bcebc6ccec49f0fa~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=iVkRxdsgotfrs8umSY95gTnTuF4%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="92">搞定！</p>
<p data-track="93">本文到此到尾声了，我们总结一下本文所完成的功能有：</p>
<p data-track="94">1、两个通道分享时配置不同的标题、封面</p>
<p data-track="95">2、通道可选择是否启用</p>
<p data-track="96">3、通道二的风格配置</p>
<p data-track="97">4、两个通道数据隔离</p>
<p data-track="98">5、默认通道配置</p>
<p data-track="99">6、转换按钮可用判断</p>
<p data-track="100">7、打开分享的通道为分享时的通道</p>
<p data-track="101">接下来就是提审了，提审时间为本文发布时间后一点，现在时间为：2024-3-6 15:37:53。</p>
<p data-track="102">本地打包：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/4039614c83094e2f9f2ac056d95cf8b0~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=NCCfVemFot%2Ftwx%2FACr2U%2F8fYKx4%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="103">本地编译后再跑一遍流程测试下，看下现在的分包大小：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/bd4cc4bf744f42d8b9f28baf80060a03~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=IX0Se6Vs1cw3cvg0p23jAXKQm0k%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="104">提审：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/87650554a60e432d9b0d6dc8c4cda9f0~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=Z0imQl26BeRN9PrvA1fwDaB66Ls%3D">
<p class="pgc-img-caption"> </p>
</div>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/11f7e01398a44407b0665887e097dd2c~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=hUEbGicjjmSSyC6QIgmpc1xEfss%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="105">等审核，估计得明天啥时候了：</p>
<div class="pgc-img"><img class="syl-page-img lazyload" data-src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7eed03c712d7447682a697dc9ca64b77~tplv-tt-shrink:640:0.image?lk3s=06827d14&traceid=20240306180617857BFD4762ED3FC84623&x-expires=2147483647&x-signature=fLBfsLMK1cgJaC18XmkIkynLSAU%3D">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="106">小程序名：《一方云知》。欢迎大家使用，人像动漫化接口是免费使用的。</p>
<p data-track="107">这篇文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。</p>
<p data-track="108">想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。</p>
<p data-track="109">感谢你的阅读与支持，期待在未来的文章中与你再次相遇！</p><br><br>
来源：https://www.cnblogs.com/shuinanxun/p/18057255
頁:
[1]