本文正在参与「金石计划 . 瓜分6万现金大奖」

【博客小程序】专栏

【微信小程序】博客小程序，静态版别（一）准备工作

【微信小程序】博客小程序，静态版别（二）引进 lin-ui 组件、规划和开发文章页

【微信小程序】博客小程序，静态版别（三）规划和开发主页、个人关于页

前言

李老板又来催更了，千般 “求求” 我之下，持续开始开发。

零、简略整理一下当时的代码

0-1 大局引进 linui

lin-ui 组件的引进，从部分引进，挪到大局引进（即 app.json ）

0-2 大局开启自定义 tabBar

在 app.json 文件中的 “window” 中添加 "navigationStyle": "custom"

{
  "pages": [ ...
  ],
  "window": {
    ...
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  ...
}

相同的文件里（app.json）添加 “tabBar” 的相关信息

  "tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#3963bc",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "images/tabBar/_home.png",
      "selectedIconPath": "images/tabBar/home.png"
    }, {
      "pagePath": "pages/about/about",
      "text": "作者",
      "iconPath": "images/tabBar/_me.png",
      "selectedIconPath": "images/tabBar/me.png"
    }]
  },

再找四张 icon 图片

一、规划主页

依据李老板的需求来规划这个主页。

要巨大

要有简洁

还要让人觉得格式大的。

组织！

简略用 ppt 画了一会儿，主页，简略，巨大（很高），格式很大！

二、开发主页

2-1 引进组件和代码写入

加一点点组件（capsule-bar、notice-bar、search-bar、segment 等）

2-2 静态数据

加点静态数据

2-3 作用展现

三、规划个人关于页

环绕简略，巨大，格式大持续规划个人关于页。又简略用了一下 ppt 技术。

搞定，开始开发！

四、开发个人关于页

4-1 挑图坐标系（引进 echarts 组件）

Demo 实例和组件的源码下载地址：github.com/ecomfe/echa…

官方 README.md 教程

在这儿，我们选择雷达图坐标系组件。

4-2 雷达图坐标系组件的使用

参数参阅地址：Documentation – Apache ECharts

changeTabs() 办法和雷达图的使用（activeKey）

雷达图坐标系组件使用的流程

4-3 对应代码对应的作用

4-4 作用展现

五、代码解说

代码解说这块，因为代码比较简略，并且在源码中、办法里也有注释和简略解说，这儿就省掉了。（如有疑惑，或许更好的意见欢迎留言谈论）

源码地址（同步更新）

微信开发者-代码办理地址：笔者手记 (git.weixin.qq.com)
Gitee地址：笔者手记 (gitee.com)

小程序完整体会二维码

文章小尾巴

文章写作、模板、文章小尾巴可参阅：《写作“小心思”》
　　感谢你看到最终，最终再说两点~
　　①如果你持有不同的观点，欢迎你在文章下方进行留言、谈论。
　　②如果对你有帮助，或许你认可的话，欢迎给个小点赞，支持一下~
　　　我是南边者，一个热爱计算机更热爱祖国的南边人。
　　（文章内容仅供学习参阅，如有侵权，非常抱愧，请立即联络作者删去。）