獻給所有技術內容創作者~猿創聚合助手小程式開發難點解析

語言: CN / TW / HK
時間 2021-10-13 16:15:04

本文已參與「掘力星計劃」，贏取創作大禮包，挑戰創作激勵金。

前言

  • 2020年11月

我重新開始了原創技術內容創作，至今在掘金髮表了原創文章60篇，47.7w閱讀，1.5w贊。

image.png

現在的技術內容作者都不只在單一平臺釋出內容了，都是文章、長視訊，短視訊一把抓。 我經過一番摸索和嘗試，目前確定主要在以下平臺釋出原創內容

  • 掘金：技術文章
  • B站：教學視訊
  • 微信公眾號：個人原創內容標記平臺

做著做著我覺得自己需要有一個地方可以方便的將各個平臺裡的內容聚合起來，讓某一載體的讀者可以通過這個地方看到我其他載體的內容，未來還可以在這個地方做一些讀者互動，比如抽獎，討論組之類...

並且我希望這個地方所用到的技術都是我親手完成的，都是我曾經文章或視訊裡寫到過的技術點

  • 2021年8月31日

我開始策劃、設計、開發這個小程式，歷經30次迭代

image.png

這裡面踩的坑無數，因為微信的稽核是非常嚴格的，尤其又是個人註冊的小程式，很多內容不是你想做就能做的。所以沒做過的小程式開發小夥伴可能無法理解有些功能為什麼那麼設計？就不能怎麼怎麼樣嗎？因為真的就是不能。

功能點概覽

猿創聚合助手.001.jpeg

關鍵技術點的實現

  • 聚合

聚合本身沒什麼難度，無非是提取資料來源平臺的API。但麻煩的地方在於，個人小程式是不允許使用webview，導致為了跳轉原網頁，我只好採用客服訊息的機制來下發網址。

  1. 客服訊息教程原文：http://juejin.cn/post/7002866939026472974

  2. 高贊文章滑卡元件教程：http://juejin.cn/post/6906143905922678797

  3. 分享

原本這個小程式只給我自己用的話是不用這麼麻煩的。現在要能夠給大家用，那麼分享的時候就得攜帶大家的配置資訊。在進入小程式後，先檢查是否有攜帶配置資訊，如果有，則使用攜帶的配置資訊。

  • 引導關注公眾號

在微信小程式裡，引導關注公眾號只能用<official-account>元件，並且只能關聯和小程式主體相同的公眾號。那怎麼才能實現引導關注大家自己配置的公眾號資訊呢？答案還是利用客服訊息機制來實現，只是這裡下發的是公眾號的二維碼。

通過微信id或微信原始id來生成二維碼

~~~javascript http://open.weixin.qq.com/qr/code?username=ezfullstack ~~~

在uniCloud雲函式裡將二維碼圖片讀取並上傳至微信的媒體素材介面

~~~javascript let imageRes = await uniCloud.httpclient.request(url);

let buff = new Buffer(imageRes.data);

let form = new FormData(); form.append('media', buff, { filename: ${Date.now()}.jpg, contentType: 'image/jpeg' })

const access_token = await getAccessToken();

const res = await uniCloud.httpclient.request("http://api.weixin.qq.com/cgi-bin/media/upload?access_token="+access_token+"&type=image",{ method:"POST", content: form.getBuffer(), headers: form.getHeaders(), dataType:"json" }) ~~~

拿到返回的media_id就可以利用客服訊息發給想要關注的使用者了

~~~javascript var res = await sendCustomerServiceMessage({ touser:touser, msgtype:"image", image: { "media_id":media_id } }); ~~~

  • 快取機制

uniCloud免費的雲空間效能一般，加上雲函式本身冷/熱啟動較大的差異，必須要好好設計一下快取機制。在這個小程式裡我總共設計了三種快取機制。

1. cloudStorage

在雲函式中http請求的快取機制，利用雲資料庫來做資料快取，避免每次請求第三方介面資料的時候都重新請求，一段時間內的資料從資料庫快取獲得。 2. localStorage 前端的本地資料儲存，小程式退出時不銷燬。 3. memoryStorage 小程式生命週期之內的資料快取，避免一段時間內多次請求雲函式，退出即銷燬。

  • 使用者隔離

各位技術內容作者的粉絲群體有交集的部分，可以在小程式中切換資料來源，沒有交集的也無法得知其他的資料來源，充分保障各自粉絲群體的獨立性。

image.png

為什麼我會做這個，我能收穫什麼？

原本就是我的個人需求，即使沒有其他人用，這個工具是能滿足我自己需要的。後來做著做著發現也許和我一樣的內容創作者們也需要這樣的工具，所以做成了開放型配置，大家都可以用。

希望這個工具能為技術內容創作者帶來便利，讓技術內容作者們更加專注的創作內容，而無須想方設法的引流導流。

如果你和我一樣是技術內容創作者，請使用微信搜尋"猿創聚合助手"小程式

為什麼資料來源只有掘金和B站？

因為我只用掘金和B站...未來也不會更新，我愛掘金，未來如果掘金有視訊載體，我再把B站給替換掉...

o(*￣3￣)o

「」
「」