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

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

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

文章目录

• 一、今日实战目标
• 二、实战步骤
• • 1.根据设计图，先确定哪些内容是用动态数据
  • 2. 编写组件
  • 3. 在我的页面使用该组件
• 总结

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

一、今日实战目标

• 封装项目中可复用组件

二、实战步骤

1.根据设计图，先确定哪些内容是用动态数据

• 如上图所示，icon图标、菜单名称和数量是动态的，我们可以通过动态数据去实现各不同的菜单栏,还有就是这个菜单跳转的地址也是动态的

2. 编写组件

代码如下，附注释：

<template><view class="setting-bar" v-if="info">// @click="go(info) 是跳转指定页面<view class="space-between hor-center" @click="go(info)"><view class="row hor-center"><image class="icon" :src="info.icon" mode=""></image><view class="menu">{{info.title}}</view></view><view class="row">// 当showNumber为true的时候显示数量，这里默认是1，还没接api，接了之后可以实现动态化<view v-if="info.showNumber" class="label">1</view><image class="arrow" src="../../static/svg/arrowR.svg" mode=""></image></view></view></view>
</template><script>export default {name: "setting-bar",data() {return {};},// 接受父组件传来的数据props: {info: Object},methods: {send() {this.$emit("send")},// 根据父组件传来的数据，跳转指定页面go(e) {if (e.id === 4) {// 直接退出登录this.$store.commit("logout")}uni.navigateTo({url: e.page})}}}
</script><style scoped>.setting-bar {width: 100%;height: 56px;background: #fff;padding: 16px 20px 16px 28px;}.setting-bar:active{background: #f9f9f9;}/* .setting-bar:hover{background: #f5f5f5;} */.icon {width: 28px;height: 28px;border-radius: 6px;/* background: #F3F7F8; */}.menu {font-family: PingFangSC-Regular;font-size: 15px;font-weight: normal;line-height: 20px;margin-left: 10px;letter-spacing: 1px;color: rgba(0, 0, 0, 0.8);}.label {font-family: PingFangSC-Regular;font-size: 16px;font-weight: normal;line-height: 20px;letter-spacing: 0px;color: rgba(0, 0, 0, 0.5);margin-right: 8px;}.arrow {width: 20px;height: 20px;}
</style>

3. 在我的页面使用该组件

<script>import {mapState,mapMutations} from 'vuex'// 引用组件import Bar from '@/components/setting-bar/setting-bar.vue'import LoginPopup from '@/components/login-popup/login-popup.vue'export default {components: {Bar,LoginPopup},computed: {...mapState(['hasLogin', 'userInfo'])},data() {return {show:false,// 先用假数据list: [{id: 0,icon: '../../static/svg/mine.svg',title: '个人资料',page: '',showNumber: false}, {id: 1,icon: '../../static/svg/group.svg',title: '我的社群',page: '',showNumber: true}],list2: [{id: 2,icon: '../../static/svg/joined.svg',title: '我的参与',page: '',showNumber: true}, {id: 3,icon: '../../static/svg/set.svg',title: '设置',page: '',showNumber: false}, {id: 4,icon: '../../static/svg/change.svg',title: '切换账号',page: '../login/login',showNumber: false}, {id: 5,icon: '../../static/svg/kefu.svg',title: '帮助与客服',page: '../../login/login',showNumber: false}]}},methods: {login() {uni.navigateTo({url: "../login/login"})},showlogin(){this.show = true},close(){this.show = false}}}
</script>

总结

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

• 温馨提示：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！