文章图片


作为一个还算得上策划的策划 ， 其实经常还是会有很多想法冒出来的 ， 一部分会因为自己简单浅薄的可行性评估淘汰 ， 另一部分则会被能力和精力所打败 。
这不 ， 昨天是新年的第一天 ， 起床就在想新年是不是该有点什么新气象？新？要不就看看有什么新鲜事 。

好家伙 ， 哪怕只想了解最核心的 ， 也要去几个网站和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 安排上适配器和拦截器 。

1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132

// 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：

123456

// utils/api.jsimport service from './http.js'exportfunctionbaiduTrendApi(data) {    // ...

状态管理毕竟是免费api ， 一方面要考虑高频请求被ban的情况 ， 另一方面也想要避免滥用所带来的问题（我自己很热衷于开放各种免费服务 ， 深知滥用的烦恼） ， 所以需要结合 vuex 和 storage 来解决数据缓存 。

• 小米科技|骁龙8G2、一英寸主摄、120W充电！小米13 Ultra即将发布？
• 三星|2月1号发布！三星S23被曝光，真正的安卓小屏旗舰
• ie|2024年上半年才量产，我们还有必要期待小米汽车吗？
• |惊喜了，小米13、小米13 Pro手机那么快已实现现货开售了
• 小米|699元Redmi 12C开卖 员工：对比友商1500元线下机 竞争力也十足
• 小米|尺寸超越iPad！小米推出米家液晶小黑板多彩版：59元 一年续航
• 微信这个功能很强大，但是大部分人都不知道，一起来看看吧
• 1000什么是微小产品推拉力机？产品特点、生产商、生产厂家
• iPhoneX|手机丢了以后，小伙接到维修中心的电话：“拿一万块来换”
• 蒸馒头的时候加入小苏打可以让馒头口感更松软还是蒸出来更白

1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031323334353637383940414243

// 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: {    \tbaiduTrend: null // {content time      mutations: {    \tsetHotData(state data) {    \t\tif (data) {    \t\t\tif(data.content && typeof data.content == 'string'){    \t\t\t\tdata.content = tools.toHttps(data.content);          data.content = tools.fixObjStr(data.content);    \t\t\t\tdata.content = decodeURIComponent(data.content);    \t\t\t\tdata.content = JSON.parse(data.content);    \t\t\t    \t\t\tif(data.type == 'baidu'){    \t\t\t\tstate.baiduTrend = {content:data.content time:new Date().getTime();    \t\t\t\tuni.setStorageSync('baiduTrend' state.baiduTrend);    \t\t\t    \t\t    \t    \tgetHotData(state){    \t\tfor (letname of cacheNameList) {    \t\t\tletdata = https://mparticle.uc.cn/api/uni.getStorageSync(name); /t/t/tif (data) { /t/t/t/tlet time = data.time; /t/t/t/ttime = time || 0; /t/t/t/tletcurrent = new Date().getTime(); /t/t/t/tif(current - time < cacheTime) return; /t/t/t/tstate[name = data;    \t\t\t    \t\t    \t    )exportdefault store