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

这篇具有很好参考价值的文章主要介绍了uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

都说现在是小程序,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前端网页托管或自己的vps服务器,发布到网页端后,可使用桌面端开发平台发布到桌面端,比如electron

发布到小程序:编辑器顶部点击 —— 发行 —— 小程序微信 ,成功后上传到微信小程序后台

发布到安卓端:编辑器顶部点击 —— 发行 —— 原生APP云打包,成功后安装即可

ublog介绍

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

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

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

1.自适应显示

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

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

2.动态切换主题

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

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

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

3.文章系统

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

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

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

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

4.页面系统

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

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

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

  • 添加一个图片模块,就生成了首页轮播图。

  • 添加一个公告模块,就生成了首页的公告。

  • 添加一个文章列表模块,就生成文章列表。

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

5.模块系统

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

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

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

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

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

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

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

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

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

6.用户系统

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

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

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

7.更多功能完善中

吐槽

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

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

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

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

后记

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

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

欢迎下载体验,有任何问题或建议欢迎一起交流,学习。

uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三文章来源地址https://www.toymoban.com/news/detail-823900.html

到了这里,关于uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp实现自定义导航内容高度居中(兼容APP端以及小程序端与胶囊对齐)

    ①效果图如下 1.小程序端与胶囊对齐 2.APP端内容区域居中     注意:上面使用的是colorui里面的自定义导航样式。 ②思路: 1.APP端和小程序端走不同的方法,因为小程序端要计算不同屏幕下右侧胶囊的高度。 2.其次最重要的要清晰App端和小程序端的计算逻辑。 3.然后调用api获

    2024年02月13日
    浏览(52)
  • uni-app的优缺点;uniapp进行条件编译的两种方法;小程序端和H5的代表值

    目录 uni-app的优缺点 优点: 1.跨平台开发: 2.统一的开发语言: 3.高效的性能: 4.丰富的生态圈: 缺点: 1.平台差异性: 2.性能限制: 3.对新特性支持滞后: Uni-app条件编译 process.env.UNI_PLATFORM 变量: 使用 process.env.NODE_ENV 变量: Uni-app中的代表值 Uni-app 是一个跨平台的开发框架

    2024年02月08日
    浏览(122)
  • uniapp小程序端使用腾讯地图

    一、获取腾讯地图密钥 1. 找到腾讯地图API 腾讯地图A地址PI 注册并登录后点击 开发文档 选择 微信小程序JavaScript SDK 进入后按照 Hello world! 中的步骤进行 2. 申请密钥 点击上面第一步中的 申请密钥 ,进入我的应用,在创建应用中输入创建的名称和类型 创建成功后点击 添加

    2024年02月16日
    浏览(44)
  • 【java】【ssm】【微信小程序】 初级移动医院预约系统成品代码动态网站开发网页WEB浏览器端B/S结构移动微信小程序端项目

    本系统是使用java语言结合mysql数据库开发的医院预约系统,后台管理是网页WEB浏览器端B/S结构,移动端是微信小程序。 其中分为前端和后台。 前端主要是患者预约使用,包括预约、医生详情查看、医生列表查询、个人中心等。 后台则是对系统的所有数据进行管理。 后台用户

    2024年02月03日
    浏览(47)
  • uniapp 实现富文本编辑器【小程序端】

    css资源文件戳该链接:富文本css文件链接 编辑菜单我搞成吸顶效果了,方便手机编辑不用再滑到头部点编辑菜单:css实现元素吸顶效果 ————————————————————————————————————————————

    2024年02月16日
    浏览(61)
  • uniapp,小程序端返回上一页并传递参数

    使用场景: 从A页面跳到B页面,在数据操作后要返回A页面(使用uni.navigateBack()返回), 要求: 携带参数返回A页面,不使用链接带参数返回,不用使用缓存:uni.setStorageSync()储存数据等情况下怎么传递参数 可使用解决方案: 方法一:使用getCurrentPages() 函数获取上一页面栈的

    2024年02月08日
    浏览(47)
  • uniapp实现微信小程序端动态生成海报

    背景: 基于uniapp实现微信小程序中商品详情的海报生成与保存 效果图: 思路: 首先把海报上需要的内容准备好,比如用户头像,商品信息,二维码等。需要注意的是,因为二维码是动态生成的,所以需要后端传给我们,前端需要把路径和参数传给后端,后端请求微信服务接

    2024年02月12日
    浏览(45)
  • uni-app 微信小程序端-AirKiss一键配网

    发现网上很多关于微信小程序配网的文章都是微信小程序原生开发,uni-app少之又少。这篇文章就介绍一下怎么在HBuilder X使用airkiss配网插件。 一.AirKiss介绍 ​ AirKiss是微信硬件平台为Wi-Fi设备提供的微信配网、局域网发现和局域网通讯的技术。开发者若要实现通过微信客户端

    2024年02月08日
    浏览(50)
  • 【声网】实现web端与uniapp微信小程序端音视频互动

    利用声网实现音视频互动 注册声网账号 进入Console 成功登录控制台后,按照以下步骤创建一个声网项目: 展开控制台左上角下拉框,点击 创建项目 按钮。 在弹出的对话框内,依次选择 项目类型 ,输入 项目名称 ,选择 场景标签 和 鉴权机制 。其中鉴权机制推荐选择 安全

    2024年04月27日
    浏览(54)
  • uniapp(微信小程序端)生成海报--snapshot 的使用(不确定版本)

    1. 在manifest.json 里面 微信小程序设置里面添加这几段设置 2. 在你海报页面(page.json)设置 ,必须要设置自定义标题栏 3. 去微信小程序的文档里面搜索snapshot(组件组件组件里面找) 然后翻到最下面示例代码片段,然后点开,把他的代码复制到你得项目里面去,如果是vue3setup写法, 另外创

    2024年04月29日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包