作為一個還算得上策劃的策劃，其實經常還是會有很多想法冒出來的，一部分會因為自己簡單淺薄的可行性評估淘汰，另一部分則會被能力和精力所打敗。
這不，昨天是新年的第一天，起床就在想新年是不是該有點什么新氣象？新？要不就看看有什么新鮮事。
好家伙，哪怕只想了解最核心的，也要去幾個網站和App才行。那我自己能不能統一到一個地方看呢？要不就做個網站或者小程序吧。做飯的時候一邊查資料一邊整理思路。本來是打算用爬蟲來實現的，這樣數據也很可控。但是轉念一想，如果有現成api豈不是更快？
結果還真能找到一些，雖然實際上離我的需求還有點距離，但不管怎樣，先把東西做出來看有沒有用，如果真的可用再快速迭代。
選型
這個階段沒花什么功夫，UniApp直接就被選中，主要是可用的插件庫很豐富，對 'node modules' 的支持也是很不錯的。
插件
選擇依賴也沒花太多時間。之前就在跟李嘉吐槽，有個項目在插件搭配上很糟心，總想著用一些看起來好像很酷炫的東西，但其實背后結構和設計思路一團糟。這次的ui庫直接用uni-ui，網絡庫直接用axIOS，確保最快最穩的開發出來。
PS：有個小插曲，直接npm install axios --save安裝最新的版本是跟 uniapp 不兼容的，一定要用^0.27.2版本才行。
其他方面，布局方面用到了 limm-windi-css-uniapp ，圖片懶加載用到了 zero-lazy-load。還有一些日期、轉換類的js小工具就用的自己以前建起來的私人類庫。
搭建網絡
先給axios安排上適配器和攔截器。
// utils/http.jsimport Vue from 'vue'import axios from 'axios'axios.defaults.adapter = function(config) {// ...}const service = axios.create({// ...})service.interceptors.request.use(config => {// ... returnconfig; }, error => {// ... returnPromise.reject(error); });service.interceptors.response.use(res => {// ... returnres.data;}, error => {// ... returnPromise.reject(error);})exportdefault service
然后再統一管理API：
// utils/api.jsimport service from './http.js'exportfunctionbaiduTrendApi(data) {// ...}
狀態管理
畢竟是免費api，一方面要考慮高頻請求被ban的情況，另一方面也想要避免濫用所帶來的問題（我自己很熱衷于開放各種免費服務，深知濫用的煩惱），所以需要結合vuex和storage來解決數據緩存。
// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const cacheNameList = ["baiduTrend", "..."];const cacheTime = 3 * 60 * 60 * 1000;const store = new Vuex.Store({state: {baiduTrend: null, // {content, time}},mutations: {setHotData(state, data) {if (data) {if(data.content && typeof data.content == 'string'){data.content = tools.toHttps(data.content);data.content = tools.fixObjStr(data.content);data.content = decodeURIComponent(data.content);data.content = JSON.parse(data.content); }if(data.type == 'baidu'){state.baiduTrend = {content:data.content, time:new Date().getTime()};uni.setStorageSync('baiduTrend', state.baiduTrend); }}},getHotData(state){for (letname of cacheNameList) {letdata = uni.getStorageSync(name); if (data) {let time = data.time; time = time || 0; letcurrent = new Date().getTime(); if(current - time < cacheTime) return;state[name] = data; }}}, },})exportdefault store
界面
咱們主要是搞功能，先把東西呈現出來就行了，不搞復雜。
除了圖片外，都是uni-ui的組件，簡單但是高效，好像沒什么好講的。直接上圖吧
其實我自己看起來是很難受的，因為好歹也是學過平面設計和網頁設計的人。但是為了效率和進度，必須忍住
發布
結果沒想到最花時間的是這一步。我以為個人小程序只是不許發布自己加工的信息而已，沒想到這種公共接口提供的信息也沒法審過。
來回折騰了2次，加上要等審核，時間直接從1月1日來到了1月2日。最后果斷放棄個人小程序這條路，直接換公司以前廢棄的小程序號來審核試試吧。
思考
其實一開始并沒有想到這個東西會有什么大用。但是在快要做完的時候，突然發現這不就是之前學運營課的時候常說要參考的互聯網熱點嗎？ 如果真的有用就太好了。個人是特別喜歡做實用的東西。
希望小程序能早點審過，到時候大家幫忙測一測，也看看還可以怎樣擴展用途。我也會抽空繼續完善。
[2023年01月02日原始發布于本作者博客]
> 閱讀原文：https://www.gsgundam.com/2023/01/2023-01-02-z00-hot-search-keyword-of-trending-wechat-miniprogram/#article0-1
