微信小程式開發:頁面分享卡片、風格選擇、通道啟用等可配置

一方_self發表於2024-03-06

上文說到,我們部署了定時任務,但是有個地方忘記在上文寫了,這裡補上,就是定時任務的超時時間問題,超時時間有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。

本地打包:

微信小程式開發:頁面分享卡片、風格選擇、通道啟用等可配置

本地編譯後再跑一遍流程測試下,看下現在的分包大小:

微信小程式開發:頁面分享卡片、風格選擇、通道啟用等可配置

提審:

微信小程式開發:頁面分享卡片、風格選擇、通道啟用等可配置

微信小程式開發:頁面分享卡片、風格選擇、通道啟用等可配置

等稽核,估計得明天啥時候了:

微信小程式開發:頁面分享卡片、風格選擇、通道啟用等可配置

小程式名:《一方雲知》。歡迎大家使用,人像動漫化介面是免費使用的。

這篇文章就到這裡啦!如果你對文章內容有疑問或想要深入討論,歡迎在評論區留言,我會盡力回答。同時,如果你覺得這篇文章對你有幫助,不妨點個贊並分享給其他同學,讓更多人受益。

想要了解更多相關知識,可以檢視我以往的文章,其中有許多精彩內容。記得關注我,獲取及時更新,我們可以一起學習、討論技術,共同進步。

感謝你的閱讀與支援,期待在未來的文章中與你再次相遇!

相關文章