基于 UniAPP 社区论坛项目多端开发实战

社区论坛项目多端开发实战

  • 基于 UniAPP 社区论坛项目多端开发实战
    • 一、项目准备
      • 1.1 ThinkSNS 简介及相关文档
      • 1.2 使用 UniAPP 构建项目
      • 1.3 构建项目文件结构
      • 1.4 配置页面 TabBar 导航
      • 1.5 使用 npm 引入 uView UI 插件库
    • 二、首页功能实现
      • 2.1 首页 header 广告位轮播图功能实现
      • 2.2 全局配置 WebView 展示第三方 web 页面
      • 2.3 uViewUI 网络 http 请求及 API 集中管理
      • 2.4 首页「推荐、资讯」平滑切换实现
      • 2.5 首页「推荐」瀑布流布局效果实现
      • 2.6 首页「推荐、资讯」轮播切换动态设置轮播器高度
      • 2.7 首页滚动状态下动态设置「推荐、资讯」位置及 NavBar 状态
      • 2.8 顶部下拉、底部置底请求更新数据
    • 三、资讯动态相关页面功能实现
      • 3.1 使用 Grid 栅格布局实现动态瀑布流页面
      • 3.2 使用分包构建业务逻辑页面
      • 3.3 动态详情页面功能实现
      • 3.4 资讯详情页面富文本解析功能实现
      • 3.5 评论组件评论列表展示功能实现
    • 四、用户注册、登陆业务功能实现
      • 4.1 用户登陆、注册功能组件实现及触发显示
      • 4.2 Vuex + Storage 登陆状态管理
      • 4.3 个人中心页面基础功能实现
      • 4.4 用户设置页面基础功能实现
    • 五、登陆态下业务功能实现
      • 5.1 使用 mixins 实现动态点赞、取消点赞功能
      • 5.2 登陆状态下评论组件点赞、评论功能实现
      • 5.3 UGC 动态发布功能实现
    • 六、多端打包发布
      • 6.1 微信小程序打包发布
      • 6.2 H5 端相关兼容性开发及打包发布
      • 6.3 安卓云端体验版本打包发布

基于 UniAPP 社区论坛项目多端开发实战

学习目的：

​ 通过学习，对标企业级「大前端」开发实践标准，从零到一构建「社区论坛类」客户端应用项目全流程， 输出相关 Web H5、微信小程序、安卓 APP、IOS APP 多客户端应用。

在这里插入图片描述

一、项目准备

1.1 ThinkSNS 简介及相关文档

ThinkSNS 简介

ThinkSNS 是智士软件旗下的开源微博、社交系统，含微博、论坛、资讯、频道、商城、活动、定位、找人、直播、问答等一系列功能。

ThinkSNS 采用 PHP+MySQL 技术，核心（微博、用户系统）+ 多应用 + 多插件的产品模式，拥有Web、H5、IOS、Android APP以及微信、支付宝、百度等小程序多端服务场景。

ThinkSNS 服务

ThinkSNS 能够建立社交网站、微博平台、教育平台、商城系统、粉丝社区、知识社区、企业文化社区等多种互联网平台，是移动互联网创业的首选二次开发平台。

社区、论坛实践项目简介

  1. 基于 ThinkSNS 开源免费体系，搭建行业内基础 PGC、UGC 内容管理社区、论坛服务体系。
  2. 商家运营人员可以发布管理 PGC 资讯，管理用户、动态、广告等操作
  3. 客户端用户可以查阅、点赞、评论、分享相关动态资讯内容，可以自主发布、删除 UGC 内容、同步 UGC 内容审核

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

相关文档

  1. API 接口文档，详情查阅《 ThinkSNS 社区服务接口文档.md 》
  2. ThinkSNS 综合管理系统，开源代码 git 地址：https://gitee.com/joysapp/thinksns-plus
  3. 客户端小程序源代码 git 地址：https://gitee.com/buhehpc/jxsns.git

1.2 使用 UniAPP 构建项目

  1. 使用 Hbuilder uni-app 默认空白模板构建项目 study

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 在 manifest.json 文件中配置微信小程序相关信息

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3 构建项目文件结构

  1. 构建项目基础结构

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 初始化基础页面及配置 pages.json Pages 路由
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// custorm 取消顶部的 navBar 显示
				"navigationStyle": "custom",
				"enablePullDownRefresh": true
			}
		}, {
			"path": "pages/feeds/feeds",
			"style": {
				"navigationBarTitleText": "动态中心",
				"enablePullDownRefresh": true
			}

		}, {
			"path": "pages/me/me",
			"style": {
				"navigationStyle": "custom",
				"enablePullDownRefresh": true
			}

		}
]

1.4 配置页面 TabBar 导航

"tabBar": {
		"color": "#000",
		"selectedColor": "#0050FF",
		"list": [{
				"iconPath": "/static/tabbar-icons/index.png",
				"selectedIconPath": "/static/tabbar-icons/index_s.png",
				"text": "首页",
				"pagePath": "pages/index/index"
			},
			{
				"iconPath": "/static/tabbar-icons/feeds.png",
				"selectedIconPath": "/static/tabbar-icons/feeds_s.png",
				"text": "动态",
				"pagePath": "pages/feeds/feeds"
			},
			{
				"iconPath": "/static/tabbar-icons/me.png",
				"selectedIconPath": "/static/tabbar-icons/me_s.png",
				"text": "我的",
				"pagePath": "pages/me/me"
			}
		]
}

1.5 使用 npm 引入 uView UI 插件库

  1. 使用 HBuilder 导入插件 uViewUI 或者使用 npm 安装相关依赖（推荐使用 npm 安装）
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
  1. main.js引入uView库
// main.js
import uView from 'uview-ui';
Vue.use(uView);
  1. 编辑器安装相关依赖 工具 — 插件安装 — scss 编译支持

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. App.vue引入基础样式
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
  1. uni.scss引入全局scss变量文件
/* uni.scss */
@import "uview-ui/theme.scss";
  1. pages.json配置easycom规则(按需引入)
// pages.json
{
    "easycom": {
        // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
        // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        // npm安装方式
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

二、首页功能实现

2.1 首页 header 广告位轮播图功能实现

关键技术点：

  1. swiper 轮播器组件的使用
  2. 使用 this.$u.get/post 异步请求数据
  3. 使用 v-for 循环遍历渲染轮播内容
<!-- 页面 header 相关部分 -->
<view class="header-box">
		<!-- 顶部广告位轮播图 -->
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="item in swiperAdList" :key="item.id">
					<navigator open-type="navigate" :url=" '/pages/webview/webview?url='+item.link">
						<image class="banner-swiper-img" :src="item.image" mode="aspectFill" />
					</navigator>
				</swiper-item>
		</swiper>
		<!-- 遮罩使用弧形框 -->
		<image class="crile" src="@/static/crile.png" mode="aspectFill" />
		<!-- 两个选项按钮 -->
		<view class="card-header">
				<view class="card-one card-left" @tap="gotoFeeds('/pages/feeds/feeds')">
					<image class="img" src="@/static/coffee.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">精彩动态</view>
					</view>
				</view>
				<view class="card-one card-right" @tap="gotoFeeds('/pages/me/me')">
					<image class="img" src="@/static/ran.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">个人中心</view>
					</view>
				</view>
		</view>
			<!-- Tab 选项卡 -->
		<view class="tabs-box">
		<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">推荐</view>
		<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">资讯</view>
	</view>
</view>
<script>
			// 请求 广告轮播图信息
			async getAdverts() {
				let adverts = await this.$u.api.getAdvert({
					space: '1,2,3'
				})
				this.swiperAdList = adverts.data.map(item => {
					return {
						id: item.id,
						link: item.data.link,
						image: item.data.image
					}
				})
			}
</script>

2.2 全局配置 WebView 展示第三方 web 页面

关键技术点：我们通常为整个应用的 Web H5 相关页面，构建一个专门用来展示的 webview 路由页面，但是要注意路由传参的时候，对应的 url 需要 decodeURI 、encodeURI

<template>
	<web-view :src="url" />
</template>
<script>
	export default {
		data() {
			return {
				url:''
			}
		},
		// 接收传递过来的参数地址，将 web-view 相关页面展开集合到一个地方
		onLoad(options){
			this.url = decodeURI(options.url)
		}
	}
</script>

2.3 uViewUI 网络 http 请求及 API 集中管理

  1. 请求头、拦截、返回 /common/http.interceptor.js 相关配置
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量
const install = (Vue, vm) => {
	// 此为自定义配置参数，具体参数见上方说明
	Vue.prototype.$u.http.setConfig({
		baseUrl: 'http://47.115.83.135/api/v2', // 请求的本域名
		dataType: 'json', // 设置为json，返回后会对数据进行一次JSON.parse()
		showLoading: true, // 是否显示请求中的loading
		loadingText: '请求中...', // 请求loading中的文字提示
		loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
		originalData: true, // 是否在拦截器中返回服务端的原始数据
		loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
		// 配置请求头信息
		header: {
			'content-type': 'application/json;charset=UTF-8'
		},
	});
	
	// 请求拦截，配置Token等参数
	Vue.prototype.$u.http.interceptor.request = (config) => {
		// 引用token
		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
		// 见：https://uviewui.com/components/globalVariable.html
		// config.header.token = vm.token;
		
		// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
		// config.header.token = vm.$store.state.token;
		
		// 方式三，如果token放在了globalData，通过getApp().globalData获取
		// config.header.token = getApp().globalData.username;
		
		// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
		// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
		// const token = uni.getStorageSync('token');
		// config.header.token = token;
		config.header.Token = 'xxxxxx';
		
		// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
		// if(config.url == '/user/login') config.header.noToken = true;
		// 最后需要将config进行return
		return config;
		// 如果return一个false值，则会取消本次请求
		// if(config.url == '/user/rest') return false; // 取消某次请求
	}
	
	// 响应拦截，判断状态码是否通过
	Vue.prototype.$u.http.interceptor.response = (res) => {
		if(res.code == 401) {
			// 如果返回false，则会调用Promise的reject回调，
			// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
			vm.$u.toast('当前请求 API 接口不存在');
			return false;
		} else {
			// res为服务端返回值，可能有code，result等字段
			// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
			// 如果配置了originalData为true，请留意这里的返回值
			return res;
		}
	}
}

export default {
	install
}
  1. 请求 API 集中管理 /common/http.api.js
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
const install = (Vue, vm) => {
	let api = {}
	// 获取广告位列表信息
	api.getAdvert = params => vm.$u.get('/advertisingspace/advertising', params)
	
	// 获取动态列表信息
	api.getFeeds = params => vm.$u.get('/feeds', params)
	
	// 获取资讯列表信息
	api.getNews = params => vm.$u.get('/news', params)
	
	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
	vm.$u.api = api
}

export default {
	install
}
  1. 在 main.js 中配置，插件注册第二个参数 app 要传入到实例中去，所以要注意引入顺序
const app = new Vue({
    ...App
})
// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js'
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)
// http接口API集中管理引入部分
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)
app.$mount()

2.4 首页「推荐、资讯」平滑切换实现

关键技术点：

  1. 使用轮播器，不自动播放，来构建一个左右滑动切换页面的效果
  2. 需要注意的是，轮播器的高度要设置一个固定值
<!-- 内容轮播导航实现 -->
<swiper  class="swiper-box" style="height:1000upx" :current="0">
	<!-- 推荐动态实现 -->
	<swiper-item class="swiper-item sns-now">
				...动态页面瀑布流展示
	</swiper-item>
	<!-- 资讯列表实现 -->
	<swiper-item class="swiper-item sns-news">
				...资讯页面列表展示
	</swiper-item>
</swiper>

2.5 首页「推荐」瀑布流布局效果实现

瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。

实现瀑布流的解决方案，可以使用 CSS3 布局来实现，也可以使用 JS 脚本来实现，使用 CSS3 实现代码如下：

/*
  这里的关键属性是column-count，设置列数为2。然后是break-inside:avoid，为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局，这样就实现了瀑布流布局。
*/
.waterfall {
     width: 80%;
     margin: 0 auto;
     /* 瀑布流容器内元素的间隔 */
     column-gap:10px;
     /* 瀑布容器内排列的列数 */
     column-count: 2;
}
.item {
     padding: 10px;
     margin-bottom: 10px;
     /* avoid避免在主体框中插入任何中断（页面，列或区域） */
 		 break-inside:avoid
}

使用 CSS3 实现瀑布流布局，性能高于js，缺点是用户体验差，比如：移除数据、更新数据会造成整个页面结构的复杂变化，让用户突然失去焦点的感觉非常不友好！所以使用 js 实现优势也是比较明显的，我们这里使用 uViewUI 的瀑布流插件来实现

<u-waterfall v-model="flowList" ref="uWaterfall">
	<template v-slot:left="{leftList}">
		<view v-for="(item, index) in leftList" :key="index">
			<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
		</view>
	</template>
	<template v-slot:right="{rightList}">
		<view v-for="(item, index) in rightList" :key="index">
			<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
		</view>
	</template>
</u-waterfall>
<script>
export default {
    methods:{
       remove(id) {
          this.$refs.uWaterfall.remove(id);
        },
        clear() {
          this.$refs.uWaterfall.clear();
        }
    }
}
</script>

PS ：swiper 实现 滑动切换页面的效果需要设置一个固定的高度值，但是咱们瀑布流的高度是未知的，那么该怎么办呢？iViewUI 中的 u-waterfall 源码分析，我们要通过全局事件设置的方式来动态的设置 高度，同时，咱们这个定制化的 u-waterfall 需要单独再拿出来进行使用，拓展咱们定制化的插件

  1. 在 uViewUI 中创建一个自定义使用的 u-waterfall-sns.vue 插件，主要分为三步：

    • 在 uViewUI 组件库 components 中找到 u-waterfall 文件，复制一份命名为u-waterfall-sns
    • 文件内 u-waterfall.vue 插件，复制一份命名为u-waterfall-sns.vue 插件
    • u-waterfall-sns.vue 插件内，name 属性更改为 u-waterfall-sns，就可以调用咱们拓展出来的插件了

  2. 使用 uni.$on 设置全局事件，在 u-waterfall-sns.vue 插件内部瀑布流渲染完毕后触发这个事件，动态修改首页轮播切换页面内的 swiper 高度

    data() {
	return {
		// 轮播器高度
		swiperSliderHeight: '500px'
	}
},
async onLoad() {
		// 根据瀑布流计算的高度设置全局事件，动态修正页面滑动轮播器高度
		uni.$on('swiperHeightChange', height =>{
			console.log(height)
			this.swiperSliderHeight = height
		})
},

  3. 设置 image 组件的 mode 属性为 widthFil ，让动态瀑布流错落有致的状态更友好

2.6 首页「推荐、资讯」轮播切换动态设置轮播器高度

关键技术点：切换 资讯、动态 的时候，轮播器切换页面的高度是需要动态调整的，我们需要监听行为进行调整

