uniapp实战项目 (仿知识星球App) - - 效果篇

这篇具有很好参考价值的文章主要介绍了uniapp实战项目 (仿知识星球App) - - 效果篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实战项目名称:仿知识星球App
技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql )
已实现功能:微信登录,创建星球,内容管理,星球管理
项目git地址:请点击访问

项目最终效果图:@点击访问效果图,欢迎关注收藏订阅专栏!!!

  • 文章会先按照 ① uni-app端 、 ② Node.js后端 、③ 微信小程序、④ 利用宝塔面板部署项目;先后顺序更新文章。

提示:该项目只用于个人实战,不应用于任何商业用途。

一、今日实战目标

  • 分享app端项目效果图
  • 了解项目功能

二、APP效果图分享

uniapp项目实战,uni-app,uni-app,微信小程序,小程序


uniapp项目实战,uni-app,uni-app,微信小程序,小程序


uniapp项目实战,uni-app,uni-app,微信小程序,小程序


uniapp项目实战,uni-app,uni-app,微信小程序,小程序


uniapp项目实战,uni-app,uni-app,微信小程序,小程序


三、了解项目基本功能

1.微信登录

  • 接入微信登录,获取用户基本信息
  • 微信用户信息同步(APP端 & 微信小程序端)

2.创建星球

  • 已授权用户创建星球
  • logo上传,星球内容初始化

3.内容管理

  • 星球内容管理(置顶、审核、黑名单)
  • 分类管理

4.星球管理

  • 成员管理
  • 星球设置(是否付费,人数限制,管理员设置等)

总结

今天主要是分享下项目的效果图,近期都会更新前端uni-app的实战文章。欢迎关注点赞评论👏🏻👏🏻

由于项目目前在对接后台api中,项目git地址:请点击访问,大家可以去clone下来借鉴下;文章来源地址https://www.toymoban.com/news/detail-787855.html

  • 温馨提示:
  1. 项目仅用于个人实战,设计图和架构是自己基于知识星球APP进行设计的,算得上是入门级的uni-app,后期会更新一个企业级uniapp项目
  2. 我是在空闲中写写博客,并没有很规范,欢迎在评论区留下你的建议与意见。
  3. git项目拷贝下来的代码有不懂的,可以截图私信给我,看到会回复你,希望可以帮助到你了解和开发uniapp。

到了这里,关于uniapp实战项目 (仿知识星球App) - - 效果篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~ uniapp官网提供了  HBuild

    2024年02月09日
    浏览(49)
  • (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    版本信息: 点击编辑器的文件 新建 项目(快捷键Ctrl+N) 2.选择uni-app项目,输入项目名/路径,选择项目模板,勾选vue3版本,点击创建,即可成功创建。 3.点击编辑器的运行 运行到浏览器 选择浏览器 当然也可以运行到手机或模拟器、运行到小程序工具。 到这里一个简单的

    2024年02月16日
    浏览(54)
  • uni-app:实现时钟自走(动态时钟效果)

    使用钩子函数 mounted(),设置定时器,是指每秒都要去执行时间的获取,以至于实现时间自走的效果  mounted() {     this.updateTime(); // 初始化时间     setInterval(this.updateTime, 1000); // 每秒更新时间   },  自定义方法updateTime去获取当前时间,并设置数据 updateTime() {       const dat

    2024年02月08日
    浏览(32)
  • 『UniApp』uni-app-打包成App

    大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的,首先需要配置关于 App 应用的基础信息,打开 manifest

    2024年02月04日
    浏览(53)
  • uni-app中实现弹幕的滚动效果

    在uni-app中实现弹幕的滚动效果,可以通过以下步骤实现: 在页面中创建一个容器,用于显示弹幕内容。可以使用 view 标签或者其他适合的标签作为容器。 使用CSS样式设置容器的位置和样式,例如设置 position: fixed 使其固定在页面上的某个位置,设置 overflow: hidden 隐藏超出容

    2024年01月21日
    浏览(27)
  • 【UniApp】-uni-app-网络请求

    经过上个章节的介绍,大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档,我先带着大家看一下官方文档的介绍:https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到,可以

    2024年02月04日
    浏览(33)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(45)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(67)
  • uni-app+uView实现点击查看大图片的效果

    参数说明

    2024年02月10日
    浏览(36)
  • uni-app小程序折叠3D轮播图效果实现。

    先来看效果图 实现原理: 通过小程序的触摸事件,来控制图片数组的变化实现动态样式;来改变图片的样式。 贴上轮播组件完整代码 组件使用 如果有自动轮播的需求,可以改造下组件加个定时器处理数组就OK了。

    2024年02月11日
    浏览(29)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包