uniapp社區交友開發前端模塊開發

源碼可以提供下載，詳情訪問末尾碼云地址

環境搭建和創建項目

開發環境搭建

• 使用HubilderX
• 安裝對應插件

創建uniapp項目

• 創建項目（名稱：社區交友）
• 真機調試或微信開發者工具調試

App.vue引入全局公共樣式

引入官方css樣式庫

• 新建模板項目hello uniapp

• 復制模板common下的css

• 在本項目的app.vue進行引入css文件 @import “./common/uni.css ” (還要引入uni.tff文件，否則報錯)

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xizHMjdI-1649380676444)(uniapp社區交友開發.assets/image-20220322164136184-16479384973031.png)]

引入自定義圖標

• 阿里巴巴矢量圖標庫 https://www.iconfont.cn/

• 下載所選圖標至項目打包 得到壓縮文件

• 修改icon.css文件去掉url，引入文件 測試圖標使用

  <view><text class="iconfont icon-smile" style="font-size: 100rpx; color: red;"></text> </view>

引入css動畫庫

• 下載animate.css

• 引入animate.css

• 測試css動畫庫的使用

  <view style="display: flex;justify-content: center;padding: 50rpx;"> <view class="" hover-class=" animated rubberBand" style="border: 1rpx solid black; padding: 20rpx;">點擊效果</view></view>

設置全局屬性globalStyle

• 解析page.json文件 看官方文檔

• 設置導航欄的樣式

  "globalStyle": {"navigationBarTextStyle": "black", //導航欄字體顏色"navigationBarTitleText": "社區交友",//導航欄文字"navigationBarBackgroundColor": "#FFF",//背景顏色"backgroundColor": "#FFF"}

底部導航開發

• 設置圖標（圖片為png，81*81）用矢量圖標庫下載

• 配置tabBar前提要配置pages數組頁面

  "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {}},{"path" : "pages/news/news","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/msg/msg","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/my/my","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"tabBar": {"color": "#323232","selectedColor": "#FC5C82","backgroundColor": "#FFF","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "static/tabbar/index.png","selectedIconPath": "static/tabbar/indexed.png"},{"pagePath": "pages/news/news","text": "動態","iconPath": "static/tabbar/news.png","selectedIconPath": "static/tabbar/newsed.png"},{"pagePath": "pages/msg/msg","text": "消息","iconPath": "static/tabbar/paper.png","selectedIconPath": "static/tabbar/papered.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tabbar/home.png","selectedIconPath": "static/tabbar/homeed.png"}]}

uni-app和vuejs基礎快速上手

view和text組件和動畫的使用

• hover-class的測試使用
• text的測試使用
• 兩個內置組件的使用可參考官方文檔

uniapp的css3選擇器

• 普通的選擇器 id就用#，class就用.，什么都不加默認全部

• 父級下的子級菜單的選擇器

  .box>view:first-of-type{background-color: red; } .box>view:last-of-type{background-color: pink; } .box>view:nth-child(2){background-color: yellow; }

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SvOmDgZ5-1649380676446)(uniapp社區交友開發.assets/image-20220323110150462-16480045116861.png)]

• 奇偶選擇器

  //奇數選擇器 .box>view:nth-of-type(odd){background-color: red; } //偶數選擇器 .box>view:nth-of-type(even){background-color: green; } //偶數選擇器 .box:nth-of-type(even){background-color: green; }

flex布局快速入手

• display:flex 外層使用，塊內元素擠在一行內
• justify-content:常用center，水平居中
• align-items：常用center，垂直居中
• felx-direction:改變排序方式，從行轉換成列
• felx-shirink：0 不被壓縮
• flex：1占一份 2占兩份

數據渲染

• {{}}獲取data中的數據渲染
• @tap觸發點擊事件

class和style的綁定

• 綁定class用冒號:class
• :class={‘class1’:isActive}
• s:tyle=" {‘color’: Color,‘font-size’:num+‘px’}"

條件渲染

• v-if的使用
• v-show是會渲染只是不顯示
• 一般在template里面用v-if

列表渲染

• v-for
• 官方文檔建議v-for寫在

事件處理器

• @tap點擊事件
• @tap.stop點里面不會觸發外面的事件

監聽屬性

• watch

• 測試

  <template><view><view>{{num}}</view><button @tap="changNum()">按鈕</button></view> </template><script>export default {data() {return {num:0}},watch:{num(val){console.log(val);}},methods: {changNum(){this.num++;}}} </script><style> button{background: blue;display: flex;justify-content: center;align-items: center;font-size: 15px;color: white; } </style>

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Gyz1MrF9-1649380676447)(uniapp社區交友開發.assets/image-20220323154220758-16480213421241.png)]

計算屬性

• 常用于數據的格式化

• computed

• 測試運用

  <template><view>{{formatWeight}}</view> </template><script>export default {data() {return {weight:2100}},computed:{formatWeight(){return (this.weight>1000)?this.weight/1000+'kg':this.weight+'g';}}} </script><style></style>

首頁開發

page.json配置