export default {
		data() {
			return {
				// 当前 推荐 资讯 滑动位置
				currentSwiperIndex: 0,
				// 滑动页面轮播器的高度
				swiperSliderHeight: '500px',
				swiperSliderFeedsHeight: 0,
				swiperSliderNewsHeight: 0
			}
		},
		async onLoad() {
			// 在这里注册一个 uniAPP 的顶层事件，用来作为数据通信
			uni.$on("swiperHeightChange", height => {
				this.swiperSliderFeedsHeight = height
				this.swiperSliderHeight = height
			})

			// 我们要在这里初始化请求相关数据
			this.getAdverts()
			this.getFeedsList()
			this.getNewsList()
			
		},
		methods: {
			// 请求 广告轮播图信息
			async getAdverts(){},
			// 请求 feeds 列表数据
			async getFeedsList(){},
			// 请求资讯列表数据
			async getNewsList(){
				let news = await this.$u.api.getNews()
				let newsList= news.data.map(item => {
					console.log(timeFrom(new Date(item.created_at)))
					return {
						...item,
						cover: this.BaseFileURL + item.image.id
					}
				})
				
				this.newsList = [...this.newsList , ...newsList]
				this.swiperSliderNewsHeight = this.newsList.length * 95 + 100 + 'px'
				this.swiperSliderHeight = this.swiperSliderNewsHeight
			},
      	 // 页面滑动左右分页的时候实现的效果
			swiperSlider(event){
				if(event.detail.current === 0){
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
				}else{
					this.swiperSliderHeight = this.swiperSliderNewsHeight
				}
				this.currentSwiperIndex = event.detail.current
			},
			// 点击按钮实现切换效果
			swiperChange(index){
				if(index === 0){
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
				}else{
					this.swiperSliderHeight = this.swiperSliderNewsHeight
				}
				this.currentSwiperIndex = index
			}
		}
}

2.7 首页滚动状态下动态设置「推荐、资讯」位置及 NavBar 状态

在插件市场找到一个功能比较丰富的 NavBar 插件 https://ext.dcloud.net.cn/plugin?id=813

PS：注意，导入别人的插件后，咱们先体验体验，在使用的时候，尽量去看看插件的源码，以便于我们对当前使用插件更深层次的理解和掌握

第一步：导入和使用插件

// main.js 中全局引入插件 uni-nav-bar
import uniNavBar from "@/components/uni-nav-bar.vue"
Vue.component("uni-nav-bar", uniNavBar);

<!-- 顶部导航 -->
<uni-nav-bar v-if="navBarShowTag">
			<view class="tabs-box">
				<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">资讯</view>
			</view>
</uni-nav-bar>

// 根据滚动状态动态显示隐藏导航栏
data() {
			return {
				// navBar 显示状态控制
				navBarShowTag: false,
        // 记录 推荐滚动 所在的位置
				oldFeedsScrollTop: 0,
				// 记录 资讯滚动 所在位置
				oldNewsScrollTop: 0
			}
}

第二步：监听页面滚动事件，判断滚动显示和隐藏 navBar 导航状态

// 监听滚动事件，动态显示隐藏 Navbar
onPageScroll(event) {
			if (event.scrollTop > 220) {
				this.navBarShowTag = true
			} else {
				this.navBarShowTag = false
			}
}

第三步：记录滚动状态下「动态、资讯」位置

// 监听滚动事件，记录滚动位置
onPageScroll(event) {
			if (this.currentSwiperIndex === 0) {
				this.oldFeedsScrollTop = event.scrollTop
			} else {
				this.oldNewsScrollTop = event.scrollTop
			}
}

第四步：切换「动态、资讯」滚动到指定记录位置

// 页面滑动左右分页的时候实现的效果
swiperSlider(event) {
				if(event.detail.current === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = event.detail.current
},
// 点击按钮实现切换效果
swiperChange(index) {
				if (index === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = index
}

2.8 顶部下拉、底部置底请求更新数据

关键技术点：

  1. onReachBottom、onPullDownRefresh 全局方法调用
  2. this.$refs.waterfall.clear() 调用插件对应方法清空数据流
// 下拉到底请求新的数据
onReachBottom() {
			// 请求新的数据
			if (this.currentSwiperIndex === 0) {
				this.getFeeds()
			} else {
				this.getNews()
			}
},
// 顶部下拉请求新数据
onPullDownRefresh() {
			this.feedsList = []
			this.$refs.waterfall.clear()
			if (this.currentSwiperIndex === 0) {
				this.getFeeds()
			} else {
				this.getNews()
			}
},
methods: {
			// 获取动态信息
			async getFeeds() {
				let feeds = await this.$u.api.getFeeds()
				let feedsList = feeds.feeds.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.images[0].file,
						avatar: !!item.user.avatar ? item.user.avatar.url : '/static/nopic.png',
						name: item.user.name,
					}
				})
				this.feedsList = [...this.feedsList, ...feedsList]
				// 在这里注册一个 uniAPP 的顶层事件，用来作为数据通信
				uni.$once("swiperHeightChange", height => {
					console.log('瀑布流计算出来轮播器高度为:' + height)
					this.swiperSliderFeedsHeight = height + 'px'
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
				})
			},
			// 获取咨询列表信息
			async getNews() {
				let news = await this.$u.api.getNews()
				let newsList = news.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.image.id
					}
				})
				this.newsList = [...this.newsList, ...newsList]
				this.swiperSliderNewsHeight = (this.newsList.length * 95 + 120) + 'px'
				this.swiperSliderHeight = this.swiperSliderNewsHeight
			}
}

三、资讯动态相关页面功能实现

3.1 使用 Grid 栅格布局实现动态瀑布流页面

技术关键点：

  1. 动态请求数据，并对数据进行加工处理成为我们期望的 分组数组 目标数据
  2. grid 栅格化布局
  3. 顶部下拉刷新更新数据
  4. 滚动置底请求数据
  5. 请求状态控制器
<template>
	<view class="rfeeds">
		<view class="one-feeds-box" v-for=" (feedsList, i) in showFeedsList " :key="i">
			<view v-for=" (item, k) in feedsList " 
				  :key="item.id" class="one-feed" 
				  :class="k % 6 == 0 ? ( i%2==0 ? 'feed-big-left' :'feed-big-right' ) : '' ">
				<navigator :url=" '/subpages/feedinfo/feedinfo?id=' + item.id">
					<image :src="item.cover" class="feed-content" mode="aspectFill" :lazy-load="true" />
				</navigator>
			</view>
		</view>
		<!-- 分享按钮组件 -->
		<goto-share />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 列表数据
				feedsList: [],
				// 用来展示的栅格系统的列表数据
				showFeedsList: [],
				// 记录请求 feed 状态
				canRequestFeeds: "yes"
			};
		},
		onLoad() {
			this.getFeeds()
		},
		// 顶部下拉刷新新数据
		onPullDownRefresh() {
			this.feedsList = []
			this.getFeeds()
		},
		// 滚动置底刷新请求数据
		onReachBottom() {
			this.getFeeds()
		},
		methods: {
			// 获取请求数据
			async getFeeds() {
				if (this.canRequestFeeds === "yes") {
					uni.showToast({
						title: "请求中...",
						icon: "loading",
						duration: 10000
					});
					// 设置状态
					this.canRequestFeeds = "no"
					let res = await this.$u.api.getFeeds()
					let feeds = res.feeds.map(item => {
						return {
							id: item.id,
							cover: this.BaseFileURL + item.images[0].file
						}
					})
					if (feeds.length > 5) {
						// 记录总列表数据
						this.feedsList = [...this.feedsList, ...feeds];
						// 在这里要处理页面的内容布局模式为栅格模式，6个元素一组
						let showArrList = [];
						for (let i = 0; i < this.feedsList.length; i++) {
							if (i % 6 == 0 && !!this.feedsList[i + 5]) {
								// 返回一个新的数组，包含从 start 到 end （不包括该元素）元素。
								// 该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
								showArrList.push(this.feedsList.slice(i, i + 6))
							}
						}
						this.showFeedsList = showArrList
						this.canRequestFeeds = "yes"
					} else {
						this.canRequestFeeds = "end"
						uni.showToast({
							title: "到底啦！",
							icon: "success",
							duration: 1000
						});
					}
				}
				// 如果请求状态到底了后，则提示到底了
				if (this.canRequestFeeds === "end") {
					uni.hideToast();
					uni.showToast({
						title: "到底啦！",
						icon: "success",
						duration: 1000
					}) 
				}
			},
		},
	};
