Skip to content

yanghanwen / wanda-vr

Go to a project
Commit b623424e by 白宇
Options

修改 分享

parent 92f074f7
Showing with 1504 additions and 11 deletions
index.html
......@@ -17,7 +17,9 @@
-ms-user-select: none;
user-select: none;
}
html,body{
background:#000;
}
.page-wrap {
position: absolute;
top: 0;
......@@ -95,7 +97,7 @@ function _init_wx_jssdk(){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
......@@ -107,14 +109,18 @@ function _init_wx_jssdk(){
} catch (error) {
}
// alert(title)
var img = shareImg()
// alert(img)
// wx.onMenuShareTimeline({
wx.updateTimelineShareData({
title: title, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img, // 分享图标
success: function () {
// 设置成功
}
})
......
index1.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨123</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="./libs/rem.js"></script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/helper.js"></script>
</head>
<script>
alert(1);
function _init_wx_jssdk() {
if (wx) {
// wx.onMenuShareTimeline({
wx.updateTimelineShareData({
title: '1223', // 分享标题
link: 'https://wanda-h5.bdideal.com/danzhai-holiday/index.html?123', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:"https://wanda-h5.bdideal.com/danzhai-holiday/images/load/go.png", // 分享图标
success: function () {
// 设置成功
alert('设置成功');
},
});
}
}
WX_JSSDK_INIT({})
.then((wxEnv) => {
_init_wx_jssdk();
})
.catch((err) => {
alert('err')
console.log(err);
});
</script>
<body>
<div>234</div>
</body>
</html>
route.html
......@@ -12,6 +12,9 @@
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle {
position: fixed;
left: 200%;
......@@ -721,7 +724,7 @@ var vueInstance = new Vue({
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
......@@ -730,7 +733,7 @@ var vueInstance = new Vue({
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
......
show copy.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle{
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar{
display: none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/*padding-bottom: 1.14rem;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar{
display: none;
}
.nav-item{
display: inline-block;
width: 1.3rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 0.42rem;
}
.nav-item.active{
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 0.2rem auto auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.2);
position: relative;
}
.nav-item__icon{
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
border-radius: 50px;
overflow: hidden;
}
.nav-item__mtitle{
margin-top: 0.1rem;
text-align: center;
font-size: 0.24rem;
line-height: 0.28rem;
color: #fff;
width: 1.3rem;
display: block;
white-space: normal;
}
.mtitle{
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img{
width: 6.68rem;
height: 4.46rem;
vertical-align: top;
}
.content{
width: 6.47rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
/*-webkit-overflow-scrolling: touch;*/
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
text-align: justify;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background: none;
z-index: 999;
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.55rem;
height: 0.84rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
filter:drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{
user-select:none;
width: 80%;
}
.modal-wrap{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
transform: translate(-2000px, -2000px);
overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrap.show {
transform: translate(0px, 0px);
}
.modal-container{
position: relative;
transform: scale(0.9);
/* height: 10.65rem; */
}
.poster, .share-pic{
width: 6.51rem;
position: relative;
}
.share-pic {
z-index: 100;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.poster.hide {
transform: translate(-2000px, -2000px);
}
.poster-img{
width: 100%;
display: block;
}
.change-poster-btn{
position: absolute;
right: 0.32rem;
top: 0.32rem;
width: 2.08rem;
height: 0.67rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 101;
}
.poster-action-box{
width: 6.51rem;
margin: 0.4rem auto 0;
display: flex;
justify-content:center;
align-items: center;
}
.poster-action-btn{
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.42rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.4rem;
bottom: 0.4rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.4rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
</style>
</head>
<body>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img :src="item.small_image" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div class="mtitle">
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div>
<div class="modal-wrap" :class="{show: showPoster}" @click="closeModal">
<div class="modal-container">
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster" ref="postContent" >
<img :src="curShareImg" v-if="curShareImg" class="poster-img" @load="generatePost"/>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<!-- <img :src="postData" alt="" v-if="postData" class="share-pic"> -->
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div>
</div>
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var vueInstance = new Vue({
el:'#app',
data(){
return {
showPic:false,
contentList:[],
loadReady:false,
showPoster:false,
shareTitle:'',
shareDesc:'',
activeIdx:0,
posterUrl:'',
navs:[],
userInfo:{},
postData: '',
curShareImg: ''
}
},
methods:{
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.shareDesc
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标currentInfo.small_image
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
}
// if(WeixinJSBridge){
// WeixinJSBridge.invoke('sendAppMessage',{
// "link":location.origin,
// "desc":shareDesc,
// "title":shareTitle
// });
//
// WeixinJSBridge.invoke("shareTimeline", {
// "link":location.origin,
// "img_url":currentInfo.small_image,
// "desc":shareDesc,
// "title":shareTitle
// })
//
// }
},
generatePost() {
// setTimeout(() => {
// try {
// html2canvas(document.body, {
// allowTaint: true,
// useCORS: true,
// backgroundColor: null
// }).then((canvas) => {
// this.postData = canvas.toDataURL();
// }).catch(e => {
// }).finally(() => {
// });
// } catch(e) {
// // alert(e);
// }
// }, 200)
},
closeModal(){
this.showPoster = false
this.posterUrl = ''
// hideModal()
},
bindSave(){
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster(){
const currentInfo = this.navs[this.activeIdx]
console.log(currentInfo)
var userInfo = await getUserInfo();
console.log(userInfo);
var shareUserName = `快跟着${userInfo.nickname.length > 4 ? userInfo.nickname.substr(0, 4) : userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync(currentInfo.share_image);
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareUserName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
canvasTextAutoLine(this.shareDesc, ctx, dpr*410, dpr * 45, dpr * 290,45,30,dpr,true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 150,52,52,dpr,true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 217,52,52,dpr,true)
return canvas.toDataURL("image/png");
},
async refreshShareText(only){
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
console.log(randStr)
//this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr+''
// this.posterUrl = await this.createdPoster()
// // this.posterUrl = currentInfo.poster
//this.showPoster = true
// showModal()
only!==true && this.generatePost();
},
async bindShareEvent(){
//this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
// showModal()
},
async setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
//this.shareDesc = this.navs[this.activeIdx].content
this.curShareImg = this.navs[this.activeIdx].share_image;
if(initJsSdk)this.shareToFirends()
},
async _init_func(){
var category_id = getQueryByString(location.href,'id')
this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText(true)
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// userInfo.qrcode = (await createImgByAsync(userInfo.qrcode)).src;
this.curShareImg = this.navs[this.activeIdx].share_image;
console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{
console.log(err)
})
this.loadReady = true
setTimeout(() => {
this.generatePost();
}, 1000);
}
},
created(){
this._init_func()
}
})
</script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowBlur = 8;
for (let i = 0; i < str.length; i++) {
lineWidth += fontSize*dpr // 假定一个字是12px
// console.log(lineWidth,canvasWidth)
// canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
totalLineHeight += lineHeight
initY += lineHeight*dpr
lineWidth = 0
lastSubStrIndex = i
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
}
}
return totalLineHeight
}
function showModal(){
// document.getElementById('showPoster').style.display = 'block'
}
function hideModal(){
// document.getElementById('showPoster').style.display = 'none'
}
</script>
</body>
</html>
show.html
......@@ -12,6 +12,9 @@
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle{
position: fixed;
left: 200%;
......@@ -429,7 +432,7 @@ var vueInstance = new Vue({
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标currentInfo.small_image
success: function () {
// 设置成功
......@@ -438,7 +441,7 @@ var vueInstance = new Vue({
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
......
show1.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle{
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar{
display: none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/*padding-bottom: 1.14rem;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar{
display: none;
}
.nav-item{
display: inline-block;
width: 1.3rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 0.42rem;
}
.nav-item.active{
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 0.2rem auto auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.2);
position: relative;
}
.nav-item__icon{
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
border-radius: 50px;
overflow: hidden;
}
.nav-item__mtitle{
margin-top: 0.1rem;
text-align: center;
font-size: 0.24rem;
line-height: 0.28rem;
color: #fff;
width: 1.3rem;
display: block;
white-space: normal;
}
.mtitle{
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img{
width: 6.68rem;
height: 4.46rem;
vertical-align: top;
}
.content{
width: 6.47rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
/*-webkit-overflow-scrolling: touch;*/
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
text-align: justify;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background: none;
z-index: 999;
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.55rem;
height: 0.84rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
filter:drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{
user-select:none;
width: 80%;
}
.modal-wrap{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
transform: translate(-2000px, -2000px);
overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrap.show {
transform: translate(0px, 0px);
}
.modal-container{
position: relative;
transform: scale(0.9);
/* height: 10.65rem; */
}
.poster, .share-pic{
width: 6.51rem;
position: relative;
}
.share-pic {
z-index: 100;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.poster.hide {
transform: translate(-2000px, -2000px);
}
.poster-img{
width: 100%;
display: block;
}
.change-poster-btn{
position: absolute;
right: 0.32rem;
top: 0.32rem;
width: 2.08rem;
height: 0.67rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 101;
}
.poster-action-box{
width: 6.51rem;
margin: 0.4rem auto 0;
display: flex;
justify-content:center;
align-items: center;
}
.poster-action-btn{
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.42rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.4rem;
bottom: 0.4rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.4rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
</style>
</head>
<body>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img :src="item.small_image" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div class="mtitle">
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div>
<div class="modal-wrap" :class="{show: showPoster}" @click="closeModal">
<div class="modal-container">
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster" ref="postContent" >
<img :src="curShareImg" v-if="curShareImg" class="poster-img" @load="generatePost"/>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<!-- <img :src="postData" alt="" v-if="postData" class="share-pic"> -->
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div>
</div>
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var vueInstance = new Vue({
el:'#app',
data(){
return {
showPic:false,
contentList:[],
loadReady:false,
showPoster:false,
shareTitle:'',
shareDesc:'',
activeIdx:0,
posterUrl:'',
navs:[],
userInfo:{},
postData: '',
curShareImg: ''
}
},
methods:{
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.shareDesc
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标currentInfo.small_image
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
}
// if(WeixinJSBridge){
// WeixinJSBridge.invoke('sendAppMessage',{
// "link":location.origin,
// "desc":shareDesc,
// "title":shareTitle
// });
//
// WeixinJSBridge.invoke("shareTimeline", {
// "link":location.origin,
// "img_url":currentInfo.small_image,
// "desc":shareDesc,
// "title":shareTitle
// })
//
// }
},
generatePost() {
// setTimeout(() => {
// try {
// html2canvas(document.body, {
// allowTaint: true,
// useCORS: true,
// backgroundColor: null
// }).then((canvas) => {
// this.postData = canvas.toDataURL();
// }).catch(e => {
// }).finally(() => {
// });
// } catch(e) {
// // alert(e);
// }
// }, 200)
},
closeModal(){
this.showPoster = false
this.posterUrl = ''
// hideModal()
},
bindSave(){
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster(){
const currentInfo = this.navs[this.activeIdx]
console.log(currentInfo)
var userInfo = await getUserInfo();
console.log(userInfo);
var shareUserName = `快跟着${userInfo.nickname.length > 4 ? userInfo.nickname.substr(0, 4) : userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync(currentInfo.share_image);
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareUserName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
canvasTextAutoLine(this.shareDesc, ctx, dpr*410, dpr * 45, dpr * 290,45,30,dpr,true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 150,52,52,dpr,true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 217,52,52,dpr,true)
return canvas.toDataURL("image/png");
},
async refreshShareText(only){
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
console.log(randStr)
//this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr+''
// this.posterUrl = await this.createdPoster()
// // this.posterUrl = currentInfo.poster
//this.showPoster = true
// showModal()
only!==true && this.generatePost();
},
async bindShareEvent(){
//this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
// showModal()
},
async setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
//this.shareDesc = this.navs[this.activeIdx].content
this.curShareImg = this.navs[this.activeIdx].share_image;
if(initJsSdk)this.shareToFirends()
},
async _init_func(){
var category_id = getQueryByString(location.href,'id')
this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText(true)
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// userInfo.qrcode = (await createImgByAsync(userInfo.qrcode)).src;
this.curShareImg = this.navs[this.activeIdx].share_image;
console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{
console.log(err)
})
this.loadReady = true
setTimeout(() => {
this.generatePost();
}, 1000);
}
},
created(){
this._init_func()
}
})
</script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowBlur = 8;
for (let i = 0; i < str.length; i++) {
lineWidth += fontSize*dpr // 假定一个字是12px
// console.log(lineWidth,canvasWidth)
// canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
totalLineHeight += lineHeight
initY += lineHeight*dpr
lineWidth = 0
lastSubStrIndex = i
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
}
}
return totalLineHeight
}
function showModal(){
// document.getElementById('showPoster').style.display = 'block'
}
function hideModal(){
// document.getElementById('showPoster').style.display = 'none'
}
</script>
</body>
</html>
tour.html
......@@ -15,6 +15,9 @@
<link rel="stylesheet" href="./libs/swiper3d/src/css/3dSwiper.css">
<style>
html,body{
background:#000;
}
@font-face {
font-family: myFont;
......@@ -345,7 +348,7 @@ function _init_wx_jssdk(){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:shareImg(), // 分享图标
success: function () {
// 设置成功
......@@ -354,7 +357,7 @@ function _init_wx_jssdk(){
wx.updateTimelineShareData({
title: getUserInfoByLocalStorage()?`${getUserInfoByLocalStorage()}的2020幸运打卡地：丹寨`:FRONT_TITLE, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:shareImg(), // 分享图标
success: function () {
// 设置成功
......
travel.html
......@@ -11,6 +11,9 @@
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle{
position: fixed;
left: 200%;
......@@ -540,7 +543,7 @@ var vueInstance = new Vue({
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
......@@ -549,7 +552,7 @@ var vueInstance = new Vue({
wx.updateTimelineShareData({
title: getUserInfoByLocalStorage()?`${getUserInfoByLocalStorage()}的2020幸运打卡地：丹寨`:FRONT_TITLE, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment