微信小程序｜搭建一个博客小程序

已于 2023-09-06 18:17:49 修改
阅读量5.2k 收藏 90
点赞数 46
分类专栏： 微信小程序 文章标签： 微信小程序 小程序 微信 个人博客
于 2022-11-22 17:36:10 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/weixin_42794881/article/details/127985984
版权
微信小程序 专栏收录该内容
69 篇文章 918 订阅 ¥9.90 ¥99.00
订阅专栏
了解本专栏 订阅专栏 解锁全文
摔跤猫子
关注
  • 46
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 73
    评论
专栏目录
订阅专栏
微信小程序版个人博客及简历---面试加分
CrazyNing
12-31 1万+
WeChatMiniProgram-Blog 微信小程序初体验 微信小程序版的个人博客及简历 说明： 本项目为小程序入门项目，需要一定的前端基础及一点后端知识，项目可能不太好，欢迎大家吐槽，纯萌新小白勿入，最后祝大家Coded愉快。 使用方法： git clone https://github.com/CrazyNing98/WeChatMiniProgram-Blog.git or https...
云开发小程序博客系统-不用服务器不用域名做自己的博客.zip
09-23
第一版写的很粗糙，目前已实现了以下功能：1、支持手机端发布图片、视频、公众号文章、富文本内容2、支持生成文章朋友圈海报生成3、支持客服功能聊天机器人自动回复4、支持留言回复功能5、支持发布内容的小程序端更新删除6、直接输入微信公众号文章分享链接即可采集所有内容，一键发布6、小程序端设置公告、人员权限管理、关联公众号等。。。数据全部存在云开发上面的，所以反应稍微有点点慢，不过也没啥影响，反正也没啥用户，这个程序主要就是自己写了耍的，起初本意是想做一个平台能把自己遇到好玩有意思的东西都堆起来，反正就是不喜欢发朋友圈，刚好云开发满足了这个条件，建议最好结合公众号一起做，在公众号上面写日志，然后到小程序里面粘贴分享链接就行了，还有一些小问题，主要原因在于对node.js还是不太熟悉，后面遇到问题再解决吧，感兴趣一起来慢慢迭代Github开源地址：https://github.com/xuhuai66/wxapp-blog已部署上线：宅梦网开源地址：https://github.com/xuhuai66/wxapp-blog
小程序 | 使用CMS搭建一个简单blog小程序
ParallelLight
01-23 1864
CMS给我这种偏前端的开发者带来了福音，真是相恨见晚，这次好好体验一下使用CMS的感觉，本文接续上一篇文章《小程序 | 认识CMS、创建云开发环境、创建并进入CMS内容管理系统》，介绍一下CMS入门内容——使用CMS搭建一个简单的blog小程序。 注意1：若还没有完成微信开发者工具中云开发部署的请先部署一下云开发环境，点击传送门。 注意2：若想要使用微信小程序的CMS系统，请最好下载较新版本的微信开发者工具（V1.3.53版本以上即可。） 文章目录一、CMS内容的管理（以blog系统为例）1.1 创建一.
个人博客微信小程序(程序+开题报告)(开题报告+源码）
迟限程序设计
02-04 964
通过对小程序的持续优化和升级，本研究将致力于解决个人博客在移动端的展示和管理问题，提高博客的可访问性和用户体验。构建个人博客微信小程序对于提升博主与读者之间的互动、扩大博客的影响力、优化移动端阅读体验具有显著的价值。此外，小程序还可以提供更多样化的功能，如即时通知、评论互动等，进一步增强用户的粘性。个人博客作为展示个人思想、分享知识经验的重要平台，通过微信小程序的形式，可以让博主更便捷地触达广泛的读者群体。通过这些功能，小程序将全面提升个人博客的管理效率和用户体验，确保博客内容的易访问性和可读性。
用小程序·云开发打造功能全面的博客小程序丨实战
weixin_30794499的博客
08-26 597
用小程序·云开发将博客小程序常用功能“一网打尽” 本文介绍mini博客小程序的详情页的功能按钮如何实现，具体包括评论、点赞、收藏和海报功能，这里记录下整个实现过程和实际编码中的一些坑。 评论、点赞、收藏功能 实现思路 实现文章的一些操作功能，最主要的还是评论，这是作者和读者之间沟通的桥梁，评论功能的衍生无非是细化作者和读者之间的互动，或者增加文章的传播，所以在动手开发时需要思考下你期...
微信小程序设计规范
热门推荐
qq_31432773的博客
11-09 1万+
微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。
个人博客小程序
zhangxia_的博客
07-27 7572
文章详细的介绍了个人博客小程序的云开发流程，包括博客展示页面，添加博客页面的创建，以及云函数的上传，数据库的创建和使用。同时使用到了form，text等组件以及使用富文本添加博客。
借助云开发搭建专属技术博客微信小程序（附源码）
xiaoshun007的专栏
02-28 1071
一直对小程序开发很感兴趣，之前就准备做一款属于自己的小程序，无奈还需要购买云服务器和部署后台，有点麻烦，自从知道有了云开发这个免去服务器搭建和运维的一站式后端云服务“神器”，就一鼓作气花了几个周末的时间做了一款自己的博客小程序，如果你也想打造一款自己的博客，那你阅读这篇文章就够啦。
【毕业设计】基于微信小程序的博客系统 个人博客小程序
qq_33638415的博客
10-17 604
今天分享的是基于微信小程序的博客小程序系统，博客作为一种新的生活方式、新的工作方式和新的学习方式已经被越来越多的人所接受,并且它正在改变传统的网络和社会结构，随着近年来移动互联网革命性的变化,信息的传播方式开始向移动网络化转变,博客小程序在此形势下应运而生。设计一个基于微信小程序的个人博客系统基于以上微信的发展，结合目前用户对博客的需求，为用户提供了一个便利的查询博文、写博文的平台，更好的为用户服务。
【微信小程序】博客小程序，静态版本（三）设计和开发首页、个人关于页
南方者的博客
12-03 1699
经过俩轮的 “客户” 需求，拖了将近大半个月的时间。终于迎来了第三篇的设计和开发。李老板与小南的进一步交涉又会如何呢？我们一下来看一下...
微信小程序 不二博客星球
Always206的博客
12-27 478
趁着周末无聊，做了一款博客小程序，记录日常工作中遇到的一些问题，方便在手机上温故。
微信小程序商城源码搭建可以直接用 有教程
05-07
微信小程序商城源码搭建可以直接用 有教程 微信小程序商城源码搭建可以直接用 有教程微信小程序商城源码搭建可以直接用 有教程微信小程序商城源码搭建可以直接用 有教程微信小程序商城源码搭建可以直接用 有教程微信...
基于微信小程序实现类似滴滴拼车小程序源码分享
06-15
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
Laravel 微信小程序后端搭建步骤详解
10-15
主要介绍了Laravel 微信小程序后端搭建步骤详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序的快速搭建
03-29
「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批...因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！ 选择哪个「小程序」Demo？ 在知名
房贷计算器微信小程序，可搭建使用
08-02
房贷计算器微信小程序，可搭建使用，房贷计算器微信小程序，可搭建使用，房贷计算器微信小程序，可搭建使用，房贷计算器微信小程序，可搭建使用，房贷计算器微信小程序，可搭建使用，房贷计算器微信小程序，可搭建...
微信小程序监听App中的globalData——全局数据监听
qq_45142260的博客
04-23 617
需求：微信小程序项目需要全局监听某个数据。 方法：在 app.ts/app.js 中定义 globalData 公共数据，然后定义一个监听方法 watch，在其他页面或组件中通过使用 【发布订阅 】 模式，进行数据的监听操作。
微信小程序webview和小程序通讯
最新发布
q759859479的博客
04-23 1144
1.1需要再小程序嵌入vr页面，同时在vr页面添加操作按钮与小程序进行通信交互1.3 开发工具：uniapp开发小程序1.3原型图点击体验官带看跳转小程序的体验官带看页面点击立即咨询唤起小程序弹窗打电话web-view | uni-app官网 (dcloud.net.cn)
微信小程序 讯飞录音 点击按钮录音内容转文字
qq_27806371的博客
04-23 384
微信小程序 讯飞录音 点击按钮录音内容转文字
微信小程序搭建一个底部导航栏
04-05
要在微信小程序中搭建一个底部导航栏，可以按照以下步骤进行： 1. 在 app.json 文件中配置底部导航栏的样式和页面路径 在 app.json 文件中，可以通过 tabBar 字段来配置底部导航栏的样式和页面路径。例如： ``` "tabBar": { "color": "#999", "selectedColor": "#07c160", "backgroundColor": "#fff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tab-bar/home.png", "selectedIconPath": "images/tab-bar/home-active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "images/tab-bar/cart.png", "selectedIconPath": "images/tab-bar/cart-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "images/tab-bar/user.png", "selectedIconPath": "images/tab-bar/user-active.png" } ] } ``` 其中，color 和 selectedColor 分别表示未选中和选中时的文字颜色，backgroundColor 表示背景色，borderStyle 表示边框样式，list 中的每一个对象表示一个底部导航栏的选项，pagePath 表示对应的页面路径，text 表示文字描述，iconPath 和 selectedIconPath 分别表示未选中和选中时的图标路径。 2. 在 app.wxss 文件中设置底部导航栏的样式 在 app.wxss 文件中，可以设置底部导航栏的样式。例如： ``` .tab-bar { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; background-color: #fff; border-top: 1px solid #ccc; } .tab-bar-item { display: flex; flex-direction: column; justify-content: center; align-items: center; } .tab-bar-item-text { font-size: 12px; margin-top: 6px; } .tab-bar-item-icon { width: 24px; height: 24px; } ``` 其中，.tab-bar 表示底部导航栏的样式，.tab-bar-item 表示每一个选项的样式，.tab-bar-item-text 和 .tab-bar-item-icon 分别表示文字和图标的样式。 3. 在各个页面中设置底部导航栏的选中状态 在各个页面中，可以通过设置页面的 onShow 函数和页面路径来设置底部导航栏的选中状态。例如： ``` onShow: function() { wx.setNavigationBarTitle({ title: '首页' }) const currentPage = getCurrentPages().pop() if (currentPage.route === 'pages/index/index') { this.setData({ activeTabBarIndex: 0 }) } } ``` 其中，wx.setNavigationBarTitle 可以设置页面的标题，getCurrentPages().pop() 可以获取当前页面的路径，this.setData 可以设置页面的数据，activeTabBarIndex 表示当前选中的底部导航栏的索引。通过判断当前页面的路径来设置相应的选中状态。 通过以上步骤，就可以在微信小程序中搭建一个底部导航栏了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 73
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摔跤猫子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值