GithubProxy/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2025-05-19 01:50:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

修改：修复文章分享好友和朋友圈功能

Browse Source
This commit is contained in:
小莫唐尼 2023-02-05 18:40:40 +08:00
parent 6e80fa14c8
commit a0f3d1b220
5 changed files with 303 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
common/mixins/wxshare.mixin.js Normal file
View File

@ -0,0 +1,66 @@
// 微信分享配置
import haloConfig from '@/config/halo.config.js'
import { jsonToUrlParams2 } from '@/utils/url.params.js'
export const haloWxShareMixin = {
data() {
return {
haloWxShareData: {
...haloConfig.wxShareConfig
},
}
},
//#ifdef MP-WEIXIN
onShareAppMessage(res) {
return {
...this.haloWxShareData,
success: res => {}
}
},
//#endif
/* 分享到微信好友 */
onShareAppMessage(res) {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: this.haloWxShareData.title,
path: this.haloWxShareData.path,
})
}, 2000)
})
return {
title: this.haloWxShareData.title,
path: '',
promise
}
},
// 分享到朋友圈-这里封装不够，在页面还要声明一次，否则是拿不到参数的，被分享者在朋友圈打开链接是空的
onShareTimeline: function() {
return {
title: this.haloWxShareData.title,
query: {},
imageUrl: this.haloWxShareData.imageUrl,
}
},
methods: {
// 设置分享信息（需要在页面调用）
fnSetWxShareConfig(config = {}) {
let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由(分销思路，分享者点开使用的小程序将获取到分享者的id)
let sharePath = currentRoutes
if (config.params) {
const URLParams = config.params ? jsonToUrlParams2(config.params) : {};
sharePath += URLParams
}
let _config = Object.assign({}, {
path: sharePath,
copyLink: haloConfig.apiUrl,
query: {}
}, config)
uni.$tm.vx.commit('setWxShare', _config);
this.haloWxShareData = _config;
}
}
}

4
config/halo.config.template.js
View File

@ -122,8 +122,8 @@ export default {
title: '', // 小程序分享标题[非必填]
desc: '', // 小程序分享描述[非必填]
imageUrl: '', // 小程序分享时候图片地址[非必填]
path: '/pages/start/start', // 分享路径[非必填] - 基本不需要修改
copyLink: '/pages/start/start', // 复制链接[非必填] - 基本不需要修改
path: '/pages/index/index', // 分享路径[非必填] - 基本不需要修改
copyLink: '/pages/index/index', // 复制链接[非必填] - 基本不需要修改
query: {}, // 分享参数[非必填] - 基本不需要填写
},

106
pages/tabbar/about/about.vue
View File

