小程式入口構造工具 & 二維碼測試工具
作者 | 吳鵬和
本文將介紹我們小程式中隱藏的兩個工具頁面。原理雖不復雜，收益卻實實在在，或許也能給諸君帶來啟發。
入口構造工具
痛點
-
PM&運營 投放連結
PM&運營每次投放新入口時，都需要找FE要頁面連結。投放多少連結就要找FE多少次，一方面相互之間的溝通等待會耗掉不少時間，另一方面詢問/回覆過程會打斷對方手頭的工作，影響狀態。
關鍵是大多時候這些連結只是需要改個渠道引數，並不涉及結構上的調整，完全可以由PM/運營自行修改。
然而要向所有PM&運營全面科普url構造規則，並沒有想象中容易；各種連結構造需求就這樣在無形中不斷消耗雙方的精力。
-
FE&QA 開發/測試線下功能
開發/測試沒有線上入口的新功能時，經常需要構造一個臨時入口供以訪問。
可以修改線下介面配置運營位作為訪問入口，但是一則運營位有限，二則不能一站式操作；也可以修改程式碼加個臨時入口，但是會汙染程式碼，難保不會帶到線上。
這樣的情形反覆出現也是挺麻煩的。
idea
開發一個專門的入口構造頁面，直接提供給PM、運營、FE、QA等各方使用。需要什麼連結需要什麼入口，直接自助生成，無需一次次反覆溝通/構造。
效果
通用入口構造：
如圖所示，在入口構造頁面中，使用者可以直接輸入FE提供的url模板並自助修改連結引數，從而獲得所需連結。同時支援：
-
直接開啟該連結，進行檢視、自測；
-
生成以該連結作為落地連結的分享卡片，從而以落地頁的形式開啟檢視；
-
將該連結複製到剪貼簿，供以投放；
-
生成以該連結作為落地連結的二維碼，供以投放。
內嵌M頁入口構造：
如圖所示，內嵌M頁的小程式連結構造同樣支援類似功能。
實現
-
需求轉譯
將連結引數以普通使用者能理解的形式展現出來，並允許其直接修改，再配以說明文案。以此抹平url構造規則造成的技術門檻。 -
入口構造
頁內入口 直接以按鈕跳轉實現，外部入口 以分享卡片進行模擬。 -
連結輸出
使用wx.setClipboardData介面經由剪貼簿貼上使用。 -
初始入口
生成二維碼作為入口構造頁面自身的初始入口；將工具頁面分享出去，保留分享卡片作為初始入口。
意義
-
效率
入口構造工具使得PM、運營、FE、QA等各方可以自助、高效地構造所需連結/入口，有效節省了重複溝通成本，並在一定程度上提高了開發、測試、投放效率。 -
質量
入口構造工具提供的連結生成功能和預覽功能可以在一定程度上避免/發現連結拼接失誤等人工疏漏，提高整體交付質量。
二維碼測試工具
痛點
掃描二維碼時會直接進入線上版小程式，導致在開發/測試階段難以對二維碼相關功能進行有效的檢測和把控。
早期只能先冒險上線，然後進行線上驗證，萬一有問題再修復再重新上線，導致二維碼相關功能除錯效率低、上線風險高。
後來開發者工具支援通過二維碼編譯，管理後臺也支援回滾，相對來說，二維碼相關功能可控性強了很多；但是對於QA、PM、運營、第三方接入業務等小夥伴來說，二維碼的檢查、測試還是很無力。
idea
開發一個專門的二維碼測試頁面，支援在當前開發版/體驗版/線上版小程式中對二維碼進行檢視和預覽。
效果
如圖所示，在二維碼測試頁面中，使用者可以：
-
直接檢視二維碼的編碼資訊，包括落地連結、引數等；
-
在當前開發版/體驗版/線上版小程式中開啟二維碼落地連結；
-
生成與二維碼擁有相同落地連結的當前開發版/體驗版/線上版小程式的分享卡片。
實現
-
檢視二維碼資訊
使用wx.scanCode介面可以讀取二維碼資訊，包括落地頁、引數等。 -
在當前開發版/體驗版/線上版中開啟二維碼
使用wx.scanCode介面獲取落地連結，使用wx.navigateTo等介面在當前開發版/體驗版/線上版小程式中開啟目標頁面。
-
在當前開發版/體驗版/線上版中以落地頁的形式開啟二維碼
使用wx.scanCode介面獲取落地連結，生成相同落地連結的分享卡片，訪問分享卡片以模擬開發版/體驗版下掃碼開啟小程式。
意義
-
效率
檢視二維碼資訊可以有效提高相關功能除錯效率；
直接在當前開發版/體驗版中開啟二維碼可以有效提高相關功能測試效率，特別是對於QA等非前端人員。 -
質量
二維碼測試工具便於QA在穩定環境充分測試二維碼相關功能，從而提高小程式交付質量。
值得一提的是，這兩個工具都是FE自發思考自發實現的，產出時小夥伴們表示“很驚喜”。
很多時候，主動去思考、發現、分析、解決痛點，能讓你貢獻出意料之外的價值，共勉。
