【微信小程序】博客小程序，静态版本（二）引入 lin-ui 组件、设计和开发文章页

【博客小程序】专栏

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

【微信小程序】博客小程序，静态版本（二）引入 lin-ui 组件、设计和开发文章页

【微信小程序】博客小程序，静态版本（三）设计和开发首页、个人关于页

代码开发流程

1. 引入 lin-ui 组件
2. 设计文章页
3. 开发文章页
4. …

引入 lin-ui 组件

lin-ui 官方

可以看到，官网有两种方式可以进行下载安装组件代码。

方式一（ npm 安装）

方式二（源码下载安装）

（这里选择下载源码，去对应 GitHub 下载）
林间有风（lin-ui）
官网下载

安装 lin-ui 组件代码

简单测试引用情况

看看 Lin-UI 官方提供的组件（挑个简单的进行测试一下）

按钮 button 和 icon 的简单测试

代码与组件引入成功效果展示

相关代码

index.json 文件

{
  "usingComponents": {
    "l-button": "/dist/button/index",
    "l-icon": "/dist/icon/index"
  }
}
1
2
3
4
5
6

index.wxml 文件

<l-button type="default">defaultl-button>
<l-icon name="setting" color="red"/>
1
2
3

出现 lin-ui 依赖加载、显示出错的问题

在 project.config.json 文件里添加以下代码（微信官方介绍）

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false
1
2

然后，进行清除所有缓存，点击重新编译

设计文章页

准备工作完成了，又在李网友的 “苦苦哀求” 下，我们就简单的对博客中的一篇文章，根据它的属性和特征进行剖析。

文章自身的构造就做个简单的，标题、内容、图片、作者、创建时间、浏览量、点赞量、收藏量

但是，没有 ui 图，还不确定要做成什么样的类型。于是…

行吧，我就又简单做一个吧（用 ppt 简单做了个图）

开发文章页

做完了设计工作，开始着手对着设计图进行开发。

准备工作的修改部分

1. 之前的 dist 文件夹，可以直接快捷键 F2 进行重命名
2. 在最外层的 app.json 文件里，在 pages 添加 "pages/article/article",
3. app.json 文件添加完成后，会有对应目录（即 pages/article 目录下），有生成 article.js, article.json, article.wxml, article.wxss 四个文件。打开 article.json 文件，添加所需要到 lin-ui 的组件，同时添加标题 “我的博客”。

article.json 文件里的代码

{
  "usingComponents": {
    "l-skeleton": "/lin-ui/skeleton/index",
    "l-grid": "/lin-ui/grid/index",
    "l-grid-item": "/lin-ui/grid-item/index",
    "l-icon": "/lin-ui/icon/index",
    "l-card": "/lin-ui/card/index"
  },
  "navigationBarTitleText": "我的博客"
}
1
2
3
4
5
6
7
8
9
10

整体开发介绍

我们把它分为三部分去做）

1. 作者、创建时间
2. 点赞、评论、阅读、收藏
3. 首图、标题、内容
   

（骨架，是骨架屏，就是数据未加载完成时可以展示的效果。lin-ui 官方传送门）

部分代码讲解

这里其他部分都是比较简单，就介绍一下这个点赞和收藏的操作方法。

由于数据需要达到灵活性，这里数据部分大概分，文章主体（对象）、文章相关主体（对象）。

其中，文章主体（对象）是 article；文章相关主体（对象）是 userArticle。

  data: {
    isFirstLoading: true, // 是否正在第一次加载（配合骨架屏）
    article: { // 文章对象
      author: "南方者",
      createTime: "2022年11月15日 20:10",
      title: "我的第一篇博客——介绍冰糖葫芦",
      content: "首先，关于我的冰糖葫芦，它很好吃！每次路过冰糖葫芦摊铺，我都会买一串。\n其次，女生也非常爱吃；\n最后，冰糖葫芦等同于女朋友。\n冰糖葫芦又叫糖葫芦，在天津又称糖墩儿，在安徽凤阳叫作糖球。冰糖葫芦是中国传统小吃，起源于南宋，它是将野果用竹签串成串后蘸上麦芽糖稀，糖稀遇风迅速变硬。北方冬天常见的小吃，一般用山楂串成，糖稀冻硬，吃起来又酸又甜，还很冰。\n在宋朝年间便开始了古式的做法，《燕京岁时记》记载：冰糖葫芦，乃用竹签，贯以山里红、海棠果、葡萄、麻山药、核桃仁、豆沙等，蘸以冰糖，甜脆而凉。茶楼、戏院、大街小巷到处可见，现已成为中国传统小吃。冰糖葫芦具有开胃、养颜、增智、消除疲劳、清热等作用。\n（注：这段介绍来自百度百科。）",
      img: "/images/sweet.png",
      starSum: 10, // 收藏数
      readSum: 1299, // 浏览数
      likeSum: 133, // 点赞数
      chatSum: 12, // 评论数
    },
    userArticle: { // 当前用户对该文章的操作情况
      isStar: false, // 是否已点赞
      isLike: false, // 是否已收藏
    },
    downColor: "#000", // 未操作的 icon 颜色
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

gridTap() 方法，当点击的时候才进行触发。（代码中有注释

  // 点赞、评论、阅读、收藏触发
  gridTap(e) {
    var that = this;
    // console.log(e)
    var {
      key
    } = e.detail
    // 不存在 或 不是点赞和收藏的直接返回
    if (!key || "like,star".indexOf(key) == -1) {
      return;
    }
    var {
      userArticle,
      article
    } = that.data
    if ("like" == key) { // 点赞的情况
      if (userArticle.isLike) { // 当前是已点赞状态
        // 点赞数 - 1
        article.likeSum = article.likeSum - 1;
      } else {
        // 点赞数 + 1
        article.likeSum = article.likeSum + 1;
      }
      userArticle.isLike = !userArticle.isLike;
    } else if ("star" == key) { // 收藏的情况
      if (userArticle.isStar) { // 当前是已收藏状态
        // 收藏数 - 1
        article.starSum = article.starSum - 1;
      } else {
        // 收藏数 + 1
        article.starSum = article.starSum + 1;
      }
      userArticle.isStar = !userArticle.isStar;
    }
    that.setData({ // 重新赋值
      userArticle,
      article
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

由于在代码中也有比较详细的注释，这里就不再过多展示。（了解更多可同步源码地址~ ）

效果展示

源码地址（同步更新）

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

Gitee地址：笔者手记 (gitee.com)

小程序完整体验二维码

文章小尾巴

文章写作、模板、文章小尾巴可参考：《写作“小心思”》

　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　　我是南方者，一个热爱计算机更热爱祖国的南方人。
　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）