</script>

3.2 使用分包构建业务逻辑页面

技术关键点：page.json 中配置分包业务逻辑

"subPackages": [{
		"root": "subpages",
		"pages": [{
			"path": "feedinfo",
			"style": {
				"navigationBarTitleText": "动态详情",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF"
			}
		}]
}],

3.3 动态详情页面功能实现

技术关键点：

  1. 分享朋友圈
wx.showShareMenu({
	withShareTicket: true,
	menus: ['shareAppMessage', 'shareTimeline']
})
  1. 图片预览
methods: {
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.feedInfo.images
				});
			}
}
  1. 使用日期格式化过滤器显示时间
// 引入 时间日期格式化显示函数
import timeFrom from '@/tools/timeFrom.js'
// 设置过滤器
filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			}
},
// 调用过滤器
<text>{{ feedInfo.created_at | timeFormate }} 发布</text>

3.4 资讯详情页面富文本解析功能实现

技术关键点：

  1. 顶部毛玻璃插件的引入及使用
// 引入毛玻璃组件
import picBlur from "@/components/pic-blur/pic-blur.vue";
components: {
	picBlur
},
<!-- 顶部毛玻璃背景图 -->
<!-- 可选值 xs s m l xl -->
<pic-blur :params="{
	width:'750rpx',
	height:'520rpx',
	image: newInfo.cover,
	blur:'xs'
}"></pic-blur>
  1. 资讯详情内容 富文本内容 深度解析
import htmlParse from "@/components/html-parse/parse.vue";

<view class="info-content">
    <html-parse :content="newInfo.content" />
</view>

async onLoad(options) {
    // 分享
    wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
    })
    let res = await this.$u.api.getNewInfo(options);
    res = res.data

    // let cp = res.content.replace(/@!\[(\d*).jpg\]\((\d*)\)/g,"<img src='" +this.BaseFileURL +'$2' + "' />")
    let cp = res.content.replace(/@!\[.*\]\((\d*)\)/g, "<img src='" + this.BaseFileURL + '$1' + "' />")

    this.newInfo = {
        ...res,
        cutTitle: res.title.length > 11 ? res.title.substring(0, 11) + "..." : res.title,
        cover: this.BaseFileURL + res.image.id,
        userId: res.user_id,
        content: cp,
        views_count: res.hits
    }
    this.getRequestOK = true;
}
  1. NavBar 根据滚动动态显示
<!-- 顶部导航 -->
<uni-nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent">
	<view slot="left">
		<image class="hicon" src="/static/home.png" mode="aspectFit" @tap="goHome" />
	</view>
</uni-nav-bar>

<uni-nav-bar v-if="navBarShow" backState="1000" :titleCenter="false">
  {{ newInfo.cutTitle }}
</uni-nav-bar>

data() {
  return {
	 	// 是否显示 navbar
	 	navBarShow: false
	};
},
onPageScroll(res) {
	if (res.scrollTop > 100) {
		this.navBarShow = true;
	} else {
		this.navBarShow = false;
	}
}

3.5 评论组件评论列表展示功能实现

关键技术点：使用 props 接收到的数据可以直接渲染到页面上，但是 props 接收到的数据如果修改后，则不会动态触发 对应 dom 结构的内容更新，我们需要做一个变量去保存 props 传递的初始化值然后基于此变量更新页面结构和内容

<template>
	<view>
		<!-- 评论列表 -->
		<view class="comments">
			<view class="title gohere" id="gohere" ref="gohere">最新评论</view>
			<view class="no-comment" v-if="commintsList.length == 0">暂无评论</view>
			<view v-for="(commentItem, index) in commintsList" :key="index" class="one-comment">
				<!-- 一级评论相关 -->
				<view class="commenter">
					<view class="info">
						<view class="left">
							<u-avatar size="50" class="avatar" :src="!!commentItem.user.avatar ? commentItem.user.avatar.url : '' " />
							<view class="name">{{ commentItem.user.name }}</view>
						</view>
					</view>
					<view class="content">{{ commentItem.body }}</view>
					<view class="uptime">{{ commentItem.created_at | timeFormate }} 评论</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timeFrom from "@/tools/timeFrom.js";
	export default {
		props: {
			oneInfo: Object,
			type: String,
		},
		data() {
			return {
				// 当前动态评论列表详情
				commintsList: [],
				// props 传递的数据无法改变触发 DOM 更新
				oneInfoClone: []
			};
		},
		async created() {
			this.oneInfoClone = this.oneInfo
			this.getCommentsList();
		},
		methods: {
			// 获取评论列表
			async getCommentsList() {
				if (this.type === "feed") {
					// 获取当前动态评论列表信息
					let res = await this.$u.api.getFeedComments({
						id: this.oneInfo.id
					});
					this.commintsList = res.data.comments;
				} else {
					// 获取当前资讯评论列表信息
					let res = await this.$u.api.getNewComments({
						id: this.oneInfo.id
					});
					this.commintsList = res.data.comments;
				}
			}
		},
		// 过滤器
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
	};
</script>

四、用户注册、登陆业务功能实现

4.1 用户登陆、注册功能组件实现及触发显示

关键技术点：

  1. 获取当前微信用户的 昵称 和 头像信息
  2. 使用 u-form 实现登陆、手机注册、邮箱注册基础逻辑
  3. 使用 u-form 实现表单验证相关逻辑
