文章目录

• • 一、文章前言
  • 二、创建小程序
  • 三、功能开发
  • • （1）首页
    • （2）领域页
    • （3）博客详情页
    • （4）个人中心页

一、文章前言

此文主要通过小程序搭建一个博客系统，实现博客的一些基础功能，也可以当做备忘录或者空间动态使用。

二、创建小程序

1. 访问微信公众平台，点击账号注册。

2. 选择小程序，并在表单填写所需的各项信息进行注册。

3. 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。

4. 下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。

三、功能开发

（1）首页

1. 在实现首页这个页面前，先把tabbar配置好。

    "tabBar": {"color": "#666666","selectedColor": "#FF0000","borderStyle": "white","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/images/003.png","selectedIconPath": "/images/004.png"},{"pagePath": "pages/field/index","text": "领域","iconPath": "/images/016.png","selectedIconPath": "/images/013.png"},{"pagePath": "pages/center/index","text": "我的","iconPath": "/images/014.png","selectedIconPath": "/images/01.png"}]}

2. tabbar配置好后，进行首页的设计，大体包括轮播图，文章推荐列表等元素。轮播图需要用到swiper组件，文章推荐列表可以通过view将数据进行渲染即可。

 文章推荐

原力计划如何使用小程序搭建个人博客系统摔跤猫子刚刚 10 20 30

（2）领域页

1. 领域页主要是根据不同的领域展示不同的内容，这个页面主要用到scroll-view。

2. 在data中先将领域类型定义好，在页面进行渲染，实现一个切换滚动的效果。

    /*** 页面的初始数据*/data: {index:0,TabCur:0,fieldArray:['综合','C/C++','云原生','人工智能','前沿技术','软件工程','后端','Java','JavaScript','PHP','Python','区块链']},

{scrollLeft}}">{index==TabCur?'text-green cur':''}}" wx:for="{{fieldArray}}" wx:key bindtap="tabSelect" data-id="{{index}}">{{item}}

3. 在页面定义view，先实现博客列表的样式，大致有封面图、标题、简介、浏览、点赞、评论数等标识。

一文教你从0到1了解区块链技术区块链采用分布式的存储架构，区块链的数据完整保存在区块链网络的所有节点上。 5 10 25

（3）博客详情页

1. 在首页以及领域页的博客列表增加点击事件，提供跳转进去博客详情页的入口。

    detail(){wx.navigateTo({url: '/pages/detail/index',})},

2. 博客详情页可以使用富文本渲染的方式，也可以通过基本标签的方式将数据进行渲染。

3. 大体实现博客图片、博客内容以及底部的收藏及评价的入口。

如何使用小程序搭建个人博客系统

 前言

如何使用小程序搭建个人博客系统此文主要教大家如何通过小程序搭建个人博客系统，操作简单，易于上手。大家在阅读此文的时候，可以跟着文章的顺序一步一步来开发。中途遇到报错或者有什么不懂的地方可以在下方评论区留言或者私信博主。

评论

（4）个人中心页

1. 个人中心需要获取微信用户头像及昵称等信息并用于展示。

  小程序用户

2. 在下方增加一些快捷菜单，提供跳转其他模块的入口，大家可以根据自己的需求进行定义设计。

  我的消息我的收藏历史足迹赞赏支持问题反馈