# 文章微信小程序

**Repository Path**: wen-kaiyu/article-wechat-mini-program

## Basic Information

- **Project Name**: 文章微信小程序
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-17
- **Last Updated**: 2024-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目介绍

​	此项目使用TDesign UI框架 开发的文章类微信小程序 demo，采用本地静态数据渲染。文章详情使用 towxml  插件 进行文本格式化。

​	项目难点在于主页的选项卡 对文章进行分类 wx:for的嵌套处理。

## 演示视频

  文章小程序静态demo https://www.bilibili.com/video/BV13M4m1S7dA/
## 运行
  1. `npm install`
  2. 打开微信开发者工具 编译

## 界面设计

![image-20240817214916771](./img/image-20240817214916771.png)![image-20240817215428754](./img/image-20240817215428754.png)![image-20240817220727485](./img/image-20240817220727485.png)

## 数据设计

{

  "id": 1, // 文章id

  "title": "MySQL约束：数据完整性守护者",//文章题目

  "content": "学习编程需要掌握基础语法、算法和数据结构等。",// 文章简介

  "author": "张三", //作者

  "create_time": "2023-06-20T10:00:00Z",

  "update_time": "2023-06-21T15:30:00Z",

  "type_id": "2",// 文章类别

  "tags": ["编程", "学习", "基础语法"],// 标签

 },



## 代码展示

```
<!-- 选项卡 -->
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange">
  <!-- 默认选项id  defaultValue -->
  <t-tabs id="tabs" defaultValue="{{1}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs" t-class-content="custom-panel">
    <block wx:for="{{articleTypesList}}" wx:key="*this" wx:for-item="item">
      <t-tab-panel label="{{item.label}}" value="{{item.id}}" style="{{tabPanelstyle}}">
        <!-- 不同的分类 不同的样式wx:if="{{item.id%2===1}}" -->
        <view style="width: 100%;" >
          <!-- 文章类型和选项id 一样 -->
          <block wx:for="{{articleList}}" wx:key="*this" wx:for-item="item1">
            <block wx:if="{{item1.type_id === item.id}}">
              <t-cell class="t-cell-img" title="{{item1.title}}" description="{{item1.content}}" align="top" image="https://tdesign.gtimg.com/mobile/demos/swiper1.png" hover bordered="{{true}}" bind:tap="ToArticlePage" data-id="{{item1.id}}"/>
            </block>
          </block>
        </view>
      </t-tab-panel>
    </block>
  </t-tabs>
</t-popup>
```