@ -5,7 +5,9 @@
<image class="avatar" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill"></image>
<view class="profile">
<view class="author mt-24 text-size-g text-weight-b">{{ bloggerInfo.nickname }}</view>
<view class="desc mt-24 text-size-m">{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}</view>
<view class="desc mt-24 text-size-m">
{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}
</view>
</view>
<image v-if="calcWaveUrl" :src="calcWaveUrl" mode="scaleToFill" class="gif-wave"></image>
</view>
@ -17,19 +19,34 @@
<view class="statistics flex pt-24 pb-24" :class="{ 'has-solid': statisticsShowMore }">
<view class="item flex-1 text-align-center">
<view class="number text-size-xl text-bg-gradient-orange-accent">
<tm-flop :startVal="0" :decimals="0" :endVal="statistics.postCount" :duration="3000"></tm-flop>
<tm-flop
:startVal="0"
:decimals="0"
:endVal="statistics.postCount"
:duration="3000"
></tm-flop>
</view>
<view class="mt-6 text-align-center text-size-s text-grey-darken-1">文章总数</view>
</view>
<view class="item flex-1 text-align-center">
<view class="number text-size-xl text-bg-gradient-blue-accent">
<tm-flop :startVal="0" :decimals="0" :endVal="statistics.categoryCount" :duration="3000"></tm-flop>
<tm-flop
:startVal="0"
:decimals="0"
:endVal="statistics.categoryCount"
:duration="3000"
></tm-flop>
</view>
<view class="mt-6 text-align-center text-size-s text-grey-darken-1">分类总数</view>
</view>
<view class="item flex-1 text-align-center">
<view class="number text-size-xl text-bg-gradient-green-accent">
<tm-flop :startVal="0" :decimals="0" :endVal="statistics.tagCount" :duration="3000"></tm-flop>
<tm-flop
:startVal="0"
:decimals="0"
:endVal="statistics.tagCount"
:duration="3000"
></tm-flop>
</view>
<view class="mt-6 text-size-s text-grey-darken-1">标签总数</view>
</view>
@ -37,19 +54,34 @@
<view class="statistics solid-top has-solid flex pt-24 pb-24">
<view class="item flex-1 text-align-center">
<view class="number text-size-xl text-bg-gradient-orange-accent">
<tm-flop :startVal="0" :decimals="0" :endVal="statistics.commentCount" :duration="3000"></tm-flop>
<tm-flop
:startVal="0"
:decimals="0"
:endVal="statistics.commentCount"
:duration="3000"
></tm-flop>
</view>
<view class="mt-6 text-align-center text-size-s text-grey-darken-1">评论数量</view>
</view>
<view class="item flex-1 text-align-center">
<view class="number text-size-xl text-bg-gradient-blue-accent">
<tm-flop :startVal="0" :decimals="0" :endVal="statistics.linkCount" :duration="3000"></tm-flop>
<tm-flop
:startVal="0"
:decimals="0"
:endVal="statistics.linkCount"
:duration="3000"
></tm-flop>
</view>
<view class="mt-6 text-align-center text-size-s text-grey-darken-1">点赞数量</view>
</view>
<view class="item flex-1 text-align-center">
<view class="number text-size-xl text-bg-gradient-green-accent">
<tm-flop :startVal="0" :decimals="0" :endVal="statistics.visitCount" :duration="3000"></tm-flop>
<tm-flop
:startVal="0"
:decimals="0"
:endVal="statistics.visitCount"
:duration="3000"
></tm-flop>
</view>
<view class="mt-6 text-size-s text-grey-darken-1">访客数量</view>
</view>
@ -60,7 +92,12 @@
<!-- 快捷导航 -->
<view v-if="useQuickNav" class="quick-nav flex flex-between round-3 ma-24 pa-24 pl-40 pr-40">
<view class="quick-nav-item flex flex-col flex-center" v-for="(nav, index) in quickNavList" :key="index" @click="fnToNavPage(nav)">
<view
class="quick-nav-item flex flex-col flex-center"
v-for="(nav, index) in quickNavList"
:key="index"
@click="fnToNavPage(nav)"
>
<view class="icon round-24 halocoloricon" :class="[nav.icon]"></view>
<view class="name text-size-s mt-8">{{ nav.text }}</view>
</view>
@ -80,7 +117,9 @@
@click="fnOnNav(nav)"
>
<template slot="rightValue">
<button class="right-value-btn" v-if="nav.openType" :open-type="nav.openType">{{ nav.rightText }}</button>
<button class="right-value-btn" v-if="nav.openType" :open-type="nav.openType">
{{ nav.rightText }}
</button>
<text v-else>{{ nav.rightText }}</text>
</template>
</tm-listitem>
@ -88,7 +127,9 @@
</tm-grouplist>
</view>
<!-- 版权 -->
<view v-if="showCopyright" class="copyright mt-40 text-size-xs text-align-center"><view class="">「 2022 uni-halo 丨 开源项目@小莫唐尼 」</view></view>
<view v-if="showCopyright" class="copyright mt-40 text-size-xs text-align-center">
<view class="">「 2022 uni-halo 丨 开源项目@小莫唐尼 」</view>
</view>
<!-- 名片 -->
<tm-poup v-model="miniProfileCard.show" width="94vw" height="auto" :round="3" position="center">
@ -97,17 +138,35 @@
<view class="left flex flex-col flex-center">
<image class="avatar" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill"></image>
<view class="name mt-10 text-size-m text-weight-b">{{ bloggerInfo.nickname }}</view>
<view class="mt-10 round-a-1 pa-2 pl-12 pr-12 text-size-s bg-gradient-light-blue-accent">前端摸鱼大师</view>
<view class="mt-6 text-size-xs text-align-center text-grey-darken-2">一个爱凑热闹的、喜欢捣鼓前端的博主。</view>
<view class="mt-10 round-a-1 pa-2 pl-12 pr-12 text-size-s bg-gradient-light-blue-accent">
前端摸鱼大师
</view>
<view class="mt-6 text-size-xs text-align-center text-grey-darken-2">
一个爱凑热闹的、喜欢捣鼓前端的博主。
</view>
</view>
<view class="right flex flex-col pl-12">
<view class="label text-size-s text-weight-b">爱好：摸鱼、打游戏、听音乐、逛B站</view>
<view class="motto mt-12 text-size-s text-grey-darken-1">如果不是在空闲着的时候就能挣到钱，那就不算摸鱼！</view>
<view class="motto mt-12 text-size-s text-grey-darken-1">
如果不是在空闲着的时候就能挣到钱，那就不算摸鱼！
</view>
<view class="mt-12 text-size-m text-weight-b text-grey-darken-2">精选图片</view>
<view class="photos mt-6 flex ">
<image class="photos-img round-2" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill"></image>
<image class="photos-img round-2" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill"></image>
<image class="photos-img round-2" :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill"></image>
<image
class="photos-img round-2"
:src="$utils.checkAvatarUrl(bloggerInfo.avatar)"
mode="aspectFill"
></image>
<image
class="photos-img round-2"
:src="$utils.checkAvatarUrl(bloggerInfo.avatar)"
mode="aspectFill"
></image>
<image
class="photos-img round-2"
:src="$utils.checkAvatarUrl(bloggerInfo.avatar)"
mode="aspectFill"
></image>
</view>
</view>
</view>
@ -386,7 +445,8 @@ export default {
})
.then(res => {
uni.clearStorageSync();
this.navList.find(x => x.key == 'cache').rightText = uni.getStorageInfoSync().currentSize + 'KB';
this.navList.find(x => x.key == 'cache').rightText =
uni.getStorageInfoSync().currentSize + 'KB';
})
.catch(err => {});
break;
@ -417,6 +477,18 @@ export default {
// 快捷导航页面跳转
fnToNavPage(item) {
// 判断是内置页面还是网页
if (this.$utils.checkIsUrl(item.path)) {
uni.navigateTo({
url:
'/pagesC/website/website?data=' +
JSON.stringify({
title: item.text || this.$haloConfig.title,
url: item.path
})
});
return;
}
switch (item.type) {
case 'tabbar':
uni.switchTab({

125
pagesA/article-detail/article-detail.vue
View File

@ -12,10 +12,14 @@
<view class="detail">
<view class="author">
<text class="author-name">博主：{{ author.nickname }}</text>
<text class="author-time">时间：{{ { d: result.createTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}</text>
<text class="author-time">
时间：{{ { d: result.createTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}
</text>
</view>
<view class="cover" v-if="result.thumbnail"><image class="cover-img" mode="aspectFill" :src="calcUrl(result.thumbnail)"></image></view>
<view class="cover" v-if="result.thumbnail">
<image class="cover-img" mode="aspectFill" :src="calcUrl(result.thumbnail)"></image>
</view>
<view class="count" :class="{ 'no-thumbnail': !result.thumbnail }">
<view class="count-item">
<text class="value">{{ result.visits }}</text>
@ -42,14 +46,27 @@
<text class="text-weight-b">分类：</text>
<text v-if="result.categories.length == 0" class="category-tag is-empty">未选择分类</text>
<block v-else>
<text class="category-tag" v-for="(item, index) in result.categories" :key="index" @click="fnToCate(item)">{{ item.name }}</text>
<text
class="category-tag"
v-for="(item, index) in result.categories"
:key="index"
@click="fnToCate(item)"
>
{{ item.name }}
</text>
</block>
</view>
<view class="mt-18 category-type">
<text class="text-weight-b">标签：</text>
<text v-if="result.tags.length == 0" class="category-tag is-empty">未选择标签</text>
<block v-else>
<text class="category-tag" :style="{ backgroundColor: item.color }" v-for="(item, index) in result.tags" :key="index" @click="fnToTag(item)">
<text
class="category-tag"
:style="{ backgroundColor: item.color }"
v-for="(item, index) in result.tags"
:key="index"
@click="fnToTag(item)"
>
{{ item.name }}
</text>
</block>
@ -96,21 +113,39 @@
<!-- 广告区域：自定义广告位 -->
<view class="ad-card" v-if="haloAdConfig.articleDetail.custom.use">
<text class="ad-card_tip">广告</text>
<image class="ad-card_cover" :src="haloAdConfig.articleDetail.custom.cover" mode="scaleToFill"></image>
<image
class="ad-card_cover"
:src="haloAdConfig.articleDetail.custom.cover"
mode="scaleToFill"
></image>
<view class="ad-card_info">
<view class="ad-card_info-title">{{ haloAdConfig.articleDetail.custom.title }}</view>
<view class="ad-card_info-desc">{{ haloAdConfig.articleDetail.custom.content }}</view>
<view v-if="haloAdConfig.articleDetail.custom.url" class="ad-card_info-link" @click="fnToWebview(haloAdConfig.articleDetail.custom)">立即查看</view>
<view
v-if="haloAdConfig.articleDetail.custom.url"
class="ad-card_info-link"
@click="fnToWebview(haloAdConfig.articleDetail.custom)"
>
立即查看
</view>
</view>
</view>
<!-- 版权声明 -->
<view v-if="copyright.use" class="copyright-wrap bg-white mt-24 pa-24 round-4">
<view class="copyright-title text-weight-b">版权声明</view>
<view class="copyright-content mt-12 grey-lighten-5 text-grey-darken-2 round-4 pt-12 pb-12 pl-24 pr-24 ">
<view v-if="copyright.author" class="copyright-text text-size-s ">版权归属：{{ copyright.author }}</view>
<view v-if="copyright.description" class="copyright-text text-size-s mt-12">版权说明：{{ copyright.description }}</view>
<view v-if="copyright.violation" class="copyright-text text-size-s mt-12 text-red">侵权处理：{{ copyright.violation }}</view>
<view
class="copyright-content mt-12 grey-lighten-5 text-grey-darken-2 round-4 pt-12 pb-12 pl-24 pr-24 "
>
<view v-if="copyright.author" class="copyright-text text-size-s ">
版权归属：{{ copyright.author }}
</view>
<view v-if="copyright.description" class="copyright-text text-size-s mt-12">
版权说明：{{ copyright.description }}
</view>
<view v-if="copyright.violation" class="copyright-text text-size-s mt-12 text-red">
侵权处理：{{ copyright.violation }}
</view>
</view>
</view>
@ -129,8 +164,19 @@
<!-- 弹幕效果 -->
<barrage ref="barrage" :maxTop="240" :type="globalAppSettings.barrage.type"></barrage>
<!-- 返回顶部 -->
<tm-flotbutton :offset="[16, 80]" icon="icon-angle-up" color="bg-gradient-light-blue-accent" @click="fnToTopPage()"></tm-flotbutton>
<tm-flotbutton :actions="btnOption.actions" actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @change="fnOnFlotButtonChange"></tm-flotbutton>
<tm-flotbutton
:offset="[16, 80]"
icon="icon-angle-up"
color="bg-gradient-light-blue-accent"
@click="fnToTopPage()"
></tm-flotbutton>
<tm-flotbutton
:actions="btnOption.actions"
actions-pos="left"
:show-text="true"
color="bg-gradient-orange-accent"
@change="fnOnFlotButtonChange"
></tm-flotbutton>
</block>
<!-- 评论详情 -->
@ -138,7 +184,13 @@
<view class="pa-24">
<view class="poup-head pb-24">
<view class="poup-title text-align-center text-size-g text-weight-b mb-32">评论详情</view>
<comment-item :useContentBg="false" :useActions="false" :isChild="false" :comment="commentDetail.comment" :postId="result.id"></comment-item>
<comment-item
:useContentBg="false"
:useActions="false"
:isChild="false"
:comment="commentDetail.comment"
:postId="result.id"
></comment-item>
</view>
<scroll-view :scroll-y="true" class="poup-body">
@ -149,7 +201,14 @@
</view>
<view v-else-if="commentDetail.loading == 'error'" class="error">
<tm-empty icon="icon-wind-cry" label="加载失败">
<tm-button theme="bg-gradient-light-blue-accent" size="m" v-if="!disallowComment" @click="fnGetChildComments()">刷新试试</tm-button>
<tm-button
theme="bg-gradient-light-blue-accent"
size="m"
v-if="!disallowComment"
@click="fnGetChildComments()"
>
刷新试试
</tm-button>
</tm-empty>
</view>
</view>
@ -185,9 +244,15 @@
<block v-if="poster.showCanvas">
<r-canvas ref="rCanvas"></r-canvas>
<view class="poster-save ma-24 mt-0 pt-20 flex flex-center">
<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnSavePoster()">保存到相册</tm-button>
<tm-button v-if="false" theme="bg-gradient-orange-accent" size="m" @click="fnShareTo()">分享给好友</tm-button>
<tm-button theme="bg-gradient-blue-grey-accent" size="m" @click="fnOnPosterClose()">关 闭</tm-button>
<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnSavePoster()">
保存到相册
</tm-button>
<tm-button v-if="false" theme="bg-gradient-orange-accent" size="m" @click="fnShareTo()">
分享给好友
</tm-button>
<tm-button theme="bg-gradient-blue-grey-accent" size="m" @click="fnOnPosterClose()">
关 闭
</tm-button>
</view>
</block>
</view>
@ -210,6 +275,8 @@ import commentItem from '@/components/comment-item/comment-item.vue';
import rCanvas from '@/components/r-canvas/r-canvas.vue';
import barrage from '@/components/barrage/barrage.vue';
import { haloWxShareMixin } from '@/common/mixins/wxshare.mixin.js';
export default {
components: {
tmSkeleton,
@ -223,6 +290,7 @@ export default {
rCanvas,
barrage
},
mixins: [haloWxShareMixin],
data() {
return {
loading: 'loading',
@ -304,7 +372,14 @@ export default {
this.result = res.data;
this.fnSetPageTitle('文章详情');
this.loading = 'success';
this.fnSetWxShareInfo();
this.fnSetWxShareConfig({
title: this.result.title,
desc: this.result.summary,
imageUrl: this.$utils.checkThumbnailUrl(this.result.thumbnail),
path: `/pagesA/article-detail/article-detail?articleId=${this.queryParams.articleId}`,
copyLink: this.$haloConfig.apiUrl,
query: {}
});
})
.catch(err => {
this.loading = 'error';
@ -314,19 +389,7 @@ export default {
uni.stopPullDownRefresh();
});
},
fnSetWxShareInfo() {
// #ifdef MP-WEIXIN
uni.$tm.vx.commit('setWxShare', {
title: this.result.title,
desc: this.result.summary,
// imageUrl: this.poster.res.tempFilePath,
imageUrl: this.$utils.checkThumbnailUrl(this.result.thumbnail),
path: `/pagesA/article-detail/article-detail?articleId=${this.queryParams.articleId}`,
copyLink: this.$haloConfig.apiUrl,
query: {}
});
// #endif
},
// 浮动按钮点击
fnOnFlotButtonChange(index) {
switch (index) {

52
utils/url.params.js Normal file
View File

@ -0,0 +1,52 @@
/**
* 对象转换为url参数形式
* @param {Object} param 将要转换为URL参数的字符串对象
* @param {String} key URL 参数字符串的前缀
* @param {Boolean} encode 是否进行URL编码，默认为true
* @return {String} URL参数字符串
*/
export function jsonToUrlParams(param, key, encode) {
if (param == null) return '';
let paramStr = '';
let t = typeof(param);
if (t == 'string' || t == 'number' || t == 'boolean') {
paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param);
} else {
for (var i in param) {
var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);
paramStr += jsonToUrlParams(param[i], k, encode);
}
}
return paramStr;
}
/**
* @param {Array} actual
* @returns {Array}
*/
export function cleanArray(actual) {
const newArray = []
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i])
}
}
return newArray
}
/**
* json对象转Url参数2
* @param {Object} json
* @returns {Array}
*/
export function jsonToUrlParams2(json) {
if (!json) return ''
return cleanArray(
Object.keys(json).map(key => {
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
})
).join('&')
}