开发一个简单的热搜微信小程序

作为一个还算得上策划的策划，其实经常还是会有很多想法冒出来的，一部分会因为自己简单浅薄的可行性评估淘汰，另一部分则会被能力和精力所打败。

这不，昨天是新年的第一天，起床就在想新年是不是该有点什么新气象？新？要不就看看有什么新鲜事。

好家伙，哪怕只想了解最核心的，也要去几个网站和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