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

项目最终效果图：@点击访问效果图，欢迎关注收藏订阅专栏！！！

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

文章目录

一、今日实战目标
二、实战步骤
- 1. 先看设计图
三、页面完整代码
总结

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

一、今日实战目标

监听用户操作
完成星球创建页面

二、实战步骤

1. 先看设计图

强烈建议：做之前一定要先看透设计图，做页面之前得知道这个页面会用到什么组件，有什么功能，怎么做能更方便后期维护等等，这些都应该想清楚了再做。
首先需要自定义导航栏，如果忘了的可以点击前往自定义导航栏文章
然后我们需要做的是监听用户logo的上次和名称的输入，有一个内容用户没有完善的，我们都不应该让用户可以前往下一步

关键代码如下：

// 自定义顶部导航栏
<u-navbar :placeholder="true" leftIconColor="#fff"><view class="u-nav-slot both-center" slot="left" @click="back()"><view class="cancel">取消创建</view></view><view class="u-nav-slot n-right" slot="right"><view class="next op" v-if="ok" @click="go()">下一步</view><view class="next opacity" v-else>下一步</view></view>
</u-navbar>//监听logo和名称的填充，起了个比较随意的名字“ok”
computed:{ok(){if(this.name.length != 0 && this.logo.length != 0) return true}
},

上面只是不允许内容为空，大家还可以添加其他条件，比如标题字数不能超过多少,不能含有表情等等。大家随意发挥
都填充完之后，应该跟下面的图片一样，下一步按钮的样式发生了变化，也可以点击前往下一步

三、页面完整代码

代码如下（示例）：

<template><view class="newgroup "><u-navbar :placeholder="true" leftIconColor="#fff"><view class="u-nav-slot both-center" slot="left" @click="back()"><view class="cancel">取消创建</view></view><view class="u-nav-slot n-right" slot="right"><view class="next op" v-if="ok" @click="go()">下一步</view><view class="next opacity" v-else>下一步</view></view></u-navbar><view class="relative both-center col"><image v-show="logo_list.length==0" class="upload" src="../../static/bigupload.jpg" mode="aspectFill" @click="uploadlogo()"></image><image v-show="logo_list.length>0" class="upload" :src="logo_list" mode="aspectFill"></image><input v-model="name" class="input" type="text" placeholder="输入星球名称"></view></view>
</template><script>export default {data() {return {name:'',logo: '',logo_list: [],}},computed:{ok(){if(this.name.length != 0 && this.logo.length != 0) return true}},methods: {back(){uni.navigateBack({delta:1})},go(){uni.navigateTo({url:'../groupSet/groupSet?name='+ this.name +'&logo='+ this.logo})},uploadlogo() {let _this = thisconst userinfo = uni.getStorageSync('userInfo')uni.chooseImage({count: 1,sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], //从相册选择success: (res) => {const tempFilePaths = res.tempFilePaths;console.log(tempFilePaths[0])_this.logo_list = tempFilePaths[0]uni.uploadFile({url: 'https://center.XX.com/center/group/icon', //上传图片// 本地测试专用 url:'http://192.168.1.8:4001/group/icon',  filePath: tempFilePaths[0],name: 'groupicon',header:{"Authorization": userinfo.token},success: (res) => {let _this = thislet group =  JSON.parse(res.data) _this.logo = group.imageIDconsole.log(_this.logo);uni.showToast({title:"上传成功",icon:"success"})}});}});},}}
</script><style scoped>.cancel {font-family: PingFangSC-Regular;font-size: 17px;font-weight: normal;line-height: 22px;letter-spacing: 0px;color: rgba(0, 0, 0, 0.5);}.next {color: #fff;background: #17B99A;font-family: PingFangSC-Regular;font-size: 16px;font-weight: normal;letter-spacing: 1px;padding: 4px 12px;border-radius: 20px;}.opacity{opacity: .5;}.relative {width: 100%;height: auto;}.upload {margin-top: 40px;width: 200px;height: 200px;border-radius: 15px;background: #fff;box-shadow: 0 15px 30px rgb(56 66 104 / 6%);}/* input */input {width:calc(100vw - 60px);margin-top: 50px;height: 60px;border: 2px solid #eeebf1;background: #fafafa;border-radius: 20px;text-align: center;font-family: PingFangSC-Regular;font-size: 16px;font-weight: bold;line-height: 20px;letter-spacing: 0px;color: rgba(0, 0, 0, 0.8);}.n-right{/* #ifdef MP-WEIXIN */transform: translateX(-100px);/* #endif */}
</style>

总结

由于项目目前在对接后台api中，项目git地址：请点击访问，大家可以去clone下来借鉴下；

温馨提示：

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

uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作相关推荐

uniapp实战项目（仿知识星球App) - - 配置开发工具和全局css样式
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 效果篇
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 引入uView框架
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - tabBar配置
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 封装组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 实现图片懒加载
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目仿糗事百科_项目设计最好用的底层思考模型——黄金圈
为什么要学习黄金圈法则如何学习黄金圈法则学习黄金圈法则哪些内容彩蛋全文共计2200字,10张图片I阅读13分钟为什么要学习黄金圈法则在工作中和生活中,你是否遇到过以下的困惑: 1-老板突然 ...
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址实际案例图片修改收货地址和修改默认地址页面布局和功能具体内容图片自己替换哈,随便找了个图片的做示例用到了vuex的状态机,具体 ...

uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作

文章目录

一、今日实战目标

二、实战步骤

1. 先看设计图

三、页面完整代码

总结

uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作相关推荐

最新文章

热门文章

uniapp实战项目 （仿知识星球App) - - 利用computed监听用户操作

文章目录

一、今日实战目标

二、实战步骤

1. 先看设计图

三、页面完整代码

总结

uniapp实战项目 （仿知识星球App) - - 利用computed监听用户操作相关推荐

最新文章

热门文章

uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作

uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作相关推荐