项目概述

将传统的Web博客完美移植到了微信生态中。这个项目不仅实现了博客的核心功能，还针对移动端用户体验进行了深度优化，支持夜间模式、分类浏览、搜索，流量主等丰富功能。

1. 首页设计

首页采用了现代化的卡片式布局，包含：

• 轮播图展示热门文章
• 最新文章列表
• 热门文章推荐
• 上拉加载更多
• 下拉刷新

// 文章列表加载
loadLastestArticles() {
    const that = this;
    wx.showLoading({ title: '加载中' })
    const page = that.data.page;
    const count = that.data.pageSize;
    wx.request({
        url: app.globalData.baseUrl + 'article_list&page=' + page + '&count=' + count,
        method: 'GET',
        success: function (res) {
            if (res.data.code == 0) {
                that.appendArticleList(res.data.data.articles)
            }
        }
    })
}

2. 夜间模式实现

为了提升用户体验，实现了完整的夜间模式切换：

// 全局夜间模式切换
toggleDarkMode: function() {
    const newDarkMode = app.toggleDarkMode();
    this.setData({ isDarkMode: newDarkMode });

    wx.showToast({
        title: newDarkMode ? '已切换到夜间模式' : '已切换到日间模式',
        icon: 'none',
        duration: 1500
    });
}

3. 用户授权系统

集成了微信用户授权功能，支持：

• 微信头像获取
• 用户昵称显示
• 数据持久化存储
• 授权状态管理

技术亮点

1. 响应式设计

针对不同屏幕尺寸进行了适配，确保在各种设备上都有良好的显示效果。

2. 性能优化

• 图片懒加载
• 分页加载
• 骨架屏loading
• 缓存机制

3. 用户体验

• 流畅的页面切换动画
• 友好的错误提示
• 直观的操作反馈
• 无障碍访问支持

如何部署？

准备工作

• 准备已完成备案和认证的小程序账号，推荐企业主体认证，个人主体认证微信限制较多。
• 准备服务器和域名，并使用 emlog 搭建一个站点，后台开启API（系统-设置-API-开启API）
• 
• 自己电脑上安装微信开发工具：微信开发工具
• 下载小程序源码，见文章尾部。
• 登录微信小程序平台，开发与服务 - 开发管理 - 服务器域名，request合法域名中填写站点的域名，如：https://www.1c2d.com

新建项目

开启微信开发工具，创建一个新的小程序项目。

• 项目名称：随意填写
• 目录：选择小程序源码所在目录
• APPID：填写微信小程序账号的 appid，登录微信小程序平台 - 开发与服务 - 开发管理 - AppID(小程序ID)
• 后端服务：不使用云服务

配置发布

• 在 miniprogram 目录找到 app.js 文件，修改其中配置：api密钥、api地址、小程序名称、介绍等信息
• 
• 微信开发工具点击右上角上传，将小程序发布到微信小程序平台
• 登录微信小程序平台，在版本管理中进行提交审核，等待审核通过，即可正式发布。

开源地址