首页 > 编程语言 >uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三

时间:2024-01-23 22:32:53浏览次数:35  
标签:uniapp 网页 部署 APP 博客 unicloud 编辑器 uBlog

前言

做为一个开发者,怎么能没有一个自己的博客呢?

都说现在是小程序,APP时代了,显然只有网页端已经跟不上时代了,于是乎就想找一个免费的能同时支持网页端,小程序,APP的博客系统...

于是花了一点点时间,没找到合适的...

好吧,那既然自己是开发者,那为什么不能自己写一个博客呢?

于是又花亿点点时间...

介绍

既然要跨端,找了一圈,想要很好的支持小程序,和APP,基本上选定了uniapp,发现官方已经写好了后端和前端的模版,直接拿来用,基本解决了项目搭建问题,于是乎,又过了亿点点时间,完成了这套基于uniapp+unicloud开发,一套代码多端部署的博客CMS系统。

由于是基于uniapp开发的博客,就取名ublog,一个可同时部署到网页端,小程序端,APP端,桌面端的博客cms系统。

下载即用,免费的,无需写一行代码,无需懂编程也能部署发布使用。

无需服务器,代码是免费的,官方也有免费的云空间,免费使用不香吗?

演示

提示: uBlog前端和后端(uBlog-admin)都可以免费使用。推荐直接获取源码后部署到自己的云空间体验。

演示:uBlog网页端www.wndss.com 点击跳转

演示:uBlog小程序端,微信搜【万能的三三】

演示:uBlog安卓端,点击下载 密码:wndss

演示:uBlog桌面Windows端,点击下载 密码:wndss

演示:uBlog后台网页端(uBlog-admin) 点击跳转

后台登录账户

用户名:后羿

密码:dfqwer

快速部署

重要提示,前端和后端一定要选择同一个云空间

新手可以看详细部署教程,点击跳转

推荐使用最新版本的HBuilder编辑器

部署方式和部署uni-admin是一样的,用过uni-admin的可以直接上手

推荐使用阿里云空间,将代码导入到编辑器中-选择vue3-初始化云空间-完成

前端的部署方式和后端的部署方式是一样的,重复一次步骤即可。

快速发布

详细步骤可看官方教程,点击跳转

发布到网页端:编辑器顶部点击 —— 发行 —— 网站PC ,成功后上传到unicloud前端网页托管或自己的服务器,发布到网页端后,可使用桌面端开发平台发布到桌面端,比如electron
发布到小程序:编辑器顶部点击 —— 发行 —— 小程序微信 ,成功后上传到微信小程序后台
发布到安卓端:编辑器顶部点击 —— 发行 —— 原生APP云打包,成功后安装即可

ublog介绍

ublog 支持网页端,小程序,APP的博客CMS系统 【后台管理端】

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_ublog

uBlog部分功能介绍(更多功能持续更新中)

1.自适应显示

从PC大屏到H5小屏,再从小程序到APP桌面端,完全兼容显示。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_ublog_02

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_uniapp_03

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_ublog_04

2.动态切换主题

uBlog使用基于Material Design的基础颜色,你也可以选择任何一个你想要的颜色,加入系统中。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_ublog_05

  • 即可实现全应用动态切换颜色。
  • 同时支持动态切换夜间暗色模式与日间亮色模式,一键灰色等任意颜色相关功能。

3.文章系统

后台基于强大且可高度自定义的tinymce编辑器,基本上wordpress能做到的功能,它也都可以。

可使用文章模板,使用隐藏内容,实现付费阅读,评论可见等常见功能。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_ublog_06

后台提供预览界面,可查看pc大屏显示效果与小程序和APP端的显示效果,真正的做到所见即所得。

4.页面系统

uBlog的每个页面的显示内容都是由后台配置生成,除个人中心外,你可以理解为每个页面初始状态都是空白页。在后台添加相应的组件后从而生成对应的页面。

比如首页,就是一个空白页。

显示什么内容,完全自定义,或者使用别人配置好的样式,一键导入更快捷。

  • 添加一个图片模块,就生成了首页轮播图。
  • 添加一个公告模块,就生成了首页的公告。
  • 添加一个文章列表模块,就生成文章列表。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_uniapp_07

5.模块系统

每个页面都是空白页,显示的内容,都是由后台动态配置生成。

那拥有哪些模块,就决定了页面有哪些功能。

就像wordpress的小工具一样,你可以把这些模块放到任意页面的,任意位置,无论是在网页端大屏,或是小程序和APP的小屏,都能自适应显示。

同时每个模块支持指定权限及指定平台。

可现实,不同用户,不同平台,不同的显示效果。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_uniapp_08

添加一个模块,就是添加一个组件。

也就是说文章也是ublog的插件,如果加入图片,视频,导航等插件,可以立刻变成任何应用。

uBlog是通用的CMS系统,整个应用显示的内容完全自定义。

6.用户系统

除了基本的用户角色权限外,添加了积分与金币功能及兑换码功能,积分对应等级,金币对应会员。

配合文章的权限可见与模块系统的权限可见,实现不同用户,显示不同的内容。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三_uniapp_09

7.更多功能完善中

吐槽

最后分享一下使用uniapp开发的一些心得。

官方的hbuilder编辑器比不上vscode,特别是搜索功能,不是没反应,就是搜索卡死,只能重启解决,用12代i5和32g内存,就开一个编辑器,也会经常卡,很无语。一定要经常ctrl+s

升级hbuilder版本后,正常运行的代码会出现一些莫名其妙的错误,如果报错有显示在哪里还好解决,有时候只显示编译后几万行位置的错误,无法定位,只能回退版本找问题,这就很坑。

uniapp的云空间没有私有化部署的教程,不能部署到自己的服务器,基于serverless有很多优点,但也有一点点不足,还是有不少的人喜欢将博客部署到自己的服务器上,实现更多自定义功能。


后记

目前ublog的系统已经基本完成了,模块化开发,可拓展性强,想要加什么功能,后续直接添加对应的插件即可。

当然目前还有很多不完善的地方,但基本的博客系统是已经成了,因为要支持的平台较多,很多兼容性问题可能无法马上发现。

欢迎下载体验,后续会逐步分享开发流程与经验分享,有任何问题或建议欢迎一起交流,学习。

标签:uniapp,网页,部署,APP,博客,unicloud,编辑器,uBlog
From: https://blog.51cto.com/u_16534051/9386744

相关文章

  • 【APP逆向10】Java中常见加密与python实现
    1.隐藏字节,Stringv4=newString(newbyte[]{-26,-83,-90,-26,-78,-101,-23,-67,-112});byte_list=[-26,-83,-90,-26,-78,-101,-23,-67,-112]bs=bytearray()#python字节数组foriteminbyte_list:ifitem<0:item=item+256......
  • Microsoft 365 开发:开发者如何使用App ID连接Graph API的方法汇总
    51CTOBlog地址:https://blog.51cto.com/u_13969817在上文中我们介绍了如何在AzureAD中注册Application并授权相关GraphAPI,本文将给大家介绍开发者如何使用AppID和Certificate(Secret)通过PowerShell连接GraphAPI?采用AppID和Certificate通过PowerShell连接GraphAPI的命令如下所......
  • Microsoft 365:如何在Azure AD中注册Application并授权相关Graph API
    51CTOBlog地址:https://blog.51cto.com/u_13969817在使用Powershell连接GraphAPI之前,首先管理员要在AzureAD中新建Application,并授权APIPermission和Credentials,本文将给大家做细节介绍:·      在AzureAD中注册Application·      授权GraphAPIPermission· ......
  • 一种快速开发适配鸿蒙的App思路:基于小程序技术
    今年,在中国,被各大媒体和开发者称为“鸿蒙元年”。 在2023年底就有业内人士透露,华为明年将推出不兼容安卓的鸿蒙版本,未来IOS、鸿蒙、安卓将成为三个各自独立的系统。 果不其然,执行力超强的华为,与2024年1月18日的开发者(HDC)大会上,就官宣了“纯血鸿蒙”操作系统即将于2024......
  • 搭建互联网医疗平台:构建智慧医院APP的开发指南
    本文将从技术层面出发,为大家提供构建互联网医疗平台、打造智慧医院APP的详细开发指南。 一、确定需求与功能在开始开发之前,首先需要明确智慧医院APP的需求与功能。这包括患者预约挂号、在线咨询、病历查看、医疗报告查询等功能。二、选择合适的开发框架与技术选择合适的开发框架对......
  • uniapp打包h5在Android的webview中打开出现localStorage.setitem为null的记录
    使用android直接打开h5的链接,报错localStorage.setItem为null原因是要打开Android的webview的存储设置valwebView=findViewById<WebView>(R.id.webview)valsettings=webView.settingssettings.domStorageEnabled=truesettings.datab......
  • uniapp微信小程序接入高德地图SDK
    小程序地图SDK原理(注意:这一段要仔细看哦,很多人问我为什么你写的是高德地图SDK,却用的是腾讯地图,答案就在这里)微信小程序开发,可以使用地图组件map,来进行地图显示、定位、显示大头针等基本功能,具体可以看官方文档:微信小程序map组件。map组件只提供一些基本的“硬件”,还需要“大脑......
  • 深入解析互联网医院APP开发流程与源码搭建
    本篇文章,深入解析互联网医院APP的开发流程,并提供关于源码搭建的一些建议。 一、确定需求与功能在开始互联网医院APP的开发之前,首先需要明确项目的需求和功能。这包括用户端的预约挂号、在线咨询、报告查看等功能,以及医生端的排班管理、病历查看等功能。确保需求明确,有助于后续的流......
  • 手游app中,最占功耗的功能是什么?
    前言大家好,我是chowley,今天来讨论一个经典问题:在手游App中,最占功耗的功能是什么?通常是以下几个:图形渲染:手游App通常具有复杂的图形和动画效果,这需要大量的图形渲染计算。图形渲染涉及GPU的大规模使用,它消耗了大量的电能。网络通信:多人在线游戏或需要与服务器进行频繁通......
  • 鸿蒙5.0发布时间已定!鸿蒙系统上的App开发新思路
    直接在百度上搜索「鸿蒙5.0发布时间」,出来的结果,那一个比一个焦虑~~百度的AI基于综合内容判断得出,鸿蒙5.0的发布时间在2023-04-17百度知道推的答案是202年年4月中但不管几月,“鸿蒙元年”似乎都是确定的,就是2024年。   鸿蒙5.0如此独特,直接引导......