<template>
	<view class="login" :class="{show:show}">
			<button class="submit-btn" open-type="getUserInfo" @getuserinfo="getWechatUserInfo" v-if="getUserInfoTag">
				<image src="/static/wechat.png" class="wechat-img" />
				<text>一键获取微信信息</text>
			</button>

			<u-form :model="form" ref="uForm" v-show="!getUserInfoTag">
				<u-form-item label="账号" prop="login" label-width="150" required v-if="loginType === 'login'">
					<u-input v-model="form.login" placeholder='输入手机号/邮箱/昵称' />
				</u-form-item>
				<u-form-item label="密码" label-width="150" required prop="password">
					<u-input v-model="form.password" type="password" placeholder='限4-20个字符,区分大小写' />
				</u-form-item>
				<view class="btns">
					<u-button class="ubtn" @click="submit">提交</u-button>
					<u-button class="ubtn" @click="cancel">取消</u-button>
				</view>
				<view class="type">
					<u-subsection active-color="#007cba" font-size="24" height="52" :list="subsectionList" :current="0" @change="sectionChange"></u-subsection>
				</view>
			</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 登陆组件是否显示
				show: false,
				// 登陆方式
				loginType: 'login',
				// 登陆方式选择器
				subsectionList: [{	name: '账号登陆'},
					{	name: '手机注册'	},
					{	name: '邮箱注册'	}
				],
				// 是否获取用户信息
				getUserInfoTag: true,
				// 用户信息输入框
				form: {
					login: '',
					avatar: '',
					name: '',
					phone: '',
					email: '',
					code: '',
					password: '',
					repassword: ''
				},
				// 用户输入规则校验
				rules: {
					login: [{
						validator: (rule, value, callback) => {
							if (this.loginType === 'login') {
								return !this.$u.test.isEmpty(value)
							} else {
								return true
							}
						},
						message: '必填 * 输入内容不许为空',
						trigger: ['change', 'blur'],
					}],
					name: [{
							asyncValidator: (rule, value, callback) => {
								this.$u.api.findUser({
									name: value
								}).then(res => {
									// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
									if (!!value && res.statusCode === 200) {
										callback(new Error('当前用户昵称已存在'));
									} else {
										// 如果校验通过，也要执行callback()回调
										callback();
									}
								})
							},
							trigger: ['blur'],
						}
					],
         // ... 其他验证规则
				}
			}
		},
		// 必须要在onReady生命周期设置校验规则，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async created() {
			// 每次这个组件展开，我们就去判断一下当前 token 是否可以获取新的 token 如果可以获取，咱们就关闭登陆状态
			let res = await this.$u.api.getUserMsg()
			// 点赞消息数量
			if (res.statusCode === 200) {
				this.show = false
				return
			} else {
				this.show = true
			}

			wx.getSetting({
				success: res => {
					if (res.authSetting["scope.userInfo"]) {
						uni.getUserInfo({
							success: res => {
								// 如果用户授权了，则做两件事，第一件事
								this.form.login = res.userInfo.nickName
								this.form.name = res.userInfo.nickName
								this.form.avatar = res.userInfo.avatarUrl
								this.getUserInfoTag = false
							},
							fail: () => {
								console.log('用户未授权！')
							}
						})
					}
				}
			})
		},
		methods: {
			// 关闭弹窗
			closeLogin() {
				this.show = false
			},
			// 打开登陆弹窗
			openLogin() {
				this.show = true
			},
			// 跳转到 H5 页面
			gotoWeb(url) {
				wx.navigateTo({
					url: '/pages/webview/webview?url=' + encodeURI(url)
				});
			},
			// 微信授权
			getWechatUserInfo() {
				uni.getUserInfo({
					success: res => {
						// 进行下一步操作
						this.getUserInfoTag = false
						this.form.login = res.userInfo.nickName
						this.form.name = res.userInfo.nickName
						this.form.avatar = res.userInfo.avatarUrl
					},
					fail: () => {
						console.log('用户未授权！')
					}
				})
			},
			// 获取验证码
			getCode() {
				uni.showModal({
					title: '验证码获取成功',
					content: '8888'
				})
			},
			// 取消表单输入
			cancel() {
				this.form = {
					login: '',
					name: '',
					phone: '',
					email: '',
					code: '',
					password: '',
					repassword: ''
				}
			},
			// 提交表单验证
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (!valid) {
						uni.showToast({
							title: '请检查输入',
							icon: 'loading'
						})
						return false
					}
					switch (this.loginType) {
						case "login":
							let resa = await this.$u.api.userLogin({
								login: this.form.login,
								password: this.form.password
							})
							if (resa.statusCode === 200) {
								// 登陆成功
								this.loginAfter(resa.data.access_token)
							} else {
								uni.showModal({
									title: '登陆失败',
									content: resa.data.message
								})
							}
							break;
						case "phone":
							let resb = await this.$u.api.userRegister({
								// 必须，用户名
								name: this.form.name,
								// 必须，验证码发送模式。
								verifiable_type: 'sms',
								// 必须，用户收到的验证码。(教学阶段验证码统一使用 8888 )
								verifiable_code: '8888',
								// 如果 `verifiable_type` 为 `sms` 则必须, 手机号码。
								phone: this.form.phone,
								// 可选，密码，如果不输入密码，允许用户无密码注册。
								password: this.form.password
							})
							console.log(resb)
							if (resb.statusCode === 201) {
								// 登陆成功
								this.loginAfter(resb.data.token)
							} else {
								uni.showModal({
									title: '登陆失败',
									content: resb.data.message
								})
							}
							break;
						case "email":
							let resc = await this.$u.api.userRegister({
								// 必须，用户名
								name: this.form.name,
								// 必须，验证码发送模式。
								verifiable_type: 'mail',
								// 必须，用户收到的验证码。(教学阶段验证码统一使用 8888 )
								verifiable_code: '8888',
								// 如果 `verifiable_type` 为 `mail` 则必须, E-Mail。
								email: this.form.email,
								// 可选，密码，如果不输入密码，允许用户无密码注册。
								password: this.form.password
							})
							console.log(resc)
							if (resc.statusCode === 201) {
								// 登陆成功
								this.loginAfter(resc.data.token)
							} else {
								uni.showModal({
									title: '登陆失败',
									content: resc.data.message
								})
							}
							break;
						default:
							uni.showToast({
								title: '未知用户状态',
								icon: 'loading'
							})
							break;
					}
				});

			},
			// 注册、登陆成功后设置相关逻辑
			async loginAfter(token) {
				this.show = false
				uni.setStorageSync('token', token)

				// 获取未读消息提示
				let res = await this.$u.api.getUserMsg()
				let name = this.form.name
				if (this.loginType === 'login') {
					name = this.form.login
				}
				let loginInfo = {
					name,
					avatar: this.form.avatar,
					liked: res.data.user.liked,
					commented: res.data.user.commented
				}
				this.userLoginAction(loginInfo)
				uni.$emit('userLogin')
			},
			// 更改 登陆 注册 方式选择
			sectionChange(index) {
				switch (index) {
					case 1:
						this.loginType = "phone";
						break;
					case 2:
						this.loginType = "email";
						break;
					default:
						this.loginType = "login";
						break;
				}
			}

		}
	}
</script>

4.2 Vuex + Storage 登陆状态管理

关键技术点：

  1. 构建 vuex 注册 main.js 全局，并配合使用 storage 实现刷新后数据保存
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	// 这个代表全局可以访问数据对象，就像是咱们在组件中声明的 data 属性
	state: {
		loginState: !!uni.getStorageSync('loginState') ? true : false,
		userInfo: !!uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : {
			name: '未知用户',
			avatar: '/static/nopic.png',
			liked: 0,
			commented: 0
		}
	},
	// 这个实时监听 state 内的数据对象变化，类似 咱们组件中的 computed 属性，会依赖 state 数据变化而变化
	getters: {

	},
	// 用来同步设置 state 的值
	mutations: {
		userLogin(state, userInfo) {
			state.loginState = true
			state.userInfo = userInfo
			uni.setStorageSync('loginState', 'ok')
			uni.setStorageSync('userInfo', JSON.stringify(userInfo))
		},
		userLogout(state) {
			state.loginState = false
			state.userInfo = {
				name: '未知用户',
				avatar: '/static/nopic.png',
				liked: 0,
				commented: 0
			}
			uni.clearStorageSync('userInfo')
			uni.clearStorageSync('loginState')
			uni.clearStorageSync('token')
		}
	},
	// 通过提交 mutations 内部的方法，异步更新 state 的状态，官方推荐都使用这种方法比较合适
	actions: {
		userLoginAction(context, userInfo) {
			context.commit('userLogin', userInfo)
		},
		userLogoutAction(context) {
			context.commit('userLogout')
		}
	}
})
export default store
  1. 使用 mapState、mapActions 实现 vuex 变量快速调用
import {
		mapState,
		mapActions
	} from 'vuex'