• 導航欄配置根據官方文檔配置

  {"path": "pages/index/index","style": {"app-plus": {// 導航欄配置"titleNView":{// 搜索框配置"searchInput":{"align":"center","backgroundColor":"#F5F4F2","borderRadius":"4px","disabled":true,"placeholder":"搜索帖子","placeholderColor":"#6D6C67"},"buttons":[{"color":"#333333","colorPressed":"#FD597C","float":"right","fontSize":"20px","fontSrc":"/static/iconfont.ttf","text":"\ue668"}]}}}}

• 用真機調試成功，微信開發者工具旁邊無顯示

圖文列表樣式

• 封裝free.css把常用樣式封裝 如==flex：display；justify-content：center；algin-items：center、

• 引入自定義css庫

• 列表開發

  <view style="padding: 20rpx;"><view class="flex;justify-between;align-center"><!-- 頭像，昵稱 --><view class="flex;align-center"><!-- 頭像 --><image src="/static/common//nothing.png" class="mr-1; rounded" style="width:65rpx;height:65rpx"></image><view><view style="font-size: 30rpx;">昵稱</view><view style="color: #9d9589;font-size: 20rpx;">2022-3-15</view></view></view ><!-- 按鈕 --><view class="flex;align-center; justify-center" style="background: #FF4A6A; width:90rpx; height:50rpx;color: white;" >關注</view></view><!-- 文章內容 --><view>哈哈哈</view><!-- 圖片 --><view class="mt-1" ><image src="/static/demo/datapic/45.jpg" style="width: 100%; height: 350rpx;" lazy-load="true"></image></view><!-- 按鈕 --><view class="flex" ><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-dianzan2 "></view><view>贊</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-cai; mr-2" ></view><view>踩</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-pinglun2; mr-2" ></view><view>評論</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-zhuanfa1; mr-2" ></view><view>轉發</view></view></view></view>

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-daoAQo1N-1649380676447)(uniapp社區交友開發.assets/image-20220323193232107.png)]

封裝列表樣式

• 繼續使用free.css封裝代碼

  <view><view class="p-2"><view class="flex;justify-between;align-center"><!-- 頭像，昵稱 --><view class="flex;align-center"><!-- 頭像 --><image src="/static/common//nothing.png" class="mr-1; rounded-circle" style="width:65rpx;height:65rpx"></image><view><view class="font" style="line-height: 1.5;">昵稱</view><view style=" ine-height: 1.5;" class="font-small; text-light-muted">2022-3-15</view></view></view ><!-- 按鈕 --><view class="flex;align-center; justify-center; rounded; text-white; bg-main" style=" width:90rpx; height:50rpx;" >關注</view></view><!-- 文章內容 --><view class="font-md; my-1">我是標題</view><!-- 圖片 --><view class="mt-1" ><image src="/static/demo/datapic/45.jpg" class="rounded" style="width: 100%; height: 350rpx;" lazy-load="true"></image></view><!-- 按鈕 --><view class="flex" ><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-dianzan2 "></view><view>贊</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-cai; mr-2" ></view><view>踩</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-pinglun2; mr-2" ></view><view>評論</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-zhuanfa1; mr-2" ></view><view>轉發</view></view></view></view></view>

• 封裝本項目公共css（common.css 記得引入）

  .bg-main{background: #FF4A6A; }

• 封裝成組件動態渲染

  <block v-for="(item,index) in list" :key="index"><commonList :item="item" :index="index" ></commonList></block>import commonList from '@/components/common/common-list';components:{commonList},<view class="p-2"><view class="flex;justify-between;align-center"><!-- 頭像，昵稱 --><view class="flex;align-center"><!-- 頭像 --><image :src="item.userPic" class="mr-1; rounded-circle" style="width:65rpx;height:65rpx"></image><view><view class="font" style="line-height: 1.5;">{{item.username}}</view><view style=" ine-height: 1.5;" class="font-small; text-light-muted">{{item.newstime}}</view></view></view ><!-- 按鈕 --><view class="flex;align-center; justify-center; rounded; text-white; bg-main" style=" width:90rpx; height:50rpx;" >關注</view></view><!-- 文章內容 --><view class="font-md; my-1">{{item.title}}</view><!-- 圖片 --><view class="mt-1" ><image :src="item.titlePic" class="rounded" style="width: 100%; height: 350rpx;" lazy-load="true"></image></view><!-- 按鈕 --><view class="flex" ><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-dianzan2; mr-2"></view><view>{{item.support.support_count}}</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-cai; mr-2" ></view><view>{{item.support.unsupport_count}}</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-pinglun2; mr-2" ></view><view>{{item.comment_count}}</view></view><view class="flex;align-center; justify-center flex-1"><view class="iconfont icon-zhuanfa1; mr-2" ></view><view>{{item.share_num}}</view></view></view></view>export default{props:{item:Object,key:Number}}

全局分割線開發

• 封裝組件divider.vue

  <!-- 分割線樣式 --><view style="height: 15rpx; background-color: #F5F5F4;"></view>

• 引入全局組件（分割線常用）

  import divider from '@/components/common/divider.vue'; Vue.component('divider',divider);<block v-for="(item,index) in list" :key="index"><commonList :item="item" :index="index"></commonList><divider></divider> </block>

優化列表組件-動畫特效

• 圖片顯示優化
• 關注、圖標的點擊動畫特效（jello）
• 圖標主色調變化 加字體顏色
• 為各元素添加click事件 （頭像、關注、標題、圖片、點贊、踩）

<template><view><view class="p-2"><view class="flex;justify-between;align-center"><!-- 頭像，昵稱 --><view class="flex;align-center"><!-- 頭像 --><image :src="item.userPic" class="mr-1; rounded-circle" style="width:65rpx;height:65rpx" @click="openSapce()"></image><view><view class="font" style="line-height: 1.5;">{{item.username}}</view><view style=" ine-height: 1.5;" class="font-small; text-light-muted">{{item.newstime}}</view></view></view><!-- 按鈕 --><view class="flex;align-center; justify-center; rounded; text-white; bg-main; animated faster "style=" width:90rpx; height:50rpx;" hover-class="rubberBand" @click="follow()">關注</view></view><!-- 文章內容 --><view class="font-md; my-1" @click="openDetail()" >{{item.title}}</view><!-- 圖片 --><view class="mt-1" v-if="item.titlePic" @click="openDetail()"><image :src="item.titlePic" class="rounded" style="width: 100%; height: 350rpx;" lazy-load="true"></image></view><!-- 按鈕 --><view class="flex"><view class="flex;align-center; justify-center flex-1 animated faster" hover-class="jello text-main" @click="doSupport('support')"><view class="iconfont icon-dianzan2; mr-2;"></view><view>{{item.support.support_count}}</view></view><view class="flex;align-center; justify-center flex-1 animated faster" hover-class="jello text-main" @click="doSupport('unsupport')"><view class="iconfont icon-cai; mr-2 "></view><view>{{item.support.unsupport_count}}</view></view><view class="flex;align-center; justify-center flex-1 animated faster" hover-class="jello text-main" @click="openDetail()"><view class="iconfont icon-pinglun2; mr-2"></view><view>{{item.comment_count}}</view></view><view class="flex;align-center; justify-center flex-1 animated faster" hover-class="jello text-main" @click="openDetail()"><view class="iconfont icon-zhuanfa1; mr-2"></view><view>{{item.share_num}}</view></view></view></view></view> </template><script>export default {props: {item: Object,index: Number},methods:{openSapce(){console.log("打開個人空間");},follow(){console.log("關注");},openDetail(){console.log("打開詳情頁");},doSupport(type){console.log(type);}}} </script><style> </style>

優化列表組件-關注功能

• 關注按鈕的顯示
• 子組件觸發父組件方法更新isFollowz

<view class="flex;align-center; justify-center; rounded; text-white; bg-main; animated faster "style=" width:90rpx; height:50rpx;" hover-class="rubberBand" @click="follow()" v-if="!item.isFollow">關注</view>follow(){// 觸發父級follow方法this.$emit('follow',this.index);},<commonList :item="item" :index="index" @follow="follow(index)"></commonList>methods: {follow(index){this.list[index].isFollow=true;uni.showToast({title:'關注成功'})}}

優化列表組件-頂踩功能

• 綁定class渲染
• 方法參數傳遞
• 父方法實現

<view class="flex;align-center; justify-center flex-1 animated faster" hover-class="jello text-main" @click="doSupport('support')":class="item.support.type==='support'?'support-active':''"><view class="iconfont icon-dianzan2; mr-2;"></view><view>{{item.support.support_count>0?item.support.support_count:'支持'}}</view></view>doSupport(type){this.$emit('doSupport',{type:type,index:this.index})}<commonList :item="item" :index="index" @follow="follow" @doSupport="doSupport"></commonList>doSupport(e) {let obj=this.newList[this.tabIndex].list[e.index]console.log(obj);if (obj.support.type === '') {//無操作obj.support[e.type + '_count']++;} else if (obj.support.type === 'support' && e.type === 'unsupport') {//之前是頂，頂減一，踩加一obj.support.support_count--;obj.support.unsupport_count++;} else if (obj.support.type === 'unsupport' && e.type === 'support') {//之前是踩，頂加一，踩減一obj.support.support_count++;obj.support.unsupport_count--;}obj.support.type = e.type;let msg = e.type === 'support' ? '頂' : '踩';uni.showToast({title: msg + '成功'})},

滾動tab導航開發

• 頂部導航選項卡

  <scroll-view class="scroll-row border-bottom" scroll-x="true" :scroll-into-view="scrollInto" scroll-with-animation="true"><view v-for="(item,index) in tabBars" :key="index" class="scroll-row-item px-3 py-2 font-md " :id="'tab'+index":class="tabIndex===index?'text-main font-lg font-weight-bold':''" @click="doTab(index)">{{item.name}}</view></scroll-view>tabIndex:0,scrollInto:'',tabBars:[{name:'首頁'},{name:'體育'},{name:'軍事'},{name:'熱點'},{name:'新聞'},{name:'娛樂'},{name:'電競'},{name:'國際'},{name:'國家'}],doTab(index){this.tabIndex=index;this.scrollInto='tab'+index;}

• 下面容器能做到切換與導航欄一樣，容器也能拉取

  <swiper duration=150 @change="onChange" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item v-for="(item,index) in tabBars" :key="index" ><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"><view v-for="i in 100">{{i}}</view></scroll-view></swiper-item></swiper>doTab(index){this.tabIndex=index;this.scrollInto='tab'+index;},onChange(e){this.doTab(e.detail.current);}onLoad() {const res = uni.getSystemInfoSync();this.scrollH=res.windowHeight-uni.upx2px(101);console.log(this.scrollH);},

• 列表顯示

  <swiper duration=150 @change="onChange" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item v-for="(item,index) in newList" :key="index" ><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"><block v-for="(item2,index2) in item.list" :key="index"><commonList :item="item2" :index="index2" @follow="follow()" @doSupport="doSupport()"></commonList><divider></divider></block></scroll-view></swiper-item></swiper>getData(){let arr=[];for (var i = 0; i < this.tabBars.length; i++) {arr.push({list: [{userPic: '/static/common//nothing.png',username: '',newstime: '',isFollow: false,title: '我是標題',titlePic: '/static/demo/datapic/45.jpg',support: {type: 'support',support_count: 1,unsupport_count: 2},comment_count: 1,share_num: 0},{userPic: '/static/common//nothing.png',username: '',newstime: '',isFollow: false,title: '我是標題',titlePic: '',support: {type: 'unsupport',support_count: 2,unsupport_count: 2},comment_count: 1,share_num: 1},{userPic: '/static/common//nothing.png',username: '',newstime: '',isFollow: false,title: '我是標題',titlePic: '',support: {type: '',support_count: 2,unsupport_count: 2},comment_count: 1,share_num: 1}]})};this.newList=arr;},

上拉加載組件開發

• 靜態的開發

  <scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)"><block v-for="(item2,index2) in item.list" :key="index"><commonList :item="item2" :index="index2" @follow="follow()" @doSupport="doSupport()"></commonList><divider></divider></block><view class="py-2 flex justify-center align-center"><view class="text-light-muted">{{item.loading}}</view></view></scroll-view>

• 觸底函數的開發

  loadMore(index){let item=this.newList[index];item.loading='加載中.';setTimeout(()=>{//復制文本item.list=[...item.list,...item.list];},2000)}

封裝上拉加載組件

• 優化加載判斷

  loadMore(index){let item=this.newList[index];if(!item==='上拉加載更多'){return;}item.loading='加載中...';setTimeout(()=>{item.list=[...item.list,...item.list];item.loading='上拉加載更多';},10000)}

• 封裝load-more.vue 并引入

  <template><view class="py-2 flex justify-center align-center"><view class="text-light-muted">{{loading}}</view></view> </template><script>export default{props:{loading:String}} </script>import loadMore from '@/components/common/load-more';export default {components: {commonList,loadMore}, }

封裝無數據默認組件

• 無數據環境測試

  const demo=[{userPic: '/static/common//nothing.png',username: '',newstime: '',isFollow: false,title: '我是標題',titlePic: '/static/demo/datapic/45.jpg',support: {type: 'support',support_count: 1,unsupport_count: 2},comment_count: 1,share_num: 0},{userPic: '/static/common//nothing.png',username: '',newstime: '',isFollow: false,title: '我是標題',titlePic: '/static/demo/datapic/45.jpg',support: {type: 'unsupport',support_count: 2,unsupport_count: 2},comment_count: 1,share_num: 1},{userPic: '/static/common//nothing.png',username: '',newstime: '',isFollow: false,title: '我是標題',titlePic: '',support: {type: '',support_count: 2,unsupport_count: 2},comment_count: 1,share_num: 1}]getData() {let arr = [];for (var i = 0; i < this.tabBars.length; i++) {let obj = {loading:'上拉加載更多',list: []}if(i<2){obj.list=demo;}arr.push(obj)};this.newList = arr;},

• 封裝nothing.vue組件 全局引入

  <template v-if="item.list.length>0"><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)"><block v-for="(item2,index2) in item.list" :key="index"><commonList :item="item2" :index="index2" @follow="follow()" @doSupport="doSupport()"></commonList><divider></divider></block><loadMore :loading="item.loading"></loadMore></scroll-view></template><template v-else><no-thing></no-thing></template>import noThing from '@/components/common/no-thing.vue'; Vue.component('no-thing',noThing);

搜索頁開發

• 創建頁面search，配置pages.json

  {"path": "pages/index/index","style": {"app-plus": {// 導航欄配置"titleNView":{// 搜索框配置"searchInput":{"align":"center","backgroundColor":"#F5F4F2","borderRadius":"4px","disabled":true,"placeholder":"搜索帖子","placeholderColor":"#6D6C67"},"buttons":[{"color":"#333333","colorPressed":"#FD597C","float":"right","fontSize":"20px","fontSrc":"/static/iconfont.ttf","text":"\ue668"}]}}}},{"path" : "pages/news/news","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/msg/msg","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/my/my","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/search/search","style": {"app-plus": {// 導航欄配置"titleNView":{// 搜索框配置"searchInput":{"align":"center","backgroundColor":"#F5F4F2","borderRadius":"4px","placeholder":"搜索帖子","placeholderColor":"#6D6C67"},"buttons":[{"color":"#333333","colorPressed":"#FD597C","float":"right","fontSize":"14px","text":"搜索"}]}}}}

• 監聽點擊導航欄搜索框事件， 實現跳轉，用官方api

  onNavigationBarSearchInputClicked() {uni.navigateTo({url: '../search/search'})},

• 搜索歷史開發

  <view><view class="py-2 font-md px-2">搜索歷史</view><view class="flex flex-wrap"><view class="border rounded font mx-2 my-1 px-2 " v-for="(item,index) in list" :key="index"hover-class="bg-light">{{item}}</view></view></view>

• 監聽導航輸入

  onNavigationBarSearchInputChanged(e) {this.searchText=e.text;}

• 監聽導航搜索按鈕

  onNavigationBarButtonTap(e) {if(e.index===0){this.searchEvent();}},

• 搜索事件， 收起鍵盤，處于loading狀態， 展示搜索結果，隱藏loading提示框

  searchEvent(){uni.hideKeyboard();uni.showLoading({title:'加載中'})setTimeout(()=>{this.serachList=demo;uni.hideLoading();},3000)}

• 搜索結果列表 引入commonlist，遍歷，優化搜索歷史與列表存在問題

  <view><template v-if="this.serachList.length===0"><view class="py-2 font-md px-2">搜索歷史</view><view class="flex flex-wrap"><view class="border rounded font mx-2 my-1 px-2 " v-for="(item,index) in list" :key="index"hover-class="bg-light">{{item}}</view></view></template><template v-else><block v-for="(item,index) in serachList" :key="index" ><commonList :item="item" :index="index"></commonList></block></template></view>import commonList from '@/components/common/common-list.vue';export default {components:{commonList}, }

• 點擊搜索歷史的事件

  <view class="flex flex-wrap"><view class="border rounded font mx-2 my-1 px-2 " v-for="(item,index) in list" :key="index"hover-class="bg-light" @click="historyEvent(item)">{{item}}</view></view>historyEvent(item){console.log(item);this.searchText=item;this.searchEvent();}

發布表單頁面開發

自定義導航欄開發

• 新建發布頁面add-input，取消原生導航

  {"path" : "pages/add-input/add-input","style" : {"app-plus": {"titleNView": false}}}

• 首頁導航按鈕跳轉頁面

  onNavigationBarButtonTap() {uni.navigateTo({url:'../add-input/add-input'})},

• 自定義導航欄，添加uni-nav-bar依賴， 根據官方文檔調用

  <uni-nav-bar left-icon="back" statusBar><view class="flex justify-center align-center w-100">所有人可見<text class="iconfont icon-shezhi ml-1"></text></view></uni-nav-bar>

textarea組件使用

• utextarea， 動態綁定

  <textarea v-model="content" placeholder="說一句話吧~" class="px-2 uni-textarea" />

底部操作條組件開發

<view style="height: 85rpx" class="fixed-bottom bg-white flex align-center"><view class="iconfont icon-caidan footer-btn"></view><view class="iconfont icon-huati footer-btn"></view><view class="iconfont icon-tupian footer-btn"></view><view class="bg-main text-white justify-center align-center ml-auto flex mr-2" style="width: 140rpx; height: 60rpx;">發送</view></view><style> .footer-btn{width: 86rpx;height: 86rpx;justify-content: center;display: flex;align-items: center;font-size: 50rpx; } </style>

上傳多圖功能開發

• upload-image組件開發， 引官方組件，對應引入也需要引入

• 對官方組件的修改 添加mode壓縮，修改內邊距， 修改圓角

  <view class="px-2"><view class="uni-uploader"><view class="uni-uploader-head"><view class="uni-uploader-title">點擊可預覽選好的圖片</view><view class="uni-uploader-info">{{imageList.length}}/9</view></view><view class="uni-uploader-body"><view class="uni-uploader__files"><block v-for="(image,index) in imageList" :key="index"><view class="uni-uploader__file"><image class="uni-uploader__img rounded" :src="image" :data-src="image"@tap="previewImage" mode="aspectFill"></image></view></block><view class="uni-uploader__input-box"><view class="uni-uploader__input rounded" @tap="chooseImage"></view></view></view></view></view></view>

• 上傳圖片成功的內容保存 上傳圖片的回調success方法中

  success: (res) => {this.imageList = this.imageList.concat(res.tempFilePaths);this.$emit('choose',this.imageList);},<uploadImage @choose="choose"></uploadImage>choose(e){console.log(e);this.imageList=e;}

刪除選中圖片功能實現

• 靜態圖標的實現

  <block v-for="(image,index) in imageList" :key="index"><view class="uni-uploader__file position-relative"><image class="uni-uploader__img rounded" :src="image" :data-src="image"@tap="previewImage" mode="aspectFill"></image><view class="bg-dark position-absolute top-0 right-0 rounded"style="padding: 0 15rpx; background-color: rgba(0, 0, 0, 0.5);"><text class="iconfont icon-shanchu text-white"></text></view></view></block>

• 添加刪除功能的函數， 通知父組件， 優化父組件方法， 給予交互反饋提示

  <text class="iconfont icon-shanchu text-white" @click="deleteImage(index)"></text>deleteImage(index){uni.showModal({title:'提示',content:'是否要刪除該圖片',confirmText:'刪除',cancelText:'不刪除',success: (res) => {if(res.confirm){this.imageList.splice(index,1);this.$emit('change',this.imageList);}}})},

保存草稿功能開發

• 添加返回首頁方法

  <uni-nav-bar left-icon="back" statusBar @clickLeft="goBack"><view class="flex justify-center align-center w-100 font-weight-bold">所有人可見<text class="iconfont icon-shezhi ml-1"></text></view></uni-nav-bar>goBack(){uni.navigateBack({delta:1})},

• 監聽返回， 交互提示反饋 return true即能返回

  onBackPress() {if((this.content!==''||this.imageList.length>0)&&!this.showBack){uni.showModal({content: '是否保存為草稿',showCancel: true,cancelText: '不保存',confirmText: '保存',success: res => {if(res.confirm){console.log('保存');}//手動執行返回// goBack(){// uni.navigateBack({// delta:1// })// },this.goBack();}});this.showBack=true;return true;}},

• 保存的方法

  store(){let obj={content:this.content,imageList:this.imageList};uni.setStorage({key:'add-input',data:JSON.stringify(obj)})}

• 取出的方法 用同步取出

  onLoad() {var res=uni.getStorageSync('add-input');if(res){var obj=JSON.parse(res);// console.log(result);this.content=obj.content;this.imageList=obj.imageList;}},

• 優化圖片的草稿功能， 上傳圖片的組件imageList要用props傳值

  <uploadImage :list="imageList" @change="change"></uploadImage>//組件里面props: {list: Array},created(){this.imageList=this.list;},

• 不保存草稿功能的實現， 清楚緩存

  onBackPress() {if((this.content!==''||this.imageList.length>0)&&!this.showBack){uni.showModal({content: '是否保存為草稿',showCancel: true,cancelText: '不保存',confirmText: '保存',success: res => {if(res.confirm){// console.log('保存');this.store();}else{uni.removeStorageSync('add-input');}//手動執行返回this.goBack();}});this.showBack=true;return true;}},

• 下面圖標插入圖片的方法（優化不需要上傳圖片時隱藏上傳圖片組件）

  <view class="iconfont icon-tupian footer-btn" @click="iconClickEvent('uploadImage')"></view><uploadImage ref="uploadImage" :show="show" :list="imageList" @change="change"></uploadImage>iconClickEvent(e){switch (e){case 'uploadImage': this.$refs.uploadImage.chooseImage();break;}}computed:{show(){return this.imageList.length>0;}}，在子組件中加入v-if=“show”

動態列表頁開發

導航欄tab導航開發

• 自定義導航欄的靜態開發

  <uni-nav-bar statusBar="true" border="false" ><view class="flex align-center justify-center font-weight-bold w-100"><view class="font-lg text-main mx-1">關注</view><view class="font-md text-light-muted mx-1">話題</view></view><view slot="right" class="iconfont icon-fatie_icon"></view></uni-nav-bar>

• 取消原生導航欄

  {"path": "pages/news/news","style": {"app-plus": {"titleNView": false}}},

• 導航欄右邊圖標的單擊事件

  <uni-nav-bar statusBar="true" border="false" @clickRight="openAddInput"><view class="flex align-center justify-center font-weight-bold w-100"><view class="font-lg text-main mx-1">關注</view><view class="font-md text-light-muted mx-1">話題</view></view><view slot="right" class="iconfont icon-fatie_icon"></view></uni-nav-bar>openAddInput(){uni.navigateTo({url: '../add-input/add-input'})}

• tabBar的動態循環渲染

  <uni-nav-bar statusBar="true" border="false" @clickRight="openAddInput"><view class="flex align-center justify-center font-weight-bold w-100 font-md text-light-muted"><view v-for="(item,index) in tabBars" :key="index":class="tabIndex===index? 'text-main font-lg':''"@click="changeTab(index)" class="mx-1">{{item.name}}</view></view><view slot="right" class="iconfont icon-fatie_icon"></view></uni-nav-bar>data() {return {tabIndex:0,tabBars:[{name:'關注'},{name:'話題'}]}},changeTab(index){this.tabIndex=index;}

關注列表頁開發

滑動滾動區域計算

• 引入首頁的swipper和scrollview組件， 對應修改即可

  <swiper duration=150 @change="onChange" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"></scroll-view></swiper-item></swiper>

• 計算區域高度

  onLoad() {const res = uni.getSystemInfoSync();this.scrollH=res.screenHeight-res.statusBarHeight-44;console.log(this.scrollH);},

導航列表聯動實現

• 有兩個swipperitem 表示關注和話題

  <swiper duration=150 @change="onChange" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"><view v-for=" (item,index) in 100" :key="index">{{item}}</view></scroll-view></swiper-item><swiper-item><view>話題</view></swiper-item></swiper>

• 引入common-list組件

• 分割線的使用

  <swiper-item><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"><block v-for="(item,index) in list" :key="index" ><commonList :item="item" :index="index"></commonList><divider></divider></block></scroll-view></swiper-item><swiper-item><view>話題</view></swiper-item>

• 導航與列表的聯動實現

  <swiper duration=150 @change="onChangeTab" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"><block v-for="(item,index) in list" :key="index" ><commonList :item="item" :index="index"></commonList><divider></divider></block></scroll-view></swiper-item><swiper-item><view>話題</view></swiper-item></swiper>onChangeTab(e){// console.log(e.detail);this.tabIndex=e.detail.current;}

頂踩操作和下拉加載功能 copy首頁即可

• 移植頂踩操作
• 下拉加載的開發

關注列表頁開發

熱門分類組件開發

• 靜態頁面開發

  <swiper-item><view class="flex justify-between align-center px-2"><text class="font-md">熱門分類</text><view class="flex align-center font text-secondary">更多<text class="iconfont icon-jinru"></text></view></view><view class="flex align-center border-bottom px-2 py-3"><view class="rounded border bg-light mx-1 px-2">關注</view><view class="rounded border bg-light mx-1 px-2">關注</view><view class="rounded border bg-light mx-1 px-2">關注</view><view class="rounded border bg-light mx-1 px-2">關注</view></view></swiper-item>

• 添加點擊動畫效果

  <view class="rounded border bg-light mx-1 px-2 animated" hover-class="jello">關注</view>

封裝熱門分類組件

• 熱門分類對象數組構建

  hotCate:[{name:'關注'},{name:'推薦'},{name:'體育'},{name:'軍事'}]

• 封裝組件， 導入組件，遍歷輸出， 父子傳值

• 留兩個接口

  <hotCate :hotCate="hotCate"></hotCate><template><view><view class="flex justify-between align-center px-2"><text class="font-md">熱門分類</text><view class="flex align-center font text-secondary animated" hover-class="jello" @click="openMore">更多<text class="iconfont icon-jinru"></text></view></view><view class="flex align-center border-bottom px-2 py-3"><view class="rounded border bg-light mx-1 px-2 animated" hover-class="jello"v-for="(item,index) in hotCate" :key="index" @click="openDetail">{{item.name}}</view></view></view> </template><script>export default{props:['hotCate'],methods:{openMore(){console.log("點擊更多");},openDetail(){console.log("點擊進入詳情頁");}}} </script><style> </style>

輪播圖和搜索框的開發

• 靜態頁面開發

  <view class="p-2"><view class="flex align-center justify-center py-2 rounded bg-light text-secondary"><text class="iconfont icon-sousuo mr-2"></text>搜索話題</view></view><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="px-2 pb-2"><swiper-item><image src="/static/demo/banner3.jpg" class="w-100 rounded" style="height: 300rpx;"></image></swiper-item></swiper><divider></divider>

話題列表組件開發

• 靜態頁面開發

  <view class="p-2 font-md"> 最近更新</view><view class="flex align-center p-2"><image src="../../static/demo/topicpic/1.jpeg" style="width: 150rpx; height: 150rpx;"class="rounded mr-2"></image><view class="flex flex-column "><text class="font-md text-dark">話題哈哈哈</text><text class="font text-secondary">話題描述</text><view class="flex align-center font text-secondary"><text class="mr-2">今日:0</text><text>關注:0</text></view></view></view>

封裝話題列表組件

• 聲明topicList

  topicList: [{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'}]

• 封裝組件，引入組件

  <block v-for="(item,index) in topicList" :key="index"><topicList :item="item" :index="index"></topicList></block><view class="flex align-center p-2"><image :src="item.cover" style="width: 150rpx; height: 150rpx;"class="rounded mr-2"></image><view class="flex flex-column "><text class="font-md text-dark">{{item.title}}</text><text class="font text-secondary">{{item.desc}}</text><view class="flex align-center font text-secondary"><text class="mr-2">動態:{{item.news_count}}</text><text>今日:{{item.today_count}}</text></view></view></view>

話題分類頁開發

• 新建頁面

  {"path" : "pages/topic-nav/topic-nav","style" : {"navigationBarTitleText": "話題分類"}}

• 導航進入

  openMore(){uni.navigateTo({url:'../topic-nav/topic-nav'})},

• 引入首頁，修改topic—nav頁面，修改common-list組件， 修改數據

  <template><view><scroll-view class="scroll-row border-bottom border-light-secondary" scroll-x="true":scroll-into-view="scrollInto" scroll-with-animation="true" style="height: 100rpx;"><view v-for="(item,index) in tabBars" :key="index" class="scroll-row-item px-3 py-2 font-md ":id="'tab'+index" :class="tabIndex===index?'text-main font-lg font-weight-bold':''"@click="doTab(index)">{{item.name}}</view></scroll-view><swiper duration=150 @change="onChange" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item v-for="(item,index) in newList" :key="index"><template v-if="item.list.length>0"><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)"><block v-for="(item2,index2) in item.list" :key="index"><!-- <commonList :item="item2" :index="index2" @follow="follow()" @doSupport="doSupport()"></commonList> --><topicList :item="item2" :index="index2"></topicList></block><loadMore :loading="item.loading"></loadMore></scroll-view></template><template v-else><no-thing></no-thing></template></swiper-item></swiper></view> </template><script>import topicList from '@/components/news/topic-list';import loadMore from '@/components/common/load-more';const demo = [{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'},{cover: '/static/demo/topicpic/1.jpeg',title: '話題標題',desc: '話題描述',news_count: '10',today_count: '10'}];export default {components: {topicList,loadMore},data() {return {scrollH: 200,tabIndex: 0,scrollInto: '',newList: [],tabBars: [{name: '首頁'},{name: '體育'},{name: '軍事'},{name: '熱點'},{name: '新聞'},{name: '娛樂'},{name: '電競'},{name: '國際'},{name: '國家'}]}},onNavigationBarSearchInputClicked() {uni.navigateTo({url: '../search/search'})},onLoad() {const res = uni.getSystemInfoSync();this.scrollH = res.windowHeight - uni.upx2px(101);this.getData();},onNavigationBarButtonTap() {uni.navigateTo({url:'../add-input/add-input'})},methods: {getData() {let arr = [];for (var i = 0; i < this.tabBars.length; i++) {let obj = {loading: '上拉加載更多',list: []}if (i < 2) {obj.list = demo;}arr.push(obj)};this.newList = arr;},follow(index) {this.list[index].isFollow = true;uni.showToast({title: '關注成功'})},doSupport(e) {let obj = this.list[e.index];if (obj.support.type === '') {//無操作obj.support[e.type + '_count']++;} else if (obj.support.type === 'support' && e.type === 'unsupport') {//之前是頂，頂減一，踩加一obj.support.support_count--;obj.support.unsupport_count++;} else if (obj.support.type === 'unsupport' && e.type === 'support') {//之前是踩，頂加一，踩減一obj.support.support_count++;obj.support.unsupport_count--;}obj.support.type = e.type;let msg = e.type === 'support' ? '頂' : '踩';uni.showToast({title: msg + '成功'})},doTab(index) {this.tabIndex = index;this.scrollInto = 'tab' + index;},onChange(e) {this.doTab(e.detail.current);},loadMore(index) {let item = this.newList[index];if ((item.loading) !== '上拉加載更多') {return;}item.loading = '加載中...';setTimeout(() => {item.list = [...item.list, ...item.list];item.loading = '上拉加載更多';}, 2000)}}} </script><style></style>

話題詳情頁開發

page.json配置

• 新建topic-detail頁面

• 配置導航欄， 漸變式透明， 圖標

  {"path" : "pages/topic-detail/topic-detail","style" : {"navigationBarTitleText": "","app-plus": {"titleNView": {"type": "transparent","buttons": [{"type": "menu"}]}}} }

• 導航到話題詳情頁， 傳遞json字符串對象， 接受數據轉換object

  <view class="flex align-center p-2" @click="openDetail(item)">openDetail(item){uni.navigateTo({url:'../topic-detail/topic-detail?detail='+JSON.stringify(item)})}onLoad(e){if(e.detail){var obj=JSON.parse(e.detail);// console.log(obj);}},

話題介紹組件開發

• 圖片模糊狀態

• 靜態開發

  <view><view class="position-relative"><image src="/static/demo/topicpic/1.jpeg" mode="aspectFill"style="height: 300rpx;" class="w-100 filter"></image></view><view class=" px-2 bg-white position-relative" style="z-index: 10;"><view class="flex align-center"><image src="/static/demo/topicpic/1.jpeg" class="w-100" style="height: 150rpx; width: 150rpx;margin-top: -75rpx;"></image><text class="font-md">#話題標題#</text></view><view class="flex align-center font text-secondary mt-2"><text class="mr-1">動態：0</text><text>今日：0</text></view><view class="font text-secondary">話題描述</view></view></view><style> .filter{filter: blur(10px); } </style>

封裝話題介紹組件

• 新建topic-info組件

• 動態替換， 數據渲染

  <template><view><view class="position-relative"><image :src="info.cover" mode="aspectFill" style="height: 300rpx;" class="w-100 filter"></image></view><view class=" px-2 bg-white position-relative pb-1" style="z-index: 10;"><view class="flex align-center"><image :src="info.cover" class="w-100" style="height: 150rpx; width: 150rpx;margin-top: -75rpx;"></image><text class="font-md">{{info.title}}</text></view><view class="flex align-center font text-secondary mt-2"><text class="mr-1">動態：{{info.news_count}}</text><text>今日：{{info.today_count}}</text></view><view class="font text-secondary">{{info.desc}}</view></view></view> </template><script>export default {props:['info']} </script><style> </style><topicInfo :info="info"></topicInfo><divider></divider>

精華帖子列表組件開發

<view class="flex p-2 border-bottom"><text class="iconfont icon-xihuan text-main"></text><text class="font text-darker text-ellipsis"> 【新人必讀】uni-app實戰項目第四季社區交友開發</text></view><view class="flex p-2 border-bottom"><text class="iconfont icon-xihuan text-main"></text><text class="font text-darker text-ellipsis"> 【新人必讀】uni-app實戰項目第四季社區交友開發</text></view>

tab選項卡組件開發

• 優化精華帖子列表開發， 用循環

  <block v-for="(item,index) in hotList" :key="index"><view class="flex p-2 border-bottom"><text class="iconfont icon-xihuan text-main"></text><text class="font text-darker text-ellipsis">{{item.title}}</text></view></block>hotList: [{title: '【新人必讀】uni-app實戰項目第四季社區交友開發'},{title: '【新人必讀】Hillky社區規范'}]

• tab選項開發

  <view class="flex align-center py-2"><text class="flex-1 flex align-center justify-center font-weight-bold font-lg text-main">默認</text><text class="flex-1 flex align-center justify-center font-weight-bold font-md text-dark">最新</text></view>

• 列表開發， 引入公共列表， 聲明兩個數組list1,2

  <block v-for="(item,index) in list1" :key="index"><commonList :item="item" :index="index"></commonList></block>

• tab切換實現

  <view class="flex align-center py-2" ><text class="flex-1 flex align-center justify-center"v-for="(item,index) in tabBar" :key="index":class="tabIndex===index?'font-lg text-main font-weight-bold':'font-md text-dark'"@click="changeTab(index)">{{item.name}}</text></view>tabIndex: 0,tabBar:[{name:'默認'},{name:'最新'}]

利用計算屬性實現列表切換

• 用計算屬性切換數組

  computed: {listData() {if (this.tabIndex === 0) {return this.list1;}if (this.tabIndex === 1) {return this.list2;}}},

• 遍歷列表要分割線

• 判斷數組長度， 用nothing組件

  <template v-if="listData.length>0"><block v-for="(item,index) in listData" :key="index"><commonList :item="item" :index="index"></commonList><divider></divider></block></template><template v-else><no-thing></no-thing></template>

話題詳情上拉加載實現

• 觸底事件

  onReachBottom() {this.loadMore();},

• 引入上拉加載組件

  import loadMore from '@/components/common/load-more';<loadMore :loading="loadText"></loadMore>

• loadText計算屬性區分是哪個列表的上拉加載

  loadText1:'上拉加載更多', loadText2:'上拉加載更多'loadText(){if(this.tabIndex===0){return this.loadText1}else{return this.loadText2}}

• 上拉加載更多事件

  loadMore(){let index =this.tabIndexif(this['loadText'+(index+1)]!=='上拉加載更多'){return;}this['loadText'+(index+1)]='加載中...'setTimeout(()=>{this['loadText'+(index+1)]='上拉加載更多';this['list'+(index+1)]=[...this['list'+(index+1)],...this['list'+(index+1)]];},2000)}

消息列表頁面開發

page.json配置

• 配置頂部導航欄， 配置左右圖標

  {"path": "pages/msg/msg","style": {"navigationBarTitleText": "消息列表","app-plus": {"titleNView": {"buttons": [{"color": "#333333","colorPressed": "#FD597C","float": "left","fontSize": "20px","fontSrc": "/static/iconfont.ttf","text": "\ue611"},{"color": "#333333","colorPressed": "#FD597C","float": "right","fontSize": "20px","fontSrc": "/static/iconfont.ttf","text": "\ue649"}]}}}

消息列表組件開發

• 靜態開發

• 引入數字腳標組件

  <view><view class="flex align-center justify-center p-2 border-bottom border-light-secondary"><image src="../../static/default.jpg" style="height: 80rpx; width: 80rpx;" class="rounded-circle mr-2"></image><view class="flex-column flex flex-1"><view class="flex align-center justify-between"><text class="font-md text-dark">昵稱</text><text class="font-sm text-secondary">17:00</text></view><view class="py-1 flex align-center justify-between"><view class=" font-sm text-secondary">內容</view><uni-badge text="1" type="error"></uni-badge></view></view></view></view>

封裝消息列表組件

• 優化內容， 添加對應css和最大寬度

  <view class="pt-1 flex align-center justify-between"><view class=" font-sm text-secondary text-ellipsis" style="max-width: 500rpx;">內容內容內容內容內容內容內容內容內容內容內容內容內容</view><uni-badge text="1" type="error"></uni-badge></view>

• 封裝數據，封裝組件， 時間使用在線時間戳

• 引入time.js， 使用對應庫，使用過濾器

  import $T from '@/common/time.js'filters:{formatTime(value){return $T.gettime(value);}},

• 組件分離

  <block v-for="(item,index) in list" :key="index"><msgList :item="item" :index="index"></msgList></block><template><view class="flex align-center justify-center p-2 border-bottom border-light-secondary"><image :src="item.avatar" style="height: 80rpx; width: 80rpx;" class="rounded-circle mr-2"></image><view class="flex-column flex flex-1"><view class="flex align-center justify-between"><text class="font-md text-dark">{{item.username}}</text><text class="font-sm text-secondary">{{item.update_time | formatTime}}</text></view><view class="pt-1 flex align-center justify-between"><view class=" font-sm text-secondary text-ellipsis" style="max-width: 500rpx;">{{item.data}}</view><uni-badge :text="item.noread" type="error"></uni-badge></view></view></view> </template><script>import $T from '@/common/time.js'export default {props:{item:Object,index:Number},filters: {formatTime(value){// console.log(value);return $T.gettime(value);}}} </script><style> </style>

下拉刷新功能實現

• page.json配置

  "enablePullDownRefresh": true,

• 監聽下拉刷新， 寫入方法

  onPullDownRefresh() {this.refresh();},refresh(){setTimeout(()=>{this.list=demo;uni.stopPullDownRefresh();},2000);}

• 引入nothing組件， v-if判斷

  <template><view><template v-if="this.list.length>0"><block v-for="(item,index) in list" :key="index"><msgList :item="item" :index="index"></msgList></block></template><template v-else><no-thing></no-thing></template></view> </template><script>const demo=[{avatar:'../../static/default.jpg',username:'昵稱',update_time:1648458088,data:'內容內容內容內容內容內容內容內容內容內容內容內容內容',noread:20},{avatar:'../../static/default.jpg',username:'昵稱',update_time:1648458088,data:'內容內容內容內容內容內容內容內容內容內容內容內容內容',noread:20},{avatar:'../../static/default.jpg',username:'昵稱',update_time:1648458088,data:'內容內容內容內容內容內容內容內容內容內容內容內容內容',noread:20},{avatar:'../../static/default.jpg',username:'昵稱',update_time:1648458088,data:'內容內容內容內容內容內容內容內容內容內容內容內容內容',noread:20}];import msgList from '@/components/msg/msg-list';export default {components:{msgList},data() {return {list:[]}},onLoad() {this.list=demo;console.log(this.list);},onPullDownRefresh() {this.refresh();},methods: {refresh(){setTimeout(()=>{this.list=[...this.list,...this.list];uni.stopPullDownRefresh();},2000);}}} </script><style></style>

下拉彈出層組件使用

• 使用uni-poup組件，

• 監聽原生導航欄按鈕事件，彈出彈出層

  <uni-popup ref="popup" type="top" background-color="#fff">123</uni-popup>onNavigationBarButtonTap(e) {switch (e.index){case 0:break;case 1:this.$refs.popup.open();break;}},

下拉彈出選項完善

• 靜態開發

• 添加點擊事件

  <uni-popup ref="popup" type="top" background-color="#fff"><view class="flex justify-center align-center font-md border-bottom py-2" hover-class="bg-light"@click="popupEvent('findFriend')"><text class="iconfont icon-sousuo mr-2" ></text>搜索好友</view><view class="flex justify-center align-center font-md py-2" hover-class="bg-light"@click="popupEvent('deleteList')"><text class="iconfont icon-shanchu mr-2"></text>刪除列表</view></uni-popup>popupEvent(event){switch (event){case 'findFriend':{console.log('findFriend');this.$refs.popup.close();break;}case 'deleteList':{console.log('deleteList');this.$refs.popup.close();break;}}}

我的好友列表頁開發

page.json配置

• 新建user-list， 導航進入該頁面

  onNavigationBarButtonTap(e) {switch (e.index){case 0:uni.navigateTo({url:'../user-list/user-list'})break;case 1:this.$refs.popup.open();break;}},

• 配置page.json

  {"path": "pages/user-list/user-list","style": {"navigationBarTitleText": "","app-plus": {"animationType": "slide-in-left","titleNView": {"autoBackButton": true,"searchInput": {"align": "center","backgroundColor": "#F5F4F2","borderRadius": "4px","disabled": true,"placeholder": "搜索用戶","placeholderColor": "#6D6C67"},"buttons": [{"color": "#333333","colorPressed": "#FD597C","float": "right","fontSize": "14px","text": "取消"}]}}}

• 監聽點擊輸入框事件， 監聽取消按鈕事件

  onNavigationBarSearchInputClicked() {// console.log('跳轉');uni.navigateTo({url:'../search/search'})},onNavigationBarButtonTap() {uni.navigateBack({delta: 1})},

tab導航組件再次優化

• 引入tabBar導航

• 條件渲染數字

  <view class="flex align-center py-2"><text class="flex-1 flex align-center justify-center" v-for="(item,index) in tabBar" :key="index":class="tabIndex===index?'font-lg text-main font-weight-bold':'font-md text-dark'"@click="changeTab(index)">{{item.name}} <text v-if="item.num>0" class="ml-1">{{item.num}}</text> </text></view>

好友列表組件開發

• 引入首頁的scrollview， 下拉， 對應修改和引入

• 列表樣式靜態開發

  <swiper duration=150 @change="onChange" :current="tabIndex" :style="'height:'+scrollH+'px'"><swiper-item v-for="(item,index) in newList" :key="index"><template v-if="item.list.length>0"><scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)"><block v-for="(item2,index2) in item.list" :key="index2"><view class="flex align-center p-2 border-bottom border-light-secondary"><image src="../../static/default.jpg" class="rounded-circle mr-2" style="width: 100rpx; height: 100rpx;"></image><view class="flex flex-column flex-1"><text class="font-md text-dark">昵稱</text><text class="font-sm mt-1">性別</text></view><view class="uni-icon uni-icon-checkbox-filled text-light-muted "></view></view></block><loadMore :loading="item.loading"></loadMore></scroll-view></template><template v-else><no-thing></no-thing></template></swiper-item></swiper>getData() {let arr = [];for (var i = 0; i < this.tabBars.length; i++) {let obj = {loading: '上拉加載更多',list: []}if (i < 2) {obj.list = [1,2,3,4];}arr.push(obj)};this.newList = arr;},changeTab(index){this.tabIndex=index;},onChange(e){this.changeTab(e.detail.current);},loadMore(index) {let item = this.newList[index];if ((item.loading) !== '上拉加載更多') {return;}item.loading = '加載中...';setTimeout(() => {item.list = [...item.list, ...item.list];item.loading = '上拉加載更多';}, 2000)}

強化badge組件開發

• 使用uni-badge, 插入圖標， 優化性別顯示

  <view><text class="iconfont icon-nv text-secondary"style="font-size: 18rpx;"></text><uni-badge type="error" text="24"></uni-badge></view>

封裝好友列表組件

• 測試demo數據

  const demo=[{avatar:'../../static/default.jpg',username:'昵稱',sex:1,age:24,isFollow:false},{avatar:'../../static/default.jpg',username:'昵稱',sex:2,age:24,isFollow:true}];

• 數據渲染，動態綁定性別class， 點擊灰色

• 封裝組件， 引入組件

  <template><view><view class="flex align-center p-2 border-bottom border-light-secondary " hover-class="bg-light"><image :src="item.avatar" class="rounded-circle mr-2" style="width: 100rpx; height: 100rpx;"></image><view class="flex flex-column flex-1"><text class="font-md text-dark">{{item.username}}</text><view v-if="item.sex>0"><text class="iconfont text-secondary" :class="item.sex===1?'icon-nv':'icon-nan'" style="font-size: 18rpx;"></text><uni-badge :type="item.sex===1?'error':'primary'" :text="item.age"></uni-badge></view></view><view class="uni-icon uni-icon-checkbox-filled " :class="item.isFollow?'text-light-muted':'text-main'"></view></view></view> </template><script>export default {name:"user-list",props:{item:Object,index:Number},data() {return {};}} </script><style></style>import userList from '@/components/user-list/user-list.vue';<userList :item="item2" :index="index2"></userList>

優化我的好友列表頁面

• 優化scrollH問題，引入首頁方法

  onLoad() {this.getData();const res = uni.getSystemInfoSync();this.scrollH = res.windowHeight - uni.upx2px(101);// console.log(this.scrollH);},

• 隱藏上拉加載組件

  <loadMore :loading="item.loading" v-if="item.list.length>10"></loadMore>

聊天界面開發

page.json配置

• 新建頁面user-chat， 導航進入

• 配置導航欄

  {"path" : "pages/user-chat/user-chat","style" :{"app-plus": {"titleNView": {"buttons": [{"color": "#333333","colorPressed": "#FD597C","float": "right","fontSize": "20px","fontSrc": "/static/iconfont.ttf","text": "\ue628"}]}}}

聊天輸入框組件開發

• 底部操作條開發

  <view class="flex fixed-bottom align-center bg-white border-top" style="height: 100rpx;"><view class="flex-1"><input type="text" placeholder="請文明發言" class="rounded ml-2 bg-light p-1" /></view><view class="iconfont icon-fabu flex align-center justify-center font-lg animated" style="width: 100rpx;"hover-class="jello text-main"></view></view>

聊天列表組件開發

• scrollH獲取

  <scroll-view :style="'height: '+this.scrollH+'px;'" scroll-y="true"><view v-for="i in 100" :key="i">{{i}}</view></scroll-view>onLoad() {const res = uni.getSystemInfoSync();this.scrollH = res.windowHeight - uni.upx2px(101);},

• 聊天列表組件開發

• 右邊氣泡的開發

  <scroll-view :style="'height: '+this.scrollH+'px;'" scroll-y="true"><view class="flex align-start px-2 my-2"><image src="../../static/default.jpg" class="rounded-circle"style="height: 100rpx; width: 100rpx;"></image><view class="bg-light mx-2 p-2 rounded mt-1" style="max-width: 400rpx; min-width: 100rpx;">你好啊</view></view><view class="flex align-start px-2 my-2" style="flex-direction: row-reverse;"><image src="../../static/default.jpg" class="rounded-circle"style="height: 100rpx; width: 100rpx;"></image><view class="bg-light mx-2 p-2 rounded mt-1" style="max-width: 400rpx; min-width: 100rpx;">你好啊</view></view></scroll-view>

封裝聊天列表組件完善時間顯示

• 新建user-chat-list, 封裝數據

• 計算屬性， 是否本人

  isShelf(){return this.item.userId===1},

• 時間顯示開發

  <view class="my-2 flex align-center justify-center text-secondary font-sm">{{shortTime}}</view>

• 引入time.js， 優化時間顯示， 用計算屬性

  shortTime(){return $T.getChatTime(this.item.create_time,this.preTime);}<userChatList :item="item" :index="index" :preTime=" index>0 ? list[index-1].create_time : 0"></userChatList>

完善聊天頁功能

• 輸入框綁定內容， 綁定發送事件， 發送功能實現

  sendMessage(){let obj={userId:1,avatar: '../../static/default.jpg',data: this.content,type: 'text',create_time: (new Date()).getTime()};if(obj.data===''){uni.showToast({title:"請輸入內容"});return;}this.list.push(obj);this.content=''}

• 優化功能， 最小寬度去掉， 鍵盤推頁面false, 清空輸入框， 丟棄scrollH

  <input type="text" placeholder="請文明發言" class="rounded ml-2 bg-light p-1" v-model="content" adjust-position="false" /><scroll-view style="position: absolute; left: 0 ; top: 0; right: 0; bottom: 100rpx;" scroll-y="true">

• 滾動到底部實現

  <scroll-view style="position: absolute; left: 0 ; top: 0; right: 0; bottom: 100rpx;" scroll-y="true":scroll-into-view="scrollInto" scroll-with-animation><block v-for="(item,index) in list" :key="index"><userChatList :id="'chat'+index" :item="item" :index="index" :preTime=" index>0 ? list[index-1].create_time : 0"></userChatList></block></scroll-view>pageToBottom(){let lastIndex=this.list.length-1;if(lastIndex < 0){return}this.scrollInto='chat'+lastIndex;console.log(this.scrollInto);}onReady() {this.pageToBottom();},

搜索列表頁開發

搜索列表功能完善

• 添加搜索標識

  onNavigationBarSearchInputClicked() {uni.navigateTo({url: '../search/search?type=post'})},

• 獲取類型， 修改搜索占位， 添加如果說是app端

  if (e.type) {this.type = e.type;}let pageTitle='';switch (this.type) {case 'post':pageTitle='搜索帖子'break;case 'topic':pageTitle='搜索話題'break;case 'friend':pageTitle='搜索好友'break;}console.log(this.type);// #ifdef APP-PLUSlet currentWebview=this.$scope.$getAppWebview();let tn=currentWebview.getStyle().titleNView;tn.searchInput.placeholder=pageTitle;console.log(tn);currentWebview.setStyle({titleNView:tn})// #e

• 搜索結果完善優化， 根據不同搜索，組件，數據都要不同

  searchEvent() {uni.hideKeyboard();uni.showLoading({title: '加載中'})setTimeout(() => {switch (this.type) {case 'post':this.serachList = demo1;break;case 'topic':this.serachList = demo2;break;case 'friend':this.serachList = demo3;break;}uni.hideLoading();}, 3000)},<block v-for="(item,index) in serachList" :key="index"><template v-if="type==='post'"><commonList :item="item" :index="index"></commonList></template><template v-if="type==='topic'"><topicList :item="item" :index="index"></topicList></template><template v-if="type==='friend'"><userList :item="item" :index="index"></userList></template></block>

文章詳情頁開發

page.json配置

• 新建頁面，detail， 導航入口

  ,{"path" : "pages/detail/detail","style" : {"app-plus": {"titleNView": {"buttons": [{"float": "right","type": "menu"}]}}}}

• 把對象作為參數傳過去，初始化

  openDetail(){console.log("打開詳情頁");uni.navigateTo({url:'../../pages/detail/detail?detail='+JSON.stringify(this.item)})},onLoad(e){if(e.detail){this.__init(JSON.parse(e.detail));}},methods: {__init(data){uni.setNavigationBarTitle({title:data.title})}}

強化公共列表組件功能

• 修改公共列表組件， 添加isDetail， prop， 評論和分享功能

  props: {item: Object,index: {type: Number,default: -1},isDetail: {type: Boolean,default: false}},doComment(){if(!this.isDetail){return this.openDetail();}this.$emit('doComment');},doShare(){if(!this.isDetail){return this.openDetail();}this.$emit('doShare');} <commonList :item="this.item" :isDetail="true" @doComment="doComment" @doShare="doShare">帖子詳請</commonList>

完善詳情頁關注頂踩功能

• 關注事件， 修改index默認值

  follow() {this.info.isFollow = true;}index: {type: Number,default: -1}

• 頂踩方法改寫

  doSupport(e) {let obj = this.infoif (obj.support.type === e.type) {uni.showToast({title: '你已經操作過了'})return;}if (obj.support.type === '') {//無操作obj.support[e.type + '_count']++;} else if (obj.support.type === 'support' && e.type === 'unsupport') {//之前是頂，頂減一，踩加一obj.support.support_count--;obj.support.unsupport_count++;} else if (obj.support.type === 'unsupport' && e.type === 'support') {//之前是踩，頂加一，踩減一obj.support.support_count++;obj.support.unsupport_count--;}obj.support.type = e.type;let msg = e.type === 'support' ? '頂' : '踩';uni.showToast({title: msg + '成功'})}

• 增加content，image

  content:"Hillky正在開發ing.....",images:[{url:"https://tupian.qqw21.com/article/UploadPic/2020-5/20205622141239876.jpg"},{url:"https://tse1-mm.cn.bing.net/th/id/R-C.df1d553893d9b7888c725b8dbcbcf439?rik=hpbIzO6xZ3Qchw&riu=http%3a%2f%2fwww.chabeichong.com%2fimages%2f2016%2f11%2f12-04122113.jpg&ehk=%2fe971CgX%2bMeAgZuGCVac3td74wDOd1%2bWzz0q4IsP1Lc%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"}]

• 增加圖片預覽功能

  <image v-for="(item,index) in info.images" :src="item.url" class="w-100" mode="widthFix" @click="preview(index)"></image>preview(index){// console.log(this.imageList);uni.previewImage({urls:this.imageList,current:index})}computed:{imageList(){return this.info.images.map(item=>item.url);}},

評論輸入框組件封裝

• 先對聊天室底部操作條的封裝，測試是否成功

  <template><view class="flex fixed-bottom align-center bg-white border-top" style="height: 100rpx;"><view class="flex-1"><input type="text" placeholder="請文明發言" class="rounded ml-2 bg-light p-1" v-model="content"adjust-position="false" /></view><view class="iconfont icon-fabu flex align-center justify-center font-lg animated" style="width: 100rpx;"hover-class="jello text-main" @click="sendMessage"></view></view> </template><script>export default {data(){return{content:''}},methods:{sendMessage(){if (this.content === '') {uni.showToast({title: "請輸入內容",icon:"none"});return;}this.$emit('submit',this.content);this.content = '';}}} </script><style> </style><bottomBtn @submit="submit"></bottomBtn>submit(content) {let obj = {userId: 1,avatar: '../../static/default.jpg',data: content,type: 'text',create_time: (new Date()).getTime()};this.list.push(obj);this.pageToBottom();},

• 再到detail頁面使用該組件，需要占位

列表評論組件開發

• 使用官方評論界面，進行靜態開發

  <view class="px-2"><!-- 評論區 start --><view class="uni-comment"><view class="uni-comment-list"><view class="uni-comment-face" style="margin-top: 15rpx;"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view><view class="uni-comment-body"><view class="uni-comment-top"><text>網友</text></view><view class="uni-comment-date"><text>08/10 08:12</text></view><view class="uni-comment-content">很酷的HBuilderX和uni-app，開發一次既能生成小程序，又能生成App</view></view></view></view></view>

分享功能組件開發

• 彈出層，底部彈出， 監聽導航欄按鈕觸發， 層級關系的修改-z-index

  <uni-popup ref="popup" type="bottom" background-color="#fff"><view style="height: 300rpx;">123</view></uni-popup>onNavigationBarButtonTap() {this.$refs.popup.open();},uni-popup {position: fixed;/* #ifndef APP-NVUE */z-index: 9999;

• 監聽返回事件，隱藏彈出層

  onBackPress() {this.$refs.popup.close();},

• 靜態開發

  <view class="font-md border-bottom border-light-secondary text-center py-2">分享到</view><view class="flex align-center "><view class="flex flex-1 flex-column justify-center align-center py-2"><view class="iconfont icon-QQ rounded-circle bg-primary text-white flex align-center justify-center font-lg" style="width: 100rpx; height: 100rpx;"></view><view class="font mt-1 text-light-muted">QQ好友</view></view>...</view><view class="font-md border-top border-light-secondary text-center py-2">取消</view>

• 遍歷圖標

  <block v-for="(item,index) in btnList" :key="index"><view class="flex flex-1 flex-column justify-center align-center py-2"><viewclass="iconfont rounded-circle bg-primary text-white flex align-center justify-center font-lg":class="item.icon+' '+item.color "style="width: 100rpx; height: 100rpx;"></view><view class="font mt-1 text-light-muted">{{item.name}}</view></view></block>

• 封裝組件 more-share.vue

  <template><view><uni-popup ref="popup" type="bottom" background-color="#fff"><view class="font-md border-bottom border-light-secondary text-center py-2">分享到</view><view class="flex align-center "><block v-for="(item,index) in btnList" :key="index"><view class="flex flex-1 flex-column justify-center align-center py-2"><viewclass="iconfont rounded-circle bg-primary text-white flex align-center justify-center font-lg":class="item.icon+' '+item.color " style="width: 100rpx; height: 100rpx;"></view><view class="font mt-1 text-light-muted">{{item.name}}</view></view></block></view><view class="font-md border-top border-light-secondary text-center py-2">取消</view></uni-popup></view> </template><script>export default {data(){return{btnList: [{"icon": 'icon-QQ',"color": 'bg-primary',"name": 'QQ好友'},{"icon": 'icon-QQ',"color": 'bg-primary',"name": 'QQ好友'},{"icon": 'icon-QQ',"color": 'bg-primary',"name": 'QQ好友'},{"icon": 'icon-QQ',"color": 'bg-primary',"name": 'QQ好友'}],}},methods:{open(){this.$refs.popup.open();},close(){this.$refs.popup.close();}}} </script><style> </style> <moreShare ref="share"></moreShare>onNavigationBarButtonTap() {this.$refs.share.open();},onBackPress() {this.$refs.share.close();},

• 用官方組件分享動態渲染數據， 子組件用created()

  created(){uni.getProvider({service: 'share',success: (e) => {console.log(e);let data = []for (let i = 0; i < e.provider.length; i++) {switch (e.provider[i]) {case 'weixin':data.push({name: '微信好友',id: 'weixin',icon:'icon-weixin',color:'bg-success',sort:0})data.push({name: '朋友圈',id: 'weixin',icon:'icon-huati',color:'bg-dark',type:'WXSenceTimeline',sort:1})break;case 'sinaweibo':data.push({name: '新浪微博',icon:'icon-xinlangweibo',color:'bg-danger',id: 'sinaweibo',sort:2})break;case 'qq':data.push({name: 'QQ好友',id: 'qq',icon:'icon-QQ',color:'bg-primary',sort:3})break;default:break;}}this.providerList = data.sort((x,y) => {return x.sort - y.sort});},fail: (e) => {console.log('獲取分享通道失敗', e);uni.showModal({content:'獲取分享通道失敗',showCancel:false})}});},

• 分享方法

  async share(e) {console.log('分享通道:'+ e.id +'； 分享類型:' + this.shareType);if(!this.shareText && (this.shareType === 1 || this.shareType === 0)){uni.showModal({content:'分享內容不能為空',showCancel:false})return;}if(!this.image && (this.shareType === 2 || this.shareType === 0)){uni.showModal({content:'分享圖片不能為空',showCancel:false})return;}let shareOPtions = {provider: e.id,scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏 type: this.shareType,success: (e) => {console.log('success', e);uni.showModal({content: '已分享',showCancel:false})},fail: (e) => {console.log('fail', e)uni.showModal({content: e.errMsg,showCancel:false})},complete:function(){console.log('分享操作結束!')}}switch (this.shareType){case 0:shareOPtions.summary = this.shareText;shareOPtions.imageUrl = this.image;shareOPtions.title = '歡迎體驗uniapp';shareOPtions.href = 'https://uniapp.dcloud.io';break;case 1:shareOPtions.summary = this.shareText;break;case 2:shareOPtions.imageUrl = this.image;break;case 5:shareOPtions.imageUrl = this.image ? this.image : 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png'shareOPtions.title = '歡迎體驗uniapp';shareOPtions.miniProgram = {id:'gh_33446d7f7a26',path:'/pages/tabBar/component/component',webUrl:'https://uniapp.dcloud.io',type:0};break;default:break;}if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是圖文分享，且是ios平臺，則壓縮圖片 shareOPtions.imageUrl = await this.compress();}if(shareOPtions.type === 1 && shareOPtions.provider === 'qq'){//如果是分享文字到qq，則必須加上href和titleshareOPtions.href = 'https://uniapp.dcloud.io';shareOPtions.title = '歡迎體驗uniapp';}uni.share(shareOPtions);},

個人中心頁面開發

page.json配置

• 配置page.json

  {"path": "pages/my/my","style": {"navigationBarTitleText": "我的","app-plus": {"titleNView": {"buttons": [{"type": "menu"}]}}}},

個人中心ui構建

• 靜態開發第一個view

  <view class="flex align-center p-2"><image src="../../static/default.jpg" style="width: 100rpx; height: 100rpx;" class="rounded-circle"></image><view class="flex flex-column flex-1 px-2"><text class="font-lg font-weight-bold text-dark ">昵稱</text><text class="font text-muted mt-1"> 總帖子10 今日發帖0</text></view><view class="iconfont icon-jinru"></view></view>

• 第二個view開發，使用遍歷方式

  <view class="flex align-center px-3 py-2"><view class="flex-1 flex-column flex align-center justify-center" v-for="(item,index) in this.itemList " :key="index"><text class="font-lg text-dark">{{item.num}}</text><text class="text-muted fony">{{item.name}}</text></view></view>

• 第三個view， 廣告位的開發

  <view class="px-3 py-2"><image src="/static/demo/banner1.jpg" style="height: 300rpx; width: 100%;" mode="aspectFill" class="rounded"></image></view>

• 引入uni-list-item

  <uni-list-item title="瀏覽歷史" :showExtraIcon="true" :extra-icon="extraIcon1" link :border="false"></uni-list-item><uni-list-item title="社區認證" :showExtraIcon="true" :extra-icon="extraIcon2" link :border="false"></uni-list-item><uni-list-item title="審核帖子" :show-extra-icon="true" link :border="false"><text slot="icon" class="iconfont icon-keyboard font-lg"></text></uni-list-item>import uniListItem from '@/components/uni-list-item/uni-list-item.vue';extraIcon1: {type: 'eye',color: '#000000',size: 20},extraIcon2: {type: 'vip',color: '#000000',size: 20},

設置頁面開發

• 新建頁面，導航進入

• 退出登錄靜態開發

  <template><view><uni-list-item title="賬號與安全" link :border="false" ></uni-list-item><uni-list-item title="資料編輯" link :border="false" ></uni-list-item><uni-list-item title="清楚緩存" link :border="false"></uni-list-item><uni-list-item title="意見反饋" link :border="false"></uni-list-item><uni-list-item title="關于社區" link :border="false"></uni-list-item><view class="py-2 px-3"><button class="bg-main text-white" style="border-radius: 50rpx;">退出登錄</button></view></view> </template><script>import uniListItem from '@/components/uni-list-item/uni-list-item.vue';export default {components:{uniListItem},data() {return {}},methods: {}} </script><style></style>

修改密碼頁面開發

修改密碼UI界面開發

• 新建頁面，導航進入

  <uni-list-item title="賬號與安全" link :border="false" @click="open"></uni-list-item>uni.navigateTo({url:'../userPassword/userPassword'})

• 靜態頁面開發

  <view class="px-1"><input class="uni-input" value="" type="text" placeholder="輸入舊密碼"/><input class="uni-input" value="" type="text" placeholder="輸入新密碼"/><input class="uni-input" value="" type="text" placeholder="輸入確認密碼"/><view class="py-2 px-3"><button class="bg-main text-white" style="border-radius: 50rpx;">設置</button></view></view>

表單驗證功能實現

• 輸入框綁定vue， disabled屬性綁定

  computed:{disable(){return this.oldPassword===''||this.newPassword===''||this.renewPassword==='';}},<button class="bg-main text-white" style="border-radius: 50rpx;" :disabled="disable">設置</button>

• 驗證功能實現

  check(){if(this.newPassword!==this.renewPassword){uni.showToast({title:'兩次輸入密碼不一致',icon:"none"})return false;}return true;},submit(){if(this.check()){console.log('提交成功');}}

修改郵箱頁面開發

修改郵箱頁UI界面開發

• 新建頁面， 配置page.json

  ,{"path" : "pages/userEmail/userEmail","style" : {"navigationBarTitleText": "設置郵箱"}}

• 拼接字符串, 配置導航，引號不一樣用1左邊的那個，${}拼接

  open(path){uni.navigateTo({url:`../${path}/${path}`,fail(e) {console.log(e);}})}

• 靜態頁面開發，與修改密碼差不多的功能，禁用

  <template><view><input type="text" class="uni-input" placeholder="請輸入郵箱" v-model="email"/><input type="text" class="uni-input" placeholder="請輸入密碼" v-model="password"/><button class="bg-main text-white mt-1" style="border-radius: 50rpx;" :disabled="disable">綁定郵箱</button></view> </template><script>export default {data() {return {email:'',password:''}},computed:{disable(){return this.email===''||this.password===''}},methods: {}} </script><style></style>

表單驗證功能實現

• 利用正則表達式完成郵箱功能驗證js常用正則表達式

  methods: {check(){var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;if(!ePattern.test(this.email)){uni.showToast({title:'郵箱格式不正確',icon:"none"})return false;}return true;},submit(){if(this.check()){console.log("提交成功");}return;}}

編輯資料頁面開發

編輯資料UI界面實現

• 新建頁面，配置page.json,配置導航

  ,{"path" : "pages/userInfo/userInfo","style" : {"navigationBarTitleText": "資料編輯"}}

• 使用uni-list-item實現靜態頁面，使用插槽修改

  <template><view><uni-list-item title="頭像" :border="false" ><view slot="right" class="flex"><image class="rounded" style="width: 100rpx; height: 100rpx;" src="../../static/default.jpg"></image><text class="flex align-center iconfont icon-bianji1 ml-2" ></text></view></uni-list-item><uni-list-item title="昵稱" :border="false"><view slot="right" class="flex ">哈哈<text class="flex align-center iconfont icon-bianji1 ml-2 " ></text></view></uni-list-item><uni-list-item title="性別" :border="false"><view slot="right" class="flex ">未知<text class="flex align-center iconfont icon-bianji1 ml-2 " ></text></view></uni-list-item><uni-list-item title="生日" :border="false"><view slot="right" class="flex ">2021-4-1<text class="flex align-center iconfont icon-bianji1 ml-2 " ></text></view></uni-list-item><uni-list-item title="情感" :border="false"><view slot="right" class="flex ">已婚<text class="flex align-center iconfont icon-bianji1 ml-2 " ></text></view></uni-list-item><uni-list-item title="職業" :border="false"><view slot="right" class="flex align-center">程序員<text class="flex align-center iconfont icon-bianji1 ml-2 " ></text></view></uni-list-item><uni-list-item title="家鄉" :border="false"><view slot="right" class="flex ">廣東廣州<text class="flex align-center iconfont icon-bianji1 ml-2 " ></text></view></uni-list-item><view class="py-2 px-3"><button class="bg-main text-white" style="border-radius: 50rpx;">完成</button></view></view> </template><script>import uniListItem from '@/components/uni-list-item/uni-list-item.vue';export default {components:{uniListItem},data() {return {}},methods: {}} </script><style></style>

修改頭像功能

• 添加點擊事件， 動態綁定userPIc

  <uni-list-item title="頭像" :border="false"><view slot="right" class="flex"><image class="rounded" style="width: 100rpx; height: 100rpx;" :src="userPic"></image><text class="flex align-center iconfont icon-bianji1 ml-2" @click="changePic" ></text></view></uni-list-item>

• uni.chooseImage的使用， 修改頭像功能實現

  changePic(){uni.chooseImage({count:1,sizeType:["compressed"],sourceType:["album","camera"],success:(e)=>{this.userPic=e.tempFilePaths[0];}})}

showActionSheet接口使用

• 修改昵稱，用輸入框

  <input v-model="nickname" class="text-right"/>

• 修改性別， 使用showActionSheet，使用計算屬性渲染

  <uni-list-item title="性別" :border="false"><view slot="right" class="flex ">{{sexText}}<text class="flex align-center iconfont icon-bianji1 ml-2 " @click="changeSex"></text></view></uni-list-item>const sexArray=["保密","男","女"];sex:0,sexText(){return sexArray[this.sex];},changeSex(){uni.showActionSheet({itemList:sexArray,success:(e)=>{// this.sex=sexArray[e.tapIndex];this.sex=e.tapIndex;}})},

• 修改情感， 使用一樣的方法

• 修改職業， 使用一樣的方法

  changeJob(){uni.showActionSheet({itemList:jobArray,success:(e)=>{this.job=jobArray[e.tapIndex];}})}

修改生日功能實現

• 使用picker，完成該功能

  <picker mode="date" :value="birthday" @change="onDateChange"><uni-list-item title="生日" :border="false"><view slot="right" class="flex ">{{birthday}}<text class="flex align-center iconfont icon-bianji1 ml-2 "></text></view></uni-list-item></picker>onDateChange(e){this.birthday=e.detail.value;}

三級城市聯動多列選擇器選擇城市

• 使用官方組件mpvueCityPicker

  <uni-list-item title="家鄉" :border="false"><view slot="right" class="flex ">{{pickerText}}<text class="flex align-center iconfont icon-bianji1 ml-2 " @click="showCityPicker"></text></view></uni-list-item><mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"@onConfirm="onConfirm"></mpvue-city-picker>import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'mpvueCityPickerthemeColor:'#007AFF',cityPickerValueDefault:[0, 0, 1],pickerText:'廣東廣州'onBackPress() {if (this.$refs.mpvueCityPicker.showPicker) {this.$refs.mpvueCityPicker.pickerCancel();return true;}},onUnload() {if (this.$refs.mpvueCityPicker.showPicker) {this.$refs.mpvueCityPicker.pickerCancel()}},onConfirm(e){this.pickerText = e.label;},showCityPicker(){this.$refs.mpvueCityPicker.show()}

幫助反饋頁面開發

幫助反饋UI界面實現

• 新建頁面，配置page.json

• 使用組件uni-collapse

  <view><uni-collapse accordion><uni-collapse-item title="默認開啟" ><text>折疊內容</text></uni-collapse-item><uni-collapse-item title="默認開啟" ><text>折疊內容</text></uni-collapse-item></uni-collapse><view class="py-2 px-3"><button class="bg-main text-white" style="border-radius: 50rpx;">意見反饋</button></view></view>

關于頁面開發

關于頁面UI界面

• 新建頁面，配置page.json

• 靜態頁面開發

  <view><view class="flex align-center justify-center flex-column pt-4 pb-3"><image src="../../static/common/nothing.png" style="width: 300rpx; height: 300rpx;" class="rounded-circle"></image><text class="font text-muted mt-2">version 1.0.1</text></view><uni-list-item title="新版本檢測" :border="false" link></uni-list-item><uni-list-item title="社區用戶協議" :border="false" link></uni-list-item></view>

登錄頁開發

page.json配置

• 新建頁面，取消原生導航，導航進入

  ,{"path" : "pages/login/login","style" : {"navigationBarTitleText": "","app-plus": {"titleNView": false}}}<navigator url="../login/login"><view class="flex align-center p-2" hover-class="bg-light"><image src="../../static/default.jpg" style="width: 100rpx; height: 100rpx;" class="rounded-circle"></image><view class="flex flex-column flex-1 px-2"><text class="font-lg font-weight-bold text-dark ">昵稱</text><text class="font text-muted mt-1"> 總帖子10 今日發帖0</text></view><view class="iconfont icon-jinru"></view></view></navigator>

• x的樣式開發

  <view class="flex iconfont icon-guanbi algin-center justify-center font-lg " style="width: 100rpx; height: 100rpx;position: fixed; left: 0;":style="'top:'+statusBarHeight+'px;'" hover-class="bg-light" @click="back"></view>var res=uni.getSystemInfoSync();this.statusBarHeight=res.statusBarHeight;back(){uni.navigateBack({delta:1})}

登錄頁UI界面構建

• 對之前的開發進行修改，引用一個view代替狀態欄即可

  <template><view><view class="status_bar"><!-- 這里是狀態欄 --></view><view> 狀態欄下的文字 </view></view> </template> <style>.status_bar {height: var(--status-bar-height);width: 100%;} </style>

• 靜態頁面開發

  <view class="flex iconfont icon-guanbi algin-center justify-center font-lg " style="width: 100rpx; height: 100rpx;position: fixed; left: 0;" hover-class="bg-light" @click="back"></view><view class="flex algin-center justify-center " style="margin-top: 300rpx;"><text class="text-secondary " style="font-size: 60rpx;">賬號密碼登錄</text></view><view class="flex algin-center border-bottom py-3 px-2 " style="margin-top: 100rpx;"><input type="text" placeholder="昵稱/手機號/郵箱" class="" /></view><view class="flex algin-center border-bottom"><input type="text" placeholder="請輸入密碼" class="py-3 px-2 flex-1" /><text style="width: 150rpx;" class="text-muted py-3">忘記密碼</text></view><view class="py-2 px-3 " style="margin-top: 100rpx;"><button class="bg-main text-white" style="border-radius: 50rpx;">登錄</button></view><view class="mt-5 flex algin-center justify-center"><view class="text-primary pr-2">驗證碼登錄</view><view class="text-secondary">|</view><view class="text-primary pl-2">登錄遇到問題</view></view><view class="flex algin-center justify-center mt-5"><view style="width: 100rpx; border-bottom: solid #ddd ;" class="mb-2" ></view><view class="text-muted mx-2">社交賬號登錄</view><view style="width: 100rpx; border-bottom: solid #ddd ; "class="mb-2" ></view></view>

登錄類型切換效果實現

• 靜態開發圖標列表

  <view class="flex align-center px-5 py-3" style="padding-left: 100rpx; padding-right: 100rpx;"><view class="flex-1 flex align-center justify-center"><viewclass="iconfont icon-QQ font-lg bg-primary text-white flex align-center justify-center rounded-circle "style="width: 100rpx;height: 100rpx;"></view></view><view class="flex-1 flex align-center justify-center "><viewclass="iconfont icon-QQ font-lg bg-primary text-white flex align-center justify-center rounded-circle"style="width: 100rpx;height: 100rpx;"></view></view><view class="flex-1 flex align-center justify-center "><viewclass="iconfont icon-QQ font-lg bg-primary text-white flex align-center justify-center rounded-circle"style="width: 100rpx;height: 100rpx;"></view></view></view><view class="flex algin-center justify-center px-5 text-muted">注冊即代表同意<text class="text-primary">《xxx社區協議》</text></view>

• 切換驗證碼的靜態顯示

  <view class="flex algin-center justify-center " style="margin-top: 300rpx;"><text class="text-secondary " style="font-size: 60rpx;">{{status?'賬號密碼登錄':'驗證碼登錄'}}</text></view><template v-if="status"><view class="flex algin-center border-bottom py-3 px-2 " style="margin-top: 100rpx;"><input type="text" placeholder="昵稱/手機號/郵箱" class="" /></view><view class="flex algin-center border-bottom"><input type="text" placeholder="請輸入密碼" class="py-3 px-2 flex-1" /><text style="width: 150rpx;" class="text-muted py-3">忘記密碼</text></view></template><template v-else><view class="flex algin-center border-bottom py-3 px-2 " style="margin-top: 100rpx;"><text class="text-dark mr-2">+86</text><input type="text" placeholder="手機號" class="" /></view><view class="flex algin-center border-bottom px-2"><input type="text" placeholder="請輸入驗證碼" class="py-3 px-2 flex-1" /><text style="width: 200rpx;" class="text-white bg-main py-3 flex justify-center">獲取驗證碼</text></view></template>changeStatus(){this.status=!this.status}

表單基礎功能實現

• 輸入框綁定內容，計算屬性disable要對于賬號密碼與手機驗證碼都ok

  <input type="text" placeholder="昵稱/手機號/郵箱" v-model="username" class="" />disabled(){if((this.username===''||this.password==='')&&(this.phone===''||this.code==='')){return true;}return false;}<button class="bg-main text-white" style="border-radius: 50rpx;" :disabled="disabled">登錄</button>

• 切換登錄方式要初始化表單

  initForm(){this.username='';this.password='';this.phone='';this.code='';},changeStatus(){this.initForm();this.status=!this.status}

• 獲取驗證碼的功能， 倒計時的功能

  getCode(){if(this.codeTime>0){return;}this.codeTime=60;let timer=setInterval(()=>{if(this.codeTime>=1){this.codeTime--;}else{this.codeTime=0;clearInterval(timer);}},1000)}<text style="width: 200rpx;" class="text-white py-3 flex justify-center" @click="getCode":class="codeTime>0?'bg-main-disable':'bg-main'">{{codeTime>0?this.codeTime+'s':'獲取驗證碼'}}</text>

• 驗證手機號規則編寫，用正則表達式驗證， 提交方法綁定

  getCode() {if (this.codeTime > 0) {return;}if(!this.validate()){return;}this.codeTime = 60;let timer = setInterval(() => {if (this.codeTime >= 1) {this.codeTime--;} else {this.codeTime = 0;clearInterval(timer);}}, 1000)},validate() {var mPattern = /^1[34578]\d{9}$/;var flag = mPattern.test(this.phone)// console.log(flag);if (!flag) {uni.showToast({title: '手機格式不正確',icon: "none"})return false;}return true;},submit() {if(!this.validate()){return;}console.log('驗證成功');this.validate();}

第三方登錄組件功能實現

• 新建other-login組件，實現第三方登錄

  <template><view class="flex align-center px-5 py-3" style="padding-left: 100rpx; padding-right: 100rpx;"><view class="flex-1 flex align-center justify-center" v-for="(item,index) in this.resultList" :key="index"><view :class="item.icon+' '+item.bgColor"class="iconfont font-lg text-white flex align-center justify-center rounded-circle "style="width: 100rpx;height: 100rpx;"></view></view></view> </template><script>export default{data(){return {providerList: [],resultList:[]}},mounted() {uni.getProvider({service: 'oauth',success: (result) => {this.providerList = result.provider.map((value) => {let providerName = '';let icon='';let bgColor='';switch (value) {case 'weixin':providerName = '微信登錄'icon='icon-weixin';bgColor='bg-success';break;case 'qq':providerName = 'QQ登錄';icon='icon-QQ';bgColor='bg-primary';break;case 'sinaweibo':providerName = '新浪微博登錄'icon='icon-xinlangweibo';bgColor='bg-danger';break;default:break;}return {name: providerName,id: value,icon:icon,bgColor:bgColor}});console.log(this.providerList);for(var i=0;i<this.providerList.length;i++){if(this.providerList[i].id==='weixin'||this.providerList[i].id==='qq'||this.providerList[i].id==='sinaweibo'){this.resultList.push(this.providerList[i]);}}console.log(this.resultList);},fail: (error) => {console.log('獲取登錄通道失敗', error);}});}} </script><style> </style>

個人空間開發

page.json配置

• 新建頁面， 配置導航欄按鈕，導航進入

  ,{"path" : "pages/user-space/user-space","style" : {"navigationBarTitleText": "","app-plus": {"titleNView": {"titleText": "個人空間","buttons": [{"type": "menu"}]}}}}openSapce() {uni.navigateTo({url:'../../pages/user-space/user-space'})},

個人空間頭部開發

• 靜態開發

  <view class="flex align-center justify-center p-3 border-bottom border-light-secondary"><image src="../../static/default.jpg" class="rounded " style="width: 180rpx; height: 180rpx;"></image><view class="flex flex-column flex-1 align-center justify-center " ><view class="flex align-center justify-center " style="width: 400rpx;"><view class=" flex-1 flex align-center justify-center flex-column "><text class="font-lg font-weight-bold">1</text><text class="font text-muted">粉絲</text></view><view class=" flex flex-1 align-center justify-center flex-column"><text class="font-lg font-weight-bold">1</text><text class="font text-muted">粉絲</text></view><view class=" flex flex-1 align-center justify-center flex-column"><text class="font-lg font-weight-bold">1</text><text class="font text-muted">粉絲</text></view></view><view class="flex align-center justify-center pt-2"><button class="bg-main text-white" style="width: 400rpx;">關注</button></view></view></view>

個人空間UI界面實現

• 借用好友列表的tabBar

  <view class="flex align-center py-4" style="height: 100rox;"><text class="flex-1 flex align-center justify-center" v-for="(item,index) in tabBars" :key="index":class="tabIndex===index?'font-lg text-main font-weight-bold':'font-md text-dark'"@click="changeTab(index)">{{item.name}}</text></view>data() {return {tabIndex:0,tabBars: [{name: '主頁',},{name: '帖子',},{name: '動態',}]}},changeTab(index){this.tabIndex=index;}

• 主頁的實現

  <template v-if="tabIndex===0"><view class="px-3 border-bottom py-2"><view class="font-md">賬號信息</view><view class="font">賬號年齡:12個月</view><view class="font">賬號id:1</view></view><view class="px-3 border-bottom py-2"><view class="font-md">個人信息</view><view class="font">星座:天蝎座</view><view class="font">職業:IT</view><view class="font">故鄉:中國</view><view class="font">情感:未婚</view></view></template><template v-else><text>帖子/動態</text></template>

• 帖子動態的實現， 引入commonlist組件，loadMore組件，引入方法，添加動畫效果

  <view class="animated fast fadeIn"><block v-for="(item,index) in list" :key="index"><commonList :item="item" :index="index" @follow="follow" @doSupport="doSupport"></commonList><divider></divider></block><loadMore :loading="loading"></loadMore></view>follow(index) {let obj=this.tabBars[this.tabIndex].list[index];obj.isFollow=true;uni.showToast({title: '關注成功'})},doSupport(e) {let obj=this.tabBars[this.tabIndex].list[e.index]console.log(obj);if (obj.support.type === '') {//無操作obj.support[e.type + '_count']++;} else if (obj.support.type === 'support' && e.type === 'unsupport') {//之前是頂，頂減一，踩加一obj.support.support_count--;obj.support.unsupport_count++;} else if (obj.support.type === 'unsupport' && e.type === 'support') {//之前是踩，頂加一，踩減一obj.support.support_count++;obj.support.unsupport_count--;}obj.support.type = e.type;let msg = e.type === 'support' ? '頂' : '踩';uni.showToast({title: msg + '成功'})},

個人空間操作菜單

• 使用彈出層，進行修改即可

  <uni-popup ref="popup" type="top" background-color="#fff"><view class="flex justify-center align-center font-md border-bottom py-2" hover-class="bg-light"@click="popupEvent('findFriend')"><text class="iconfont icon-sousuo mr-2" ></text>加入黑名單</view><view class="flex justify-center align-center font-md py-2" hover-class="bg-light"@click="popupEvent('deleteList')"><text class="iconfont icon-shanchu mr-2"></text>聊天</view></uni-popup>onNavigationBarButtonTap() {this.$refs.popup.open();},

全局功能開發

清楚緩存的功能

• 添加點擊事件，清除緩存的方法

==文檔只有一些功能缺失，但源碼已經完善所有功能，詳情請點擊碼云地址下載源碼學習 https://gitee.com/HelLichu/friend ==

總結

以上是生活随笔為你收集整理的使用uniapp开发社区交友网站的项目教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。