文章类微信小程序 demo

目录

项目介绍

演示视频

界面设计

数据设计

代码展示

---

项目介绍

        此项目使用TDesign UI框架 开发的文章类微信小程序 demo，采用本地静态数据渲染。

        文章详情使用 towxml 插件 进行文本格式化。

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

开源地址： 温凯宇/文章微信小程序https://gitee.com/wen-kaiyu/article-wechat-mini-program

演示视频
文章小程序静态demo_哔哩哔哩_bilibili-, 视频播放量 43、弹幕量 0、点赞数 2、投硬币枚数 4、收藏人数 2、转发人数 0, 视频作者 凯宇同学呀, 作者简介 ，相关视频：输入链接改写文章，我发的又爆了50万阅读，ai头条太香了，编程助手 微信小程序带java后端，我发的头条文章爆了，这个工具真的好用啊，影刀自动化仿写文章，输出为带图的word，90秒完成一篇，【大厂文章速读】京东-微服务框架下，如何通过弱依赖原则保障系统高可用，【大厂文章速读】阿里-怎么在业务团队写好发消息的代码？，(实用) 1分钟 学会 CSDN 文章下载！，【亲测】今日头条图文创作，AI一天自动写50篇文章，单日轻松产出500+，可多号操作，小白轻松上手，头条作者文章批量采集软件 今日头条最新文章爆文采集软件工具 介绍视频，【大厂文章速读】得物-Disruptor在撮合引擎的实践https://www.bilibili.com/video/BV13M4m1S7dA/

界面设计

数据设计

{

"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>