computed: {
	...mapState(['loginState', 'userInfo'])
},
methods: {
			...mapActions(['userLoginAction', 'userLogoutAction'])
}
  1. 使用 uni.$on $emit 触发首页及个人中心页面登录后对应的数据更新
// index onload
uni.$on('indexUserLogin', ()=>{
		this.currentSwiperIndex = 0
		this.feedsList = []
		this.$refs.waterfall.clear()
		this.getFeedsList()
})
// me onload
// 用户登录后触发数据更新
uni.$on('meUserLogin', this.getInfos)

uni.$emit('meUserLogin')
uni.$emit('indexUserLogin')

4.3 个人中心页面基础功能实现

关键技术点：

  1. 请求当前登录用户发布动态列表数据
// 获取当前用户的 动态信息
let res = await this.$u.api.getFeeds({
		type: 'users'
})
  1. 使用 瀑布流 插件实现排版布局
<u-waterfall v-model="feedsList" ref="waterfall">
		<template v-slot:left="{leftList}">
		...
		</template>
		<template v-slot:left="{leftList}">
		...
		</template>
</u-waterfall>
  1. 使用 vuex 状态数据显示用户登录状态
import {
		mapState,
		mapActions
	} from 'vuex'
computed: {
	...mapState(['loginState', 'userInfo'])
},
methods: {
			...mapActions(['userLoginAction', 'userLogoutAction'])
}
  1. 用户删除一条动态更新瀑布流并通信 index 页面同步更新
// 选择删除一条动态
async openSheet(fid) {
		uni.showActionSheet({
			itemList: ["删除"],
			success: async res => {
										console.log('删除 id 为' + fid + '的动态')
				await this.$u.api.deleteFeed({
					id: fid
				})
				this.$refs.waterfall.remove(fid);
				// 触发 首页动态 同步删除事件
										uni.$emit('indexFeedRemove', fid)
				uni.showToast({
					title: "当前动态已删除",
											duration: 1000
				})
			}
		});
},
// index 页面
// 个人中心删除一条动态后，触发更新首页数据
uni.$on("indexFeedRemove", fid =>{
				this.$refs.waterfall.remove(fid);
})

4.4 用户设置页面基础功能实现

关键技术点：

  1. 使用 vuex 状态管理器 actions 方法快速退出
  2. 使用 uni.$on $emit 触发首页及个人中心页面用户退出后对应的数据更新
// index onload
uni.$on('indexUserLogout', ()=>{
		this.currentSwiperIndex = 0
		this.feedsList = []
		this.$refs.waterfall.clear()
		this.getFeedsList()
})
// me onload
// 用户退出后触发数据更新
uni.$on('meUserLogout', () => {
				console.log('触发了退出操作')
				this.feedsList = []
				this.avatar = ''
				this.bio = ''
				this.$refs.waterfall.clear()
})
uni.$emit('meUserLogout')
uni.$emit('indexUserLogout')

五、登陆态下业务功能实现

5.1 使用 mixins 实现动态点赞、取消点赞功能

关键技术点：

  1. 使用 mixins 构建复用的动态 点赞、取消点赞 事件方法
let feedMixin = {
	methods: {
		// 点赞或者取消点赞一条动态
		async clickLove(item) {
			// 判断当前登录状态
			if (!this.loginState) {
				this.$refs.login.openLogin()
				return
			}
			// 动态点赞
			if (item.has_like) {
				--item.like_count;
				item.has_like = false;
				await this.$u.api.unlikeThisFeed({
					id: item.id,
				});
				uni.showToast({
					title: "取消点赞",
					icon: "success",
					duration: 1000,
				});
			} else {
				++item.like_count;
				item.has_like = true;
				await this.$u.api.likeThisFeed({
					id: item.id,
				});
				uni.showToast({
					title: "点赞成功",
					icon: "success",
					duration: 1000,
				});
			}
			uni.$emit('indexFeedLoveChange',item)
			uni.$emit('myFeedLoveChange',item)
		}
	}
}
export default feedMixin
  1. 调用 mixins 实现点赞功能
// index \ me 两个页面
import feedMixin from '@/mixins/todoFeed.js'
mixins: [feedMixin]
  1. 点赞完成后通信相关页面更新显示状态
// me 页面 用户点赞一条动态后触发数据更新
uni.$on('myFeedLoveChange', item => {
	this.$refs.waterfall.modify(item.id, "like_count", item.like_count);
	this.$refs.waterfall.modify(item.id, "has_like", item.has_like);
})
// index 用户点赞一条动态后触发数据更新
uni.$on('indexFeedLoveChange', item => {
	this.$refs.waterfall.modify(item.id, "like_count", item.like_count);
	this.$refs.waterfall.modify(item.id, "has_like", item.has_like);
})

// minxins 中触发通信
uni.$emit('indexFeedLoveChange',item)
uni.$emit('myFeedLoveChange',item)

5.2 登陆状态下评论组件点赞、评论功能实现

关键技术点：

  1. 登陆插件引入及登陆状态判断
<!-- 登陆组件 -->
<login ref="login"></login>
// 判断当前登录状态
if (!this.loginState) {
	this.$refs.login.openLogin()
	return
}
  1. 正常实现资讯点赞功能
// 点赞逻辑操作
async sendLove(){
    // 判断当前登录状态
    if (!this.loginState) {
        this.$refs.login.openLogin()
        return
    }
    if (this.type === "feed") {
        this.clickLove(this.oneInfoClone)
    } else {
        // 动态点赞
        if (this.oneInfoClone.has_like) {
            --this.oneInfoClone.digg_count;
            this.oneInfoClone.has_like = false;
            await this.$u.api.unlikeThisNew({
                id: this.oneInfoClone.id,
            });
            uni.showToast({
                title: "取消点赞",
                icon: "success",
                duration: 1000,
            });
        } else {
            ++this.oneInfoClone.digg_count;
            this.oneInfoClone.has_like = true;
            await this.$u.api.likeThisNew({
                id: this.oneInfoClone.id,
            });
            uni.showToast({
                title: "点赞成功",
                icon: "success",
                duration: 1000,
            });
        }
    }
}
  1. 实现评论功能，注意：评论完成后修改页面数据不能直接修改 props 中的数据，通知个人中心评论数量增加
// 发送评论信息
async sendComment(){
    // 发送状态判定
    if (this.disableSendCommentTag) return
    this.disableSendCommentTag = true

    if (this.type === 'feed') {
        await this.$u.api.commentOneFeed({
            id: this.oneInfoClone.id,
            body: this.cinput
        });
        ++this.oneInfoClone.feed_comment_count
        // 通知 个人中心当前动态评论增加
        uni.$emit('myFeedCommentChange', this.oneInfoClone)
    } else {
        await this.$u.api.commentOneInfo({
            id: this.oneInfoClone.id,
            body: this.cinput
        });
        ++this.oneInfoClone.comment_count
    }
    uni.showToast({
        title: "评论成功",
        icon: "success",
        duration: 1000,
    });
    this.cinput = ''
    this.closeComment()
    this.getCommentsList()
}

5.3 UGC 动态发布功能实现

关键技术点：

  1. 公共组件 发布按钮 ，注意用户未登录状态下不显示这个按钮
<template>
	<view class="goto-share" v-if="loginState">
		<!-- 个人分享 选择器 -->
		<image class="share-img" src="@/static/carm.png" @tap.stop="gotoShare()" mode="aspectFit" />
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState(['loginState'])
		},
		methods: {
			// 底部个人分享 弹窗相关操作
			gotoShare() {
				uni.navigateTo({
					url: "/subpages/share/share",
				})
			}
		}
	};
</script>
  1. 构建 share 页面用来专门实现动态上传能力
<view class="share">
		<!-- 内容输入框 -->
		<view class="uni-textarea">
			<textarea placeholder-style="color:#AAAAAA" placeholder="添加描述..." @input="bindTextAreaInput" />
			</view>

				<!-- 内容发布 -->
		<view class="pics">
			<view class="medias" v-for="( image, index ) in uploadPicsList" :key="index">
			  <image
				class="img"
				:src="image.path"
				:data-src="image"
				@tap="previewImage(index)"
				mode="aspectFill"
			  />
			  <u-icon name="close" class="iclose" color="#eee" size="20" @tap="removeImage(index)" />
			</view>

			<!-- 选择照片按钮 -->
			<view class="uploadBtn" @tap="chosePicsAndUpload" v-if="uploadPicsList.length < 9">
			  <u-icon name="plus" size="60" color="#aaa" />
			  <view class="text">选择照片</view>
			</view>

		</view>

		<view class="btns">
		  <u-button type="primary" size="default" @click="sendFeed" :disabled="uploadStatus">发布动态</u-button>
		</view>

</view>
  1. 封装 uploadFile 公共工具
import MD5 from "@/common/md5.js";
const uploadFile = async (path, size) => {
	let uploadUrl = 'http://47.115.83.135/api/v2'
	// 第一步 获取 hash 值
	let hash = await new Promise((resolve, reject) => {
		uni.getFileInfo({
			filePath: path,
			success: (result) => {
				resolve(result.digest);
			},
		});
	});

	// console.log(MD5.md5(hash))

	// 第二步 请求获取基础文件信息
	// let check = await uni.request({
	//  url: uploadUrl+'/files/uploaded/'+MD5.md5(hash),
	//  method: 'GET',
	//  header: {
	//    "content-type": "application/json",
	//    Accept: "application/json",
	//    Authorization: "Bearer " + uni.getStorageSync("token"),
	//  }
	// })
	// 如果返回的状态码是404，那说明没有上传过，继续后面的上传流程
	// 如果返回的是200,那就从body里取出 id，这个id就可以直接使用，后面的上传流程就可以终止了
	// console.log(check[1].statusCode)

	// 第三步 将文件以buffer流方式存入系统
	let ufile = await uni.uploadFile({
		url: uploadUrl + '/files',
		method: "POST",
		header: {
			'content-type': 'multipart/form-data',
			Authorization: "Bearer " + uni.getStorageSync("token"),
		},
		name: 'file',
		file: uni.getFileSystemManager().readFileSync(path),
		filePath: path
	});

	// console.log(JSON.parse(ufile[1].data))
	return JSON.parse(ufile[1].data)
};
export default uploadFile;
  1. 使用 primose.all 来确保多张照片能够顺利上传
let upStatusArr = [];
// 循环遍历上传多图
this.uploadPicsList.map((item) => {
			    upStatusArr.push(uploadFile(item.path, item.size));
});
let images = [];
(await Promise.all(upStatusArr)).map((item) => {
			    images.push({id : item.id});
});
let pres = await this.$u.api.postOneFeed({
			    feed_content: this.feedInfo,
			    feed_from: 5,
			    feed_mark: new Date().getTime(),
			    images
});
  1. 动态发布成功后通知 index me 页面更新
// 通知个人中心 动态更新了
uni.$emit("indexFeedsUpdate")
// 通知首页 动态更新了
uni.$emit("myFeedsUpdate");
// index 发布新的动态后，触发数据更新
uni.$on("indexFeedsUpdate", ()=>{
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeeds()
})

// me 用户发布一条动态后触发数据更新
uni.$on('myFeedsUpdate', ()=>{
				this.$refs.waterfall.clear()
				this.getInfos()
})

六、多端打包发布

6.1 微信小程序打包发布

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.2 H5 端相关兼容性开发及打包发布

关键调整节点：

  1. manifest.json H5 下出现的跨域问题要进行相关配置
"h5" : {
    "devServer" : {
        "port" : 8000, //端口
        "disableHostCheck" : true,
        "proxy" : {
            //使用代理
            "/api" : {
                "target": "http://47.115.83.135/api/v2",
                "changeOrigin" : true,
                "pathRewrite" : {
                    "^/api" : ""
                }
            }
        }
    }
}
  1. newinfo \ feedinfo 微信分享仅仅在微信下有效
// #ifdef MP-WEIXIN
// 微信条件下分享到朋友圈、群组
wx.showShareMenu({
	withShareTicket: true,
	menus: ['shareAppMessage', 'shareTimeline']
})
// #endif
  1. comment 组件分享按钮仅仅在 微信小程序下展示，同步 css 调整
<!-- 转发次数统计 -->
<!-- #ifdef MP-WEIXIN -->
<button class="mbtn mhare" open-type="share">
		<image class="micon" src="/static/wx.png" mode="aspectFit" />
		<text class="mtext">分享</text>
</button>
<!-- #endif -->

.minput {
			background-color: #eee;
			height: 60upx;
			// #ifdef MP-WEIXIN
			width: 300upx;
			// #endif
			// #ifndef MP-WEIXIN
			width: 440upx;
			// #endif
}
  1. login 登陆组件获取用户信息逻辑调整
// #ifdef MP-WEIXIN
			wx.getSetting({
				success: res => {
					if (res.authSetting["scope.userInfo"]) {
						uni.getUserInfo({
							success: res => {
								// 如果用户授权了，则做两件事，第一件事
								this.form.login = res.userInfo.nickName
								this.form.name = res.userInfo.nickName
								this.form.avatar = res.userInfo.avatarUrl
								this.getUserInfoTag = false
							},
							fail: () => {
								console.log('用户未授权！')
							}
						})
					}
				}
	})
// #endif
// #ifndef MP-WEIXIN
				this.getUserInfoTag = false
// #endif
  1. http.api.js API 管理器 文件上传逻辑调整
// 文件上传操作
api.uploadFile = async file =>{
    let rfile = file
    // #ifdef MP-WEIXIN
    rfile = uni.getFileSystemManager().readFileSync(file.path)
    // #endif

    // 将文件写入后台系统系统
    let ufile = await uni.uploadFile({
        url: vm.$u.http.config.baseUrl + '/files',
        header: {
            Authorization: "Bearer " + uni.getStorageSync("token"),
        },
        name: 'file',
        file: rfile,
        filePath: file.path
    });
    console.log(JSON.parse(ufile[1].data))
    return JSON.parse(ufile[1].data)
}

PS: 可以使用托管工具，快速发布体验，尤其需要注意的是：开发的时候配置的代理服务器，在正式环境打包的时候是不会被调用的，所以要更改对应的配置信息

6.3 安卓云端体验版本打包发布

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/335256.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

php array_diff 比较两个数组bug避坑 深入了解

php array_diff 比较两个数组bug避坑 深入了解

今天实用array_diff出现的异常问题&#xff0c;预想的结果应该是返回 "integral_initiate">"0"&#xff0c;实际没有 先看测试代码&#xff1a; $a ["user_name">"测","see_num">0,"integral_initiate&quo…
阅读更多...
开发实践8_REST

开发实践8_REST

一、Django REST Framework, Django View & APIView MTV模式实现前后端分离。Representational State Transfer 表现层状态转化。Representation 资源&#xff08;Resource a specific info. on net.&#xff09;具体呈现形式。ST 修改服务端的数据。修改数据 POST请求。…
阅读更多...
LeetCode、2300. 咒语和药水的成功对数【中等，排序+二分】

