苹果7 plus 和苹果xs机型,少数机器上会出现h5微信分享,无法获得标题,内容,链接。安卓机器都没问题。苹果机微信版本都是目前最新的
另外 所有苹果机浏览器上无法复制当前页完整链接,只能复制到域名,以下是含有h5分享的帖子代码。
<template>
<!-- 帖子详情 -->
<!--pages/tiezi_detail/tiezi_detail.wxml-->
<!-- 转发、点赞数 -->
<view class='tz_detail'>
<view class='top'>
<image :src=' baseStatic+ post_data.user_avatar' class='top_tx'></image>
<view class="downup">
<view class='second'>
<text class="text1">{{post_data.user_nickname}}</text>
<view class='jz'>
<text class='jing' v-if="post_data.jingping==1">精</text>
<text class='zhi' v-if="post_data.zhiding==1">置</text>
</view>
</view>
<view class='third'>
<text class='skip_time'>{{changetime(post_data.create_time)}}</text>
<text class='skip_num'>浏览{{post_data.count_browse}}</text>
<text class='skip_num'>{{post_data.school_id}}</text>
</view>
</view>
</view>
<view class='content_box'>
<view class="titleboxs">
<text>{{post_data.title}}</text>
</view>
<view class='content_two'>
<text class="common_label">{{post_data.navigation_id}}</text>
<text class="artilce">{{post_data.content}}</text>
</view>
<view class="nine">
<view v-for="(item,index) in post_img" :key="index">
<image v-if="item!=null" mode="widthFix" :baseStatic="baseStatic" :src='baseStatic+item' class='pic' @tap="chakantup(baseStatic+item)"></image>
</view>
</view>
<!-- <view class='sign_box'>
<text class='sign'>#澳博</text>
<text class='sign'>#街舞华尔街</text>
</view> -->
<view class='skip_box'>
<!-- <image class='start' src='/static/bbs/index/icon_start.png'></image> -->
<view class='skip_people'>
<image class='people' v-for="(item,i) in avatar_img" :key="i" :baseStatic="baseStatic" :src='baseStatic+item'></image>
</view>
</view>
<view class='dianzan_box'>
<view class='dz_box_left'>
<!-- 评论 -->
<view @tap="pingltype({type:1})">
<text class='icon iconfont iconxiaoxi'></text>
<span class='common_num'>{{post_data.count_comment}}</span>
</view>
<view @tap='dianzan'>
<!-- 点赞 -->
<text :class='post_data.tag==1?"zan":""' class="icon iconfont icondianzan" ></text>
<span :class='post_data.tag==1?"zan":""' class="common_num">{{count}}</span>
</view>
<!-- 分享 -->
<view @tap="sharefun" >
<!-- <button type="primary" open-type="share">分享</button> -->
<button class="fenxiangbtn" open-type="share">
<text class='icon iconfont iconfenxiang'></text>
<span class='common_num'>{{post_data.count_share}}</span>
</button>
</view>
</view>
<view class='dz_box_right' @tap="Collection">
<image
:src='post_data.collection==1?"/static/bbs/tiezi_detail/sced.png":"/static/bbs/tiezi_detail/sc.png"'
class='shoucan'></image>
<span class='dashang'>{{post_data.collection==1?'已收藏':'收藏'}}</span>
</view>
</view>
</view>
<!-- 评论盖楼组建 -->
<!-- 所有互动 -->
<view class="hudong_box">
<text>所有互动</text>
<!-- <view class="hudong_right">
<text>正序</text>
<img src="/static/bbs/tiezi_detail/icon_zx.png" alt="">
</view> -->
</view>
<Comments title="" :commlist_data="commlist_data" @pingltype="pingltype" @get_comment_dianzhan="get_comment_dianzhan" :baseStatic="baseStatic"></Comments>
<!-- 评论组件 -->
<view class='bottom'>
<view class='bm_top'>
<!-- #ifdef MP-WEIXIN -->
<input type='text' :focus="focussss" v-model="plcon" :placeholder="plplaceholder"></input>
<!-- #endif -->
<!-- #ifdef H5 -->
<textarea class="inputs" maxlength="35" :focus="focussss" v-model="plcon" :placeholder="plplaceholder" />
<!-- #endif -->
<button @tap="push" class="flexc">发布</button>
</view>
<!-- <view class='bm_under'>
<span class="icon iconfont iconbiaoqing"></span>
<span class="icon iconfont iconred-packet_icon"></span>
<view class='smile'></view>
<view class='red_envelope'></view>
</view> -->
</view>
<!-- 回复最底部 -->
<!-- <replyBox ></replyBox> -->
<uni-load-more :status="status" :content-text="contentText" />
<!-- 下拉加载组件 -->
<w-loading v-if="showloading" text="加载中.." mask="1" click="0" ref="wloading"></w-loading>
<!-- <button type="button" data-position="bottom" @click="togglePopup('bottom-share')">底部弹出(分享界面)</button> -->
<uni-popup :show="showfenxiang" position="top" @hidePopup="togglePopup('')">
<view style="display: block;background: none;">
<!-- 1154244 -->
<image src="/static/bbs/tiezi_detail/guide1.png" mode=""></image>
</view>
</uni-popup>
</view>
</template>
<script>
import replyBox from "@/components/replyBox.vue"
import Comments from "@/common/template/Comments/Comments.vue"
import BaseApi from "@/common/BaseApi.js"
import TwoBase from "@/common/TwoBase.js"
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';//瀑布流插件
import {dateUtils} from "@/common/util.js"
import wloading from '@/common/template/w-loading/w-loading.vue'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
//let jweixin = require('@/common/jweixin-module')
// import jweixin from "@/common/jweixin-module/index.js"
//var jweixin = require('jweixin-module');
//let jweixin = require('@/common/jweixin-module')
// console.log("11",jweixin);
// var jweixin = require('jweixin-module')
// jweixin.ready(function(){
// // TODO
// console.log("1");
// });
export default {
data() {
return {
count: 20,
like: false,
job: [],
id: '1',//帖子ID
isClick: false,
jobStorage: [],
jobId: '',
savejob: [],
post_id:"",
post_data:{create_time:"2019-7-5-08:21:36"},//帖子数组
post_img:[],//帖子图片
baseStatic:"",//静态资源地址
avatar_img:[] ,//浏览的人
UserInfo:{},
commlist_data:[],//评论列表
plplaceholder:"来,来,来, 说两句",//评论输入框提示信息
pltyle:1,
comment_id:"",//回复id
page:0,
status:"more",//加载
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
to_id:"",
plcon:"",//评论的内容~
focussss:false,
showloading:false,
showfenxiang:false,
flag:true,//控制评论的时长
}
},
components:{
replyBox,//底部回复
Comments,//评论列表 组建
uniLoadMore,//瀑布流
"w-loading":wloading,
uniPopup,
},
onLoad: function (options) {
this.baseStatic = BaseApi.baseStatic;
this.id = options.id;
// uni.getStorage({
// key: 'UserInfo',
// success: (res)=> {
// console.log("获取用户信息成功");
// this.UserInfo = res.data;
//
// }
// });
this.showloading = true;
this.details();
},
onPullDownRefresh(){
//下拉刷新事件
this.plcon = "";
this.status = 'more';
this.page=0;
this.commlist_data = [];
this.details();
setTimeout(function(){
console.log("关闭刷新");
uni.stopPullDownRefresh();//关闭刷新
uni.stopPullDownRefresh();
},1000)
},
onReachBottom() {//上拉加载
this.status = 'more';
this.status = 'loading';
this.details();//去加载更多数据
//this.getList();
},
onShareAppMessage(res) {//分享
this.toSharfun();
return {
title: this.post_data.content,
path: '/pages/login/login?tiezi_detail_id='+this.id,
//imageUrl:this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
success:()=>{
console.log("分享成功了~");
},
fail:()=>{
console.log("分享失败了~");
}
}
},
methods: {
togglePopup(){
this.showfenxiang = !this.showfenxiang;
},
h5share(){//H5 分享代码
// #ifdef H5
var url = window.location.href ? window.location.href : this.baseStatic+"/pages/tiezi_detail/tiezi_detail?id="+this.id;
TwoBase.getApiTicketAction({
url:url,
}).then((res) => {
if(res.data.status==1){
const signPackage = res.data.data;
// 返回的签名信息
//const signPackage = data.signPackage;
// 分享的页面信息
var title = this.post_data.title?this.post_data.title:this.post_data.content;
var links = url;
var desc = this.post_data.user_nickname;
var imgURL = "";
if(this.post_img){
imgURL = this.baseStatic+this.post_img[0];//链接
}
this.$wx.config({
debug: false, // 开启调试模式
appId: signPackage.appId, // 必填,公众号的唯一标识
timestamp: signPackage.timestamp, // 必填,生成签名的时间戳
nonceStr: signPackage.nonceStr, // 必填,生成签名的随机串
signature: signPackage.signature, // 必填,签名,见附录1
jsApiList: [
'onMenuShareTimeline',// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
'onMenuShareAppMessage'//分享好友
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
this.$wx.ready(() => {
// 分享给朋友
this.$wx.onMenuShareAppMessage({
title: title, // 分享标题
link: links, // 分享链接
desc: desc, // 副标题
imgUrl: imgURL, // 分享图标
success () {
// 用户成功分享后执行的回调函数
//Toast(title)
},
cancel () {
// 用户取消分享后执行的回调函数
}
});
// 分享到朋友圈
this.$wx.onMenuShareTimeline({
title: title, // 分享标题
link: links, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgURL, // 分享图标
success() {
// 用户点击了分享后执行的回调函数
// Toast('分享成功')
},
cancel() {
// 用户取消分享后执行的回调函数
}
});
});
this.$wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log("分享配置失败",res);
});
}
},(err)=>{
})
// #endif
},
changetime(time){
return dateUtils.format(time);//处理时间
},
chakantup(urls){//预览图片的效果
//baseStatic
// let datas = [];
// this.post_img.forEach((item,index)=>{
// let items = item;
// items = this.baseStatic + items;
//
// datas.push(items);
// })
uni.previewImage({
current: "",
urls:[urls] //datas 想看哪张点哪张
})
},
toSharfun(){//分享回调
TwoBase.save_user_forward({
post_id:this.id,//帖子id
//comment_id:comment_id,//评论的内容
unionid:this.UserInfo.uid,//用户id
}).then((res) => {
console.log(res);
if(res.data.status==1){
// uni.showToast({
// title: res.data.msg,
// icon: 'none',
// duration: 1000
// });
}
},(err)=>{
})
},
sharefun(){//分享事件
//呵呵呵哒
// #ifdef H5
this.showfenxiang = true;//显示提示
// #endif
// #ifdef MP-WEIXIN
// uni.share({
// provider: "weixin",
// scene: "WXSceneSession",
// type: 0,
// href: "http://uniapp.dcloud.io/",
// title: "uni-app分享",
// summary: "我正在使用HBuilderX开发uni-app,赶紧跟我一起来体验!",
// imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
// success: function (res) {
// console.log("success:" + JSON.stringify(res));
// },
// fail: function (err) {
// console.log("fail:" + JSON.stringify(err));
// }
// });
// #endif
},
get_comment_dianzhan(data){//对帖子 评论 进行 点赞
//参数是 评论id
TwoBase.get_comment_dianzhan({
post_id:this.id,//帖子id
comment_id:data.comment_id,//评论的内容
unionid:this.UserInfo.uid,//用户id
}).then((res) => {
console.log(res);
if(res.data.status==1){
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
});
if(res.data.data.type==1){//取消
console.log();
this.commlist_data[data.index].comment_dianzhan = 2;
this.commlist_data[data.index].dianzhan--;
}else{//赞
this.commlist_data[data.index].comment_dianzhan = 1;
this.commlist_data[data.index].dianzhan++;
}
}
},(err)=>{
})
},
pingltype(item){//切换评论类型 1评论 2回复
this.focussss = true;//给输入框获取焦点
if(item.type==1){
this.pltyle = 1;
this.plplaceholder="来,来,来, 说两句";
this.plcon = "";//清空内容
}else if(item.type==2){//回复
let data = item.data;
this.pltyle = 2;
this.plplaceholder="回复:"+data.user_name;
//this.comment_id = data.id;
this.comment_id = item.find.id;
this.to_id = data.user_id;
this.plcon = "";//清空内容
}
},
push(){//发布按钮触发事件
var num=10
if(this.flag){
if(this.pltyle==1){
this.save_post_comment();//去评论
}else if(this.pltyle==2){
this.save_post_reply();//去回复
}
this.flag=false
}else{
uni.showToast({
title: '你评论太快了,请等会评论吧~',
icon: 'none',
duration: 1000
});
var time=setInterval(()=>{
num--
if(num<1){
this.flag=true
clearInterval(time)
}
},1000)
}
},
save_post_comment(){//评论帖子 只是评论 回复在另外一个接口
//判断是否是全部空白
let str = this.plcon.replace(/\s+/g,"");
if(str==""){
uni.showToast({
title: '评论内容不能为空~',
icon: 'none',
duration: 1000
});
return false;
}
TwoBase.save_post_comment({
post_id:this.id,//帖子id
content:this.plcon,//评论的内容
unionid:this.UserInfo.uid,//用户id
}).then((res) => {
console.log(res);
if(res.data.status==1){
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
});
this.page = 0;
this.commlist_data =[];
this.details();//刷新
this.plcon = '';
}
},(err)=>{
})
},
save_post_reply(){//回复 !!回复
let str = this.plcon.replace(/\s+/g,"");
if(str==""){
uni.showToast({
title: '内容不能为空~',
icon: 'none',
duration: 1000
});
return false;
}
TwoBase.save_post_reply({
unionid:this.UserInfo.uid,//用户id
post_id:this.id,//帖子id
content:this.plcon,//评论的内容
to_id:this.to_id,//user_id 被回复人的id
comment_id:this.comment_id,//要回复的帖子评论id
}).then((res) => {
console.log(res);
if(res.data.status==1){
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
});
this.page = 0;
this.commlist_data =[];
this.details();//刷新
this.plcon = '';
}
},(err)=>{
})
},
Collection(){//收藏信息
//TwoBase
TwoBase.save_collection_post({
post_id:this.id,
unionid:this.UserInfo.uid,
}).then((res) => {
console.log(res);
if(res.data.status==1){//取消
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
})
this.post_data.collection = 2;
//this.isClick = !this.isClick;
}else if(res.data.status==2){//成功
this.post_data.collection = 1;
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
})
//this.isClick = !this.isClick;
}
},(err)=>{
})
},
//请求帖子详情
details(){
this.page++;
BaseApi.Postdetail({
post_id:this.id,
unionid:this.UserInfo.uid,
page:this.page,
}).then((res) => {
if(res.data.status==1){
this.showloading = false;
var datas = res.data.data.post_data[0];
this.post_data = datas;
this.post_img = datas.post_img;//帖子图
this.avatar_img = datas.avatar_img;
this.count = datas.count_dianzhan;//点赞
this.commlist_data = [...this.commlist_data,...res.data.data.commlist_data];//评论信息
this.status = 'more';
if(res.data.data.commlist_data.length==0){
this.status = 'none';
}
//h5分享调用
this.h5share();//处理配置分享
}else{
this.status = 'none';
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
});
}
},(err)=>{
})
},
chanepllist(){//修改帖子评论列表 测试方法
data1.forEach((item,index)=>{
item._child.forEach((item1,index1)=>{//编辑回复一级
if(item1._child.length>0){//存在三级
console.log("三级");
item._child.push(item1);
}
})
})
data1.forEach((item,index)=>{
item._child.forEach((item1,index1)=>{//编辑回复一级
if(item1._child.length>0){//存在三级
console.log("三级");
item1._child.forEach((item2,index2)=>{
//item1._child
if(item2._child.length>0){//存在四级
console.log("四级");
item2._child.forEach((item3,index3)=>{//存在五级
console.log("五级");
})
}
})
item._child.push(item1);
}
})
})
},
// 点赞
dianzan() {
BaseApi.get_post_dianzhan({
unionid:this.UserInfo.uid,
post_id:this.id
}).then((res) => {
console.log(res);
if(res.data.status==1){
let datas = res.data.data;
if (datas.type == 2) {
uni.showToast({
title: '点赞成功',
icon: 'none',
duration: 1000
})
//this.like = !this.like;
this.post_data.tag = 1;
this.count = Number(this.count )+ 1;
} else if(datas.type == 1) {
uni.showToast({
title: '取消成功',
icon: 'none',
duration: 1000
})
this.post_data.tag = 2;
this.count = Number(this.count ) -1;
}
}
},(err)=>{
})
},
}
}
</script>
<style lang="scss">
/ pages/tiezi_detail/tiezi_detail.wxss /
.tz_detail{
width: 96%;
padding: 0 2%;
margin: 0 auto;
height: auto;
display: flex;
flex-direction: column;
padding-bottom: 200upx;
overflow: hidden;
}
.top{
height: 90upx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-bottom: 20upx;
}
.top_tx{
width: 70upx;
height: 70upx;
border-radius: 50%;
}
.downup{
display: flex;
flex-direction: column;
width: 100%;
flex:1;
}
.second{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 20upx;
width: 97%;
}
.second .text1{
font-size: 26upx;
color: #333333;
}
.third{
display: flex;
flex-direction: row;
align-items: center;
padding-left: 20upx;
}
.jz{
display: flex;
flex-direction: row;
align-items: flex-start;
}
.jz .jing{
width: 35upx;
height: 35upx;
background: #3c7efe;
display: block;
border-radius: 50%;
color: #fff;
font-size: 16upx;
line-height: 35upx;
text-align: center;
margin-left: 10upx;
}
.zhi{
width: 35upx;
height: 35upx;
display: block;
border-radius: 50%;
background: #e44332;
color: #fff;
font-size: 16upx;
line-height: 35upx;
text-align: center;
margin-left: 10upx;
}
.skip_time{
font-size: 21upx;
color: #a7a7a7;
padding-top: 10upx;
}
.skip_num{
font-size: 21upx;
color: #a7a7a7;
padding-top: 10upx;
padding-left: 20upx;
}
/ 帖子内容 /
.content_box{
width: 100%;
height: auto;
margin: 0 auto;
.titleboxs{
color:#000;
font-weight: 600;
font-size: 28upx;
margin: 15upx 0;
}
}
.content_two{
margin-bottom: 30upx;
}
.content_two .common_label{
color: #007AFF;
padding: 5upx;
border: 1upx solid #007AFF;
font-size: 20upx;
margin-right: 10upx;
}
.content_two .artilce{
font-size: 26upx;
color: #333333;
width: 100%;
height: auto;
word-wrap:break-word;
word-break:break-all;
}
.pic{
width: 100%;
//height: 385upx;
//height: 900upx;
//height: 80vh;
//height: auto !important;
border-radius: 20upx;
margin: 10upx 0;
}
/ 标记 /
.sign_box{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
}
.sign_box .sign{
font-size: 26upx;
color: #333333;
padding-left: 10upx;
}
/ 浏览的人 /
.skip_box{
width: 100%;
padding: 20upx 0;
height: 80upx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
.skip_box .start{
width: 38upx;
height: 39upx;
padding: 0 20upx;
}
.skip_people .people{
width: 65upx;
height: 65upx;
border-radius: 50%;
margin: 0 5upx;
}
/ 点赞数量 /
.dianzan_box{
display: flex;
flex-direction: row;
height: 60upx;
width: 96%;
align-items: center;
justify-content: space-between;
}
.dz_box_left{
display: flex;
flex-direction: row;
align-items: center;
}
.dz_box_left .common_num{
font-size: 26upx;
color: #b5b5b5;
padding-right: 30upx;
padding-left: 10upx;
}
.dz_box_left .zan{
color: #3c7efe;
}
.dz_box_right{
display: flex;
flex-direction: row;
align-items: center;
}
.dz_box_right .dashang{
color: #333333;
font-size: 24upx;
padding: 0 10upx;
}
.dz_box_right .hb{
color: #3c7efe;
font-size: 45upx;
}
/ 收藏图标 /
.shoucan{
width: 34upx;
height: 33upx;
}
/ 正序 /
.hudong_box{
padding: 30upx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1upx solid #f2f2f2;
}
.hudong_box .hudong_right text{
font-size: 26upx;
color: #3a3a3a;
padding-right: 10upx;
}
.hudong_box .hudong_right image{
width: 28upx;
height: 28upx;
}
.hudong_box .hudong_right{
display: flex;
flex-direction: row;
align-items: center;
}
/ 发布回复‘最底部 /
.bottom{
width: 90%;
margin: auto;
padding: 10upx 5%;
//height: 165upx;
height: 100upx;
box-shadow: 0px -10upx 10upx 0px #eaf2fe;
position: fixed;
z-index: 3;
bottom: 0;
background: #fff;
display: flex;
flex-direction: column;
left: 0;
}
.bm_top{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top:20upx;
height: 70upx;
}
.bm_top input,.bm_top .inputs{
width: 500upx;
height: 70upx;
line-height: 70upx;
border-radius: 10upx;
background: #f3f3f3;
font-size: 26upx;
padding-left: 30upx;
}
.bm_top uni-input{
background: red;
height: 70upx;
}
.bm_top button{
width: 135upx;
height: 70upx;
background: #308AFC;
border-radius: 10upx;
text-align: center;
line-height: 60upx;
font-size: 26upx;
color: #fff;
margin: 0;
}
.focus{
background: #3c7efe;
}
.bm_under{
span{
font-size: 38upx;
margin-left: 40upx;
}
}
.fenxiangbtn{
border:0;
background:#fff;
background-color:#fff;
}
button.fenxiangbtn::after{
border: 0;
}
.nine{
display: grid;
grid-template-columns: 250upx 250upx 250upx;
grid-template-rows: 250upx 250upx 250upx;
}
.nine>view{
margin-right:40upx
}
</style>
0 个回复