微信小程序｜搭建一个博客小程序
2024-04-26 09:35:43
文章目录
- 一、文章前言
- 二、创建小程序
- 三、功能开发
- （1）首页
- （2）领域页
- （3）博客详情页
- （4）个人中心页
一、文章前言
此文主要通过小程序搭建一个博客系统，实现博客的一些基础功能，也可以当做备忘录或者空间动态使用。
二、创建小程序
- 访问微信公众平台，点击账号注册。
- 选择小程序，并在表单填写所需的各项信息进行注册。
- 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。
- 下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。
三、功能开发
（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"}]}
- tabbar配置好后，进行首页的设计，大体包括轮播图，文章推荐列表等元素。轮播图需要用到swiper组件，文章推荐列表可以通过view将数据进行渲染即可。
<view style=""><swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500"><swiper-item><image src="../../images/banner2.png" mode="aspectFill" style="border-radius:30rpx;"></image></swiper-item>
</view>
<view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class='cuIcon-titles text-orange '></text> 文章推荐</view>
</view>
<view class="cu-card case no-card solid-bottom" bindtap="detail"><view class="cu-item shadow"><view class="image"><image src="../../images/banner3.jpg" mode="widthFix"></image><view class="cu-tag bg-blue">原力计划</view><view class="cu-bar bg-shadeBottom"><text class="text-cut">如何使用小程序搭建个人博客系统</text></view></view><view class="cu-list menu-avatar"><view class="cu-item"><view class="cu-avatar round lg" style="background-image:url(../../images/cat.jpg);"></view><view class="content flex-sub"><view class="text-grey">摔跤猫子</view><view class="text-gray text-sm flex justify-between">刚刚<view class="text-gray text-sm"><text class="cuIcon-attentionfill margin-lr-xs"></text> 10<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20<text class="cuIcon-messagefill margin-lr-xs"></text> 30</view></view></view></view></view></view>
</view>
（2）领域页
- 领域页主要是根据不同的领域展示不同的内容，这个页面主要用到scroll-view。
- 在data中先将领域类型定义好，在页面进行渲染，实现一个切换滚动的效果。
/*** 页面的初始数据*/data: {index:0,TabCur:0,fieldArray:['综合','C/C++','云原生','人工智能','前沿技术','软件工程','后端','Java','JavaScript','PHP','Python','区块链']},
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}"><view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{fieldArray}}" wx:key bindtap="tabSelect" data-id="{{index}}">{{item}}</view>
</scroll-view>
- 在页面定义view，先实现博客列表的样式，大致有封面图、标题、简介、浏览、点赞、评论数等标识。
<view class="cu-card article solid-bottom no-card"><view class="cu-item shadow"><view class="title"><view class="text-cut">一文教你从0到1了解区块链技术</view></view><view class="content"><image src="../../images/banner1.png" mode="aspectFill"></image><view class="desc"><view class="text-content">区块链采用分布式的存储架构，区块链的数据完整保存在区块链网络的所有节点上。</view><view><view class="text-gray text-sm"><text class="cuIcon-attentionfill margin-lr-xs"></text> 5<text class="cuIcon-appreciatefill margin-lr-xs"></text> 10<text class="cuIcon-messagefill margin-lr-xs"></text> 25</view></view></view></view></view>
</view>
（3）博客详情页
- 在首页以及领域页的博客列表增加点击事件，提供跳转进去博客详情页的入口。
detail(){wx.navigateTo({url: '/pages/detail/index',})},
- 博客详情页可以使用富文本渲染的方式，也可以通过基本标签的方式将数据进行渲染。
- 大体实现博客图片、博客内容以及底部的收藏及评价的入口。
<view class="cu-card article solid-bottom no-card"><view class="cu-item "><view class="title"><view class="text-cut">如何使用小程序搭建个人博客系统</view></view></view><view style="width:750rpx;padding:0 24rpx 24rpx 24rpx ;background:white;"><image src="../../images/banner3.jpg" style="width:702rpx;" mode="widthFix"></image></view>
</view>
<view class="cu-bar bg-white"><view class='action'><text class='cuIcon-titles text-orange '></text> 前言</view>
</view>
<view class='bg-white padding-xl'><view class='text-content'><view>如何使用小程序搭建个人博客系统</view><view class='margin-top-sm'>此文主要教大家如何通过小程序搭建个人博客系统，操作简单，易于上手。</view><view class='margin-top-sm'>大家在阅读此文的时候，可以跟着文章的顺序一步一步来开发。</view><view class='margin-top-sm'>中途遇到报错或者有什么不懂的地方可以在下方评论区留言或者私信博主。</view></view>
</view>
<view class="cu-bar foot input"><view class="action"><text class="cuIcon-favorfill text-red"></text></view><input class="solid-bottom" placeholder="说点什么吧" maxlength="300" ></input><view class="cu-btn bg-green shadow" >评论</view>
</view>
（4）个人中心页
- 个人中心需要获取微信用户头像及昵称等信息并用于展示。
<view class="topHead"><!-- 左侧容器 --><view class="topLeft"><!-- 头像 --><view class="headBox"><open-data type="userAvatarUrl" class="user-img"></open-data></view><!-- 昵称 --><view class="teamIcon"><open-data type="userNickName" class="user-nickname"></open-data><view class="uIcon"><image src="../../images/head.png" class="uIconImg"></image><view class="teamTitle">小程序用户</view></view></view></view><!-- 右侧容器 --><view class="rightBox"></view></view>
- 在下方增加一些快捷菜单，提供跳转其他模块的入口，大家可以根据自己的需求进行定义设计。
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"><view class="cu-item arrow"><view class="content" bindtap="CopyLink"><text class="cuIcon-notice text-red"></text><text class="text-grey">我的消息</text></view></view><view class="cu-item arrow"><view class="content" bindtap="CopyLink"><text class="cuIcon-favor text-yellow"></text><text class="text-grey">我的收藏</text></view></view><view class="cu-item arrow"><navigator class="content" url="/pages/about/log/log" hover-class="none"><text class="cuIcon-footprint text-green"></text><text class="text-grey">历史足迹</text></navigator></view><view class="cu-item arrow"><view class="content" bindtap="showQrcode"><text class="cuIcon-appreciatefill text-red"></text><text class="text-grey">赞赏支持</text></view></view><view class="cu-item arrow"><navigator class="content" url="/pages/about/test/list" hover-class="none"><text class="cuIcon-creativefill text-orange"></text><text class="text-grey">问题反馈</text></navigator></view></view>
微信小程序｜搭建一个博客小程序相关推荐
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 如何利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...
- 如何用 GitHub 从零开始搭建一个博客？
公众号关注 "GitHubDaily" 设为 "星标",带你玩转 GitHub! 作为目前全球最大的程序员社区,GitHub 能做的可不仅仅是托管源码这一操作, ...
- 运用BT在centos下搭建一个博客论坛
在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...
- 注册最便宜的xyz域名，低成本搭建一个博客
看到群里有人发考虑买xyz域名,于是就分享一下自己的xyz域名是如何购买的. .xyz,Internet网址域名后缀,全球通用的新顶级域名,简单来说就是网址中最右边一个"点"后面的 ...
- 【FastAPI 03】FastAPI快速搭建一个博客系统
标题:FastAPI快速搭建一个博客系统 大家好,我是Kuls. 这是<小白学FastAPI>系列的第三篇文章. 今天我们主要讲的是FastAPI快速搭建一个博客系统. 这里可能有些小伙伴 ...
- hexo 环境变量_小白使用 Github + Hexo 从 0 搭建一个博客
最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧. 前置准备 我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步.不得有台服务器么, ...
- 10分钟利用django搭建一个博客
以前老是听说ROR开发有多快多块,网上还有朋友为了证明这,专门制作了10分钟利用rails框架搭建一个简易博客的教程,最近学习django框架,觉得django给开发者的便捷也很多,心血来潮来写个10 ...
最新文章
- 一年过去了，25万月薪的AI工程师还存在吗？
- 奇怪,不能上GOOGLE了...你们也是这样吗?
- Nginx集群session管理的两种方式
- SAP Marketing和SAP Marketing Cloud的区别
- Mybatis——返回类型为 集合嵌套集合 应该如何处理
- 给你的执行力马上充值
- BHO插件操作IE浏览器，js调用C#方法
- Ubuntu16.04安装JDK1.8
- 记录如何深度拷贝一个属性存在循环引用的对象
- Java Lambda 表达式快速学习
- android的内存泄露有几种,Android中几种有可能会导致内存泄露的情况
- web逻辑思维题目_逻辑思维训练500题以及答案
- 实验06 分析IP报文结构实验报告
- 计算机系统运行费,关于同意计算机离港系统实行收费的批复
- 解决默认浏览器被劫持
- 纪录片《Code Rush》
- iOS iPhone设备判断大全，包含X系列和11
- LeetCode解题记录(409)——最长回文串
- 2021年中国全自动棉纱缠绕机市场趋势报告、技术动态创新及2027年市场预测
- 基于java springboot扫码点餐小程序源码(毕设)