LeetCode、2300. 咒语和药水的成功对数【中等，排序+二分】

文章目录 前言LeetCode、2300. 咒语和药水的成功对数【中等&#xff0c;排序二分】题目及类型思路及代码 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域…
阅读更多...
2024年显著性检测论文及代码汇总（1）

2024年显著性检测论文及代码汇总（1）

ACM MM Distortion-aware Transformer in 360 Salient Object Detection code Abstacrt&#xff1a;现有的方法无法处理二维等矩投影引起的畸变。本文提出了一个基于Transformer的模型&#xff0c;即DATFormer。首先&#xff0c;引入两个畸变自适应模块。其一是畸变映射模块&…
阅读更多...
【Spring Boot 3】【Redis】基本数据类型操作

【Spring Boot 3】【Redis】基本数据类型操作

【Spring Boot 3】【Redis】基本数据类型操作 背景介绍开发环境开发步骤及源码工程目录结构 背景 软件开发是一门实践性科学&#xff0c;对大多数人来说&#xff0c;学习一种新技术不是一开始就去深究其原理&#xff0c;而是先从做出一个可工作的DEMO入手。但在我个人学习和工…
阅读更多...
tidb Cloud 连接spring boot 项目

tidb Cloud 连接spring boot 项目

一、 免费试用tidbitcloud TiDB Cloud Documentation | PingCAP Docs 1.github账号登录 2.创建集群 3.点击对应集群cludter0 导入数据 导入 本地导入只支持csv文件&#xff0c;其他导入需要AWZ账号使用S3云存储 二、连接spingboot项目 选择java&#xff0c;复制下面的jd…
阅读更多...
前台vue配置

前台vue配置

前台 vue环境 1.傻瓜式安装node: 官网下载&#xff1a;https://nodejs.org/zh-cn/2.安装cnpm: >: npm install -g cnpm --registryhttps://registry.npm.taobao.org3.安装vue最新脚手架: >: cnpm install -g vue/cli注&#xff1a;如果2、3步报错&#xff0c;清除缓…
阅读更多...
美团RASP大规模研发部署实践总结

美团RASP大规模研发部署实践总结

01 背景 RASP 是 Runtime Application Self-Protection&#xff08;运行时应用自我保护&#xff09;的缩写&#xff0c;是一种应用程序安全技术。RASP 技术能够在应用程序运行时检测并阻止应用级别的攻击。随着云计算和大数据的发展&#xff0c;应用程序安全越来越受到重视。其…
阅读更多...
总结网络中的一些基本概念

总结网络中的一些基本概念

1. IP地址 描述一个设备在网络上的位置&#xff0c;而且计算机是通过数字来描述IP地址的。例如&#xff08;生活中的地址&#xff09; 2. 端口号 描述一个主机上的哪个应用程序&#xff0c;有了IP可以确定主机&#xff0c;但是一个主机上可能有很多程序在使用网络&#xff0c;…
阅读更多...
CloudPanel RCE漏洞复现（CVE-2023-35885）

CloudPanel RCE漏洞复现（CVE-2023-35885）

0x01 产品简介 CloudPanel 是一个基于 Web 的控制面板或管理界面，旨在简化云托管环境的管理。它提供了一个集中式平台，用于管理云基础架构的各个方面，包括虚拟机 （VM）、存储、网络和应用程序。 0x02 漏洞概述 由于2.3.1 之前的 CloudPanel 具有不安全的文件管理器 cook…
阅读更多...
Docker技巧汇总

Docker技巧汇总

Docker技巧汇总 前言使用流程安装配置镜像管理创建并运行容器使用容器/常用命令导出和导入查看元数据挂载数据卷端口映射/转发VS Code连接Docker 前言 Docker 是一个开源的应用容器引擎&#xff0c;可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xf…
阅读更多...
go语言（八）---- map

go语言（八）---- map

map的声明方式有以下三种。 package mainimport "fmt"func main() {//第一种声明方式//声明map1是一个map类型&#xff0c;key是String&#xff0c;value是Stringvar myMap1 map[string] stringif myMap1 nil {fmt.Println("myMap1 是一个空map")}//在使…
阅读更多...
AI时代—ChatGPT-4.5的正确打开方式

AI时代—ChatGPT-4.5的正确打开方式

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言4.5key价格泄漏ChatGPT4.0使用地址ChatGPT正确打开方式最新功能语音助手存档…
阅读更多...
Python初识——小小爬虫

Python初识——小小爬虫

一、找到网页端url 打开浏览器&#xff0c;打开百度官方网页点击图片&#xff0c;打开百度图片 鼠标齿轮向下滑&#xff0c;点击宠物图片 进入宠物图片网页&#xff0c;在网页空白处点击鼠标右键&#xff0c;弹出的框中最下方显示“检查”选项&#xff0c;点击&#xff08;我是…
阅读更多...
搭建一个JavaWeb项目流程详解

搭建一个JavaWeb项目流程详解

搭建一个JavaWeb项目流程 本文致力于&#xff0c;让编程者一步步明白书写一个JavaWeb项目应该做些什么&#xff0c;梳理清楚流程框架&#xff0c;需要的jar包&#xff0c;同时手写了一个分页工具类也在其中&#xff0c;让你在编程中更加丝滑。 1.src\main\java\com\einmeer\qia…
阅读更多...
springboot中一些注解

springboot中一些注解

springboot中一些注解 1:项目启动时会去扫描启动的注解&#xff0c;一般是启动时就想要被加载的方法&#xff1a; 2:springBoot中MSApplication启动类的一些其他注解&#xff1a; EnableAsync&#xff1a;这是一个Spring框架的注解&#xff0c;它用于开启方法异步调用的功能。当…
阅读更多...
【MySQL自身的性能优化】InnoDB 的 Buffer Pool

【MySQL自身的性能优化】InnoDB 的 Buffer Pool

这里写目录标题 一、引入缓存的重要性二、InnoDB 的 Buffer Pool1. Buffer Pool 内部组成2. free 链表管理空闲页3. flush 链表管理脏页4. LRU 链表提高缓存命中那咱需要咋地解决预读问题呢&#xff1f;那咱需要咋地解决 Buffer Pool 污染问题呢&#xff1f; 5. 脏页什么时候被…
阅读更多...
pyqt5+python子域名扫描程序

pyqt5+python子域名扫描程序

import sysfrom PyQt5 import uic from PyQt5.QtWidgets import * #requests库内置了不同的方法来发送不同类型的http请求 import requests#BS主要功能是从网页抓取数据&#xff0c;提供一些简单的、python 式的函数用来处理导航、搜索、修改分析树等功能 from bs4 import Beau…
阅读更多...
WebSocket协议、与HTTP对比

WebSocket协议、与HTTP对比

WebSocket 也可前往本人的个人网站进行阅读 WebSocket 和 HTTP WebSocket和HTTP协议一样&#xff0c;都是基于TCP协议实现的应用层协议。 HTTP协议通常是单边通信&#xff0c;主要用于传输静态文档、请求-响应通信&#xff0c;适用于Web浏览器加载网页、API调用等。然而Web…
阅读更多...
NX二次开发获取圆弧的四个象限点

NX二次开发获取圆弧的四个象限点

我是用来用来画水路线框的UF_MODL_ask_curve_points&#xff08;&#xff09;可以按弧长或者弧度获取曲线的等分点&#xff0c;取PI/2的圆弧&#xff0c;即将圆弧四等分&#xff0c;你也可以取任意等分点。 int GetArcPoint(tag_t arc_tag,double point[4][3]) {if(arc_tag0)r…
阅读更多...
最新文章

Copyright @ 2022~2023