Skip to content

L
learn-online
提交 f8b93a87 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 新增分享海报

上级 b55764cf
隐藏空白字符变更
内嵌 并排
正在显示 包含 988 行增加 和 10 行删除
learnOnline/api/base.js
浏览文件 @ f8b93a87
......@@ -15,3 +15,13 @@ export function getUser() {
export function logout() {
return httpRequest.get('/api/passport/rest/logout')
}
// 获取营销数据
export function getShare(data) {
return httpRequest.get(`/api/lms/v3/activities/share/${data.semester_id}/${data.course_id}/${data.chapter_id}`)
}
// 获取二维码
export function getQrcode(data) {
return httpRequest.get('/api/lms/util/pcode', data)
}
learnOnline/app.json
浏览文件 @ f8b93a87
......@@ -16,7 +16,8 @@
"pages/learnSystem/myScore/myScore",
"pages/learnSystem/myDiscuss/myDiscuss",
"pages/learnSystem/discussDetail/discussDetail",
"pages/course/player"
"pages/course/player",
"pages/share/index"
],
"window": {
"navigationBarBackgroundColor": "#fff",
......@@ -60,7 +61,7 @@
},
"plugins": {
"tencentvideo": {
"version": "1.5.2",
"version": "2.0.2",
"provider": "wxa75efa648b60994b"
}
}
......
learnOnline/components/share/index.js 0 → 100644
浏览文件 @ f8b93a87
import { getShare, getQrcode } from '../../api/base.js'
import { wxml, style } from './share.js'
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
semesterId: { type: String, value: '' },
courseId: { type: String, value: '' },
chapterId: { type: String, value: '' }
},
/**
* 组件的初始数据
*/
data: {
show: false,
hasControls: false,
isPreivew: false,
user: {},
share: { lecturer: {} },
qrcode: '',
bgList: [
'https://webapp-pub.ezijing.com/weapp/share/bg/01.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/02.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/03.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/04.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/05.jpg'
],
textList: [
'本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。',
'人本主义认为人是多维的，不能只去剖析本能，还要看思想和精神。',
'别把身份全建立在与人的关系上，要寻找独立于关系之外的自我意识',
'反思能力可得知自己的他人的不同,及自己的道德价值观和伦理模式'
],
avatarList: [],
controls: {
active: '0',
bg: 'https://webapp-pub.ezijing.com/weapp/share/bg/01.jpg',
text: '本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。',
avatar: ''
},
wxUserProfile: {}
},
lifetimes: {
attached() {
// 获取微信头像
const localUserInfo = wx.getStorageSync('userInfo')
let wxUserProfile = localUserInfo ? JSON.parse(localUserInfo) : {}
if (wxUserProfile.avatarUrl) {
this.data.avatarList.push(wxUserProfile.avatarUrl)
this.setData({ wxUserProfile, avatarList: this.data.avatarList, 'controls.avatar': wxUserProfile.avatarUrl })
}
}
},
/**
* 组件的方法列表
*/
methods: {
init() {
this.getShare().then(res => {
if (!res.data.need_share) {
return
}
app.getUser().then(res => {
res.realname = res.realname || res.nickname
if (res.avatar) {
this.data.avatarList.unshift(res.avatar)
this.setData({ avatarList: this.data.avatarList, 'controls.avatar': res.avatar })
}
this.setData({ user: res, show: true })
this.getQrcode()
})
})
},
// 获取营销数据
getShare() {
const params = {
semester_id: this.data.semesterId,
course_id: this.data.courseId,
chapter_id: this.data.chapterId
}
return getShare(params).then(res => {
const data = res.data
const [lecturer = {}] = data.lecturers
lecturer.lecturer_name = lecturer.lecturer_name.replace(/(\(|（)(.+)(\)|）)/, '')
data.course_name = data.course_name.replace(/(\(|（)(.+)(\)|）)/, '')
data.course_name = `《${data.course_name}》课程`
data.chapter_name = data.chapter_name.replace(/(\(|（)(.+)(\)|）)/, '')
// 两门课单独判断
if (data.course_name.includes('整合心理学与批判性思考')) {
const textList = [
'本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。',
'人本主义认为人是多维的，不能只去剖析本能，还要看思想和精神。'
]
this.setData({ textList, 'controls.text': textList[0] })
}
if (data.course_name.includes('自我探究')) {
const textList = [
'别把身份全建立在与人的关系上，要寻找独立于关系之外的自我意识',
'反思能力可得知自己的他人的不同,及自己的道德价值观和伦理模式'
]
this.setData({ textList, 'controls.text': textList[0] })
}
this.setData({ share: Object.assign(data, { lecturer }) })
return res
})
},
// 生成二维码
getQrcode() {
const user = this.data.user
const params = {
url: `http://pages.ezijing.com/ciis/mobile-204001490929.html?channel_num=96091&user_id=${user.id}&user_name=${user.realname}`
}
getQrcode(params).then(res => {
this.setData({ qrcode: res.url })
})
},
getUserProfile() {
// 获取微信头像
wx.getUserProfile({ desc: '使用头像生成海报' })
.then(res => {
const userInfo = res.userInfo
this.data.avatarList.push(userInfo.avatarUrl)
this.setData({ wxUserProfile: userInfo, avatarList: this.data.avatarList })
wx.setStorageSync('userInfo', JSON.stringify(userInfo))
})
.catch(() => {
wx.showToast({ title: '获取微信头像失败', icon: 'none' })
})
},
renderToCanvas() {
wx.showLoading({ title: '海报生成中' })
this.setData({ isPreivew: true }, () => {
this.widget = this.selectComponent('.widget')
setTimeout(() => {
this.widget
.renderToCanvas({ wxml: wxml(this.data), style })
.then(res => {
wx.hideLoading()
})
.catch(error => {
console.log(error)
wx.hideLoading()
wx.showToast({ title: '海报生成失败', icon: 'none' })
})
}, 500)
})
},
// 导出图片
extraImage() {
this.widget.canvasToTempFilePath().then(res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
})
.then(res => {
wx.showToast({ title: '保存成功', icon: 'none' })
})
.catch(error => {
wx.showToast({ title: '保存失败', icon: 'none' })
})
})
},
// 关闭分享
onClose() {
this.setData({ show: false })
},
// 背景|金句选项卡切换
onTabChange(e) {
const { index } = e.currentTarget.dataset
this.setData({ 'controls.active': index })
},
// 选择背景
onSelectImage(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.bg': item })
},
// 选择金句
onSelectText(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.text': item })
},
// 选择头像
onSelectAvatar(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.avatar': item })
},
// 控制栏显示隐藏
toggleControls() {
this.setData({ hasControls: !this.data.hasControls })
},
// 关闭预览
onClosePreview() {
this.setData({ isPreivew: false })
}
}
})
learnOnline/components/share/index.json 0 → 100644
浏览文件 @ f8b93a87
{
"component": true,
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas"
}
}
learnOnline/components/share/index.wxml 0 → 100644
浏览文件 @ f8b93a87
<view class="share-page" wx:if="{{ show }}">
<view class="close" bindtap="onClose"></view>
<!-- 分享配置页面 -->
<view class="share-page-body">
<view class="share">
<image
src="{{ controls.bg }}?x-oss-process=image/resize,m_fill,h_1064,w_600"
mode="aspectFill"
class="bg"
></image>
<image
src="https://webapp-pub.ezijing.com/weapp/share/cover.png?x-oss-process=image/resize,m_fill,h_924,w_534"
mode="aspectFill"
class="cover"
></image>
<view class="main">
<view class="teacher">{{ share.lecturer.lecturer_name }}</view>
<view class="course">{{ share.course_name }}</view>
<view class="user">
<image src="{{ controls.avatar }}" mode="aspectFill" class="avatar"></image>
<view class="nickname">{{ share.personal_name }}</view>
</view>
<view class="chapter">{{ share.chapter_name }}</view>
<view class="text">{{ controls.text }}</view>
<view class="footer">
<view class="footer-left">
<view
>我已坚持学习<text class="num">{{ share.used_day }}</text
>天</view
>
<view>我离学位殿堂又近了一步</view>
</view>
<image src="{{ qrcode }}" class="footer-right"></image>
</view>
</view>
</view>
</view>
<!-- 控制栏 -->
<view class="controls {{ hasControls ? 'is-show' : '' }}">
<view class="buttons">
<image
src="https://webapp-pub.ezijing.com/weapp/share/controls_up.png"
mode="aspectFill"
class="wx-image"
hidden="{{ hasControls }}"
bindtap="toggleControls"
></image>
<image
src="https://webapp-pub.ezijing.com/weapp/share/controls_down.png"
mode="aspectFill"
class="wx-image"
hidden="{{ !hasControls }}"
bindtap="toggleControls"
></image>
<view class="button">
<text>生成</text><text>海报</text>
<button class="wx-button" open-type="getUserInfo" bindtap="renderToCanvas"></button>
</view>
</view>
<view class="controls-main">
<view class="controls-tabs">
<view class="controls-tab {{ controls.active === '0' ? 'is-active' : '' }}" data-index="0" bindtap="onTabChange"
>背景</view
>
<view class="controls-tab {{ controls.active === '1' ? 'is-active' : '' }}" data-index="1" bindtap="onTabChange"
>金句</view
>
<view class="controls-tab {{ controls.active === '2' ? 'is-active' : '' }}" data-index="2" bindtap="onTabChange"
>头像</view
>
</view>
<scroll-view class="controls-scroll" scroll-x="{{ true }}">
<!-- 背景 -->
<view class="controls-content" hidden="{{ controls.active !== '0' }}">
<view
class="controls-bg-item {{ controls.bg === item ? 'is-active' : '' }}"
wx:for="{{ bgList }}"
wx:key="*this"
data-item="{{ item }}"
bindtap="onSelectImage"
>
<image
src="{{ item }}?x-oss-process=image/resize,m_fill,h_162,w_92"
mode="aspectFill"
class="image"
></image>
</view>
</view>
<!-- 金句 -->
<view class="controls-content" hidden="{{ controls.active !== '1' }}">
<view
class="controls-text-item {{ controls.text === item ? 'is-active' : '' }}"
wx:for="{{ textList }}"
wx:key="*this"
data-item="{{ item }}"
bindtap="onSelectText"
>{{ item }}</view
>
</view>
<!-- 头像 -->
<view class="controls-content" hidden="{{ controls.active !== '2' }}">
<view
class="controls-avatar-item {{ controls.avatar === item ? 'is-active' : '' }}"
wx:for="{{ avatarList }}"
wx:key="*this"
data-item="{{ item }}"
bindtap="onSelectAvatar"
>
<image src="{{ item }}" mode="aspectFill" class="image"></image>
</view>
<view class="controls-avatar-item" hidden="{{ wxUserProfile.avatarUrl }}">
<text>微信</text><text>头像</text>
<button class="wx-button" open-type="getUserInfo" bindtap="getUserProfile"></button>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<!-- 预览页面 -->
<view class="share-preivew" wx:if="{{ isPreivew }}">
<view class="close" bindtap="onClosePreview"></view>
<view class="share-preivew-main">
<wxml-to-canvas class="widget" width="300" height="530"></wxml-to-canvas>
</view>
<view class="share-preview-footer">
<view class="button button-default" bindtap="extraImage">保存图片到相册</view>
<view class="tips">分享图片到朋友圈</view>
<view class="tips">最高可获得5000朵紫荆花</view>
<!-- <view class="button button-primary"><text></text><text>最高可获得5000朵紫荆花</text></view> -->
</view>
</view>
learnOnline/components/share/index.wxss 0 → 100644
浏览文件 @ f8b93a87
.share-page {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 100;
display: flex;
flex-direction: column;
}
.share-page-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
}
.share {
width: 600rpx;
height: 1064rpx;
position: relative;
overflow: hidden;
}
.bg {
width: 600rpx;
height: 1064rpx;
}
.cover {
position: absolute;
top: 70rpx;
left: 32rpx;
width: 534rpx;
height: 924rpx;
}
.main {
position: absolute;
left: 82rpx;
top: 230rpx;
/* right: 82rpx; */
width: 436rpx;
}
.teacher {
font-size: 26rpx;
font-weight: bold;
color: #d78c4a;
line-height: 32rpx;
}
.course {
font-size: 26rpx;
font-weight: bold;
color: #d78c4a;
line-height: 32rpx;
}
.user {
margin-top: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.avatar {
width: 130rpx;
height: 130rpx;
border-radius: 50%;
overflow: hidden;
}
.nickname {
font-size: 30rpx;
font-weight: bold;
color: #d78c4a;
line-height: 48rpx;
}
.chapter {
margin-top: 10rpx;
margin-left: 18rpx;
margin-right: 18rpx;
height: 64rpx;
font-size: 28rpx;
font-weight: bold;
color: #1a1a1a;
line-height: 32rpx;
text-align: center;
}
.text {
margin-top: 116rpx;
margin-left: 30rpx;
margin-right: 30rpx;
height: 72rpx;
font-size: 26rpx;
font-weight: 500;
font-style: italic;
color: #1a1a1a;
line-height: 36rpx;
overflow: hidden;
}
.footer {
display: flex;
align-items: center;
margin-top: 30rpx;
margin-left: 18rpx;
margin-right: 18rpx;
}
.footer-left {
flex: 1;
font-size: 24rpx;
color: #1a1a1a;
line-height: 36rpx;
}
.num {
font-size: 34rpx;
color: #d78c4a;
font-weight: Bold;
}
.footer-right {
width: 98rpx;
height: 98rpx;
}
.controls {
position: relative;
padding-bottom: env(safe-area-inset-bottom);
}
.controls-main {
height: 0;
transition: height 0.3s;
overflow: hidden;
}
.controls.is-show {
background-color: #fff;
}
.controls.is-show .controls-main {
height: 260rpx;
}
.buttons {
position: absolute;
top: -132rpx;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 16rpx 26rpx;
}
.button {
position: relative;
width: 100rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
border-radius: 50%;
font-size: 26rpx;
font-weight: 400;
color: #d78c4a;
line-height: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wx-image {
width: 100rpx;
height: 100rpx;
}
.wx-button {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: transparent;
border: 0;
}
button:after {
content: none;
}
button::after {
border: none;
}
.controls-tabs {
display: flex;
height: 60rpx;
background: #ccc;
}
.controls-tab {
width: 150rpx;
line-height: 60rpx;
text-align: center;
background-color: #e6e6e6;
}
.controls-tab.is-active {
color: #d78c4a;
background-color: #fff;
}
.controls-content {
flex: 1;
height: 200rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.controls-content .is-active {
border: 5rpx solid #d78c4a;
}
.controls-bg-item {
flex: 0 0 92rpx;
width: 92rpx;
height: 162rpx;
margin: 0 30rpx;
border: 5rpx solid #fff;
border-radius: 5rpx;
overflow: hidden;
}
.controls-text-item {
margin: 0 30rpx;
flex: 0 0 455rpx;
width: 455rpx;
height: 125rpx;
display: flex;
align-items: center;
justify-content: center;
border: 5rpx solid #ccc;
border-radius: 12rpx;
overflow: hidden;
padding: 30rpx;
font-size: 26rpx;
color: #1a1a1a;
line-height: 36rpx;
box-sizing: border-box;
}
.controls-avatar-item {
position: relative;
margin: 0 30rpx;
flex: 0 0 120rpx;
width: 120rpx;
height: 125rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 5rpx solid #ccc;
border-radius: 50%;
overflow: hidden;
font-size: 26rpx;
color: #1a1a1a;
line-height: 36rpx;
box-sizing: border-box;
}
.image {
width: 100%;
height: 100%;
}
.share-preivew {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 75rpx 0;
}
.close {
position: absolute;
right: 16rpx;
top: 16rpx;
width: 96rpx;
height: 96rpx;
background: url('https://webapp-pub.ezijing.com/weapp/share/close.png') no-repeat;
background-size: contain;
z-index: 999;
}
.share-preivew-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
}
.share-preivew .button {
width: 500rpx;
height: 100rpx;
border-radius: 50rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 35rpx 0;
font-size: 26rpx;
font-weight: 400;
color: #d78c4a;
line-height: 30rpx;
}
.share-preivew .button-default {
color: #d78c4a;
background: #fff;
}
.share-preivew .button-primary {
color: #fff;
background: #d78c4a;
}
.share-preivew .tips {
font-size: 26rpx;
font-weight: 400;
color: #fff;
line-height: 40rpx;
text-align: center;
}
learnOnline/components/share/share.js 0 → 100644
浏览文件 @ f8b93a87
const wxml = function (data) {
return `
<view class="share">
<image src="${data.controls.bg}?x-oss-process=image/resize,m_fill,h_530,w_300" class="bg"></image>
<image src="https://webapp-pub.ezijing.com/weapp/share/cover.png" class="cover"></image>
<view class="main">
<text class="teacher">${data.share.lecturer.lecturer_name}</text>
<text class="course">${data.share.course_name}</text>
<view class="user">
<image src="${data.controls.avatar}?x-oss-process=image/resize,m_fill,h_195,w_195" class="avatar"></image>
<view><text class="nickname">${data.share.personal_name}</text></view>
</view>
<text class="chapter">${data.share.chapter_name}</text>
<text class="text">${data.controls.text}</text>
<view class="footer">
<view class="footer-left">
<view class="box"><text class="t1">我已坚持学习</text><text class="t2">${data.share.used_day}</text><text class="t3">天</text></view>
<text class="tips">我离学位殿堂又近了一步</text>
</view>
<image src="${data.qrcode}" class="footer-right"></image>
</view>
</view>
</view>`
}
const style = {
share: {
position: 'relative',
width: 300,
height: 530
},
bg: {
width: 300,
height: 530
},
cover: {
position: 'absolute',
top: 35,
left: 17,
width: 267,
height: 462
},
main: {
position: 'absolute',
left: 40,
top: 119,
width: 220,
height: 300
},
teacher: {
height: 14,
fontSize: 13,
lineHeight: 1,
color: '#D78C4A',
verticalAlign: 'middle'
},
course: {
height: 14,
fontSize: 13,
lineHeight: 14,
color: '#D78C4A',
verticalAlign: 'middle'
},
user: {
marginTop: 12,
flexDirection: 'column',
alignItems: 'center'
},
avatar: {
width: 65,
height: 65,
borderRadius: 32.5
},
nickname: {
marginTop: 4,
width: 220,
height: 14,
textAlign: 'center',
verticalAlign: 'middle',
fontSize: 13,
lineHeight: 14,
color: '#D78C4A',
textAlign: 'center'
},
chapter: {
marginTop: 8,
width: 220,
height: 32,
fontSize: 14,
fontWeight: 'bold',
color: '#1A1A1A',
lineHeight: 16,
textAlign: 'center'
},
text: {
marginTop: 55,
marginLeft: 13,
width: 200,
height: 36,
fontSize: 13,
fontWeight: 500,
fontStyle: 'italic',
color: '#1A1A1A',
lineHeight: 18
},
footer: {
marginLeft: 15,
marginRight: 15,
width: 190,
height: 60,
marginTop: 12,
flexDirection: 'row',
alignItems: 'center'
},
footerLeft: {
width: 140,
height: 50,
justifyContent: 'center'
},
box: {
width: 140,
height: 20,
flexDirection: 'row'
},
t1: {
width: 72,
height: 20,
fontSize: 12,
lineHeight: 20,
color: '#1A1A1A',
verticalAlign: 'middle'
},
t2: {
width: 40,
height: 20,
fontSize: 17,
lineHeight: 20,
color: '#D78C4A',
textAlign: 'center'
},
t3: {
width: 40,
height: 20,
fontSize: 12,
lineHeight: 20,
color: '#1A1A1A',
verticalAlign: 'middle'
},
tips: {
width: 140,
height: 20,
fontSize: 12,
lineHeight: 20,
color: '#1A1A1A',
verticalAlign: 'middle'
},
footerRight: {
width: 50,
height: 50
}
}
export { wxml, style }
learnOnline/package-lock.json
浏览文件 @ f8b93a87
{
"name": "learn-weapp",
"version": "1.0.0",
"lockfileVersion": 1,
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "learn-weapp",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@vant/weapp": "^1.6.5",
"miniprogram-computed": "^2.2.0",
"wxml-to-canvas": "^1.1.1"
}
},
"node_modules/@vant/weapp": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/@vant/weapp/-/weapp-1.6.5.tgz",
"integrity": "sha512-7+oNnlLIcHSqcwtzAKSM2LM+feXyfNIEOedHn5yDumPQPyGPDmsY6x5vwZ88i+sZspfj4HmzfeljJQ/rtDT0cg=="
},
"node_modules/eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
},
"node_modules/fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
},
"node_modules/miniprogram-computed": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/miniprogram-computed/-/miniprogram-computed-2.2.0.tgz",
"integrity": "sha512-UlPfPh5cvBnwb2jNXToUMxNkWAmi8a7hAjtJlwdA4XF5EbFI5Q5jI9mn1U8AAxbsUfnSf1Vmsc0LhkxGdKlRkg==",
"dependencies": {
"fast-deep-equal": "^2.0.1",
"rfdc": "^1.1.4"
}
},
"node_modules/rfdc": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.2.0.tgz",
"integrity": "sha512-ijLyszTMmUrXvjSooucVQwimGUk84eRcmCuLV8Xghe3UO85mjUtRAHRyoMM6XtyqbECaXuBWx18La3523sXINA=="
},
"node_modules/widget-ui": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/widget-ui/-/widget-ui-1.0.2.tgz",
"integrity": "sha512-gDXosr5mflJdMA1weU1A47aTsTFfMJhfA4EKgO5XFebY3eVklf80KD4GODfrjo8J2WQ+9YjL1Rd9UUmKIzhShw==",
"dependencies": {
"eventemitter3": "^4.0.0"
}
},
"node_modules/wxml-to-canvas": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/wxml-to-canvas/-/wxml-to-canvas-1.1.1.tgz",
"integrity": "sha512-3mDjHzujY/UgdCOXij/MnmwJYerVjwkyQHMBFBE8zh89DK7h7UTzoydWFqEBjIC0rfZM+AXl5kDh9hUcsNpSmg==",
"dependencies": {
"widget-ui": "^1.0.2"
}
}
},
"dependencies": {
"@vant/weapp": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/@vant/weapp/-/weapp-1.6.5.tgz",
"integrity": "sha512-7+oNnlLIcHSqcwtzAKSM2LM+feXyfNIEOedHn5yDumPQPyGPDmsY6x5vwZ88i+sZspfj4HmzfeljJQ/rtDT0cg=="
},
"eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
......@@ -27,6 +89,22 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.2.0.tgz",
"integrity": "sha512-ijLyszTMmUrXvjSooucVQwimGUk84eRcmCuLV8Xghe3UO85mjUtRAHRyoMM6XtyqbECaXuBWx18La3523sXINA=="
},
"widget-ui": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/widget-ui/-/widget-ui-1.0.2.tgz",
"integrity": "sha512-gDXosr5mflJdMA1weU1A47aTsTFfMJhfA4EKgO5XFebY3eVklf80KD4GODfrjo8J2WQ+9YjL1Rd9UUmKIzhShw==",
"requires": {
"eventemitter3": "^4.0.0"
}
},
"wxml-to-canvas": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/wxml-to-canvas/-/wxml-to-canvas-1.1.1.tgz",
"integrity": "sha512-3mDjHzujY/UgdCOXij/MnmwJYerVjwkyQHMBFBE8zh89DK7h7UTzoydWFqEBjIC0rfZM+AXl5kDh9hUcsNpSmg==",
"requires": {
"widget-ui": "^1.0.2"
}
}
}
}
learnOnline/package.json
浏览文件 @ f8b93a87
......@@ -5,9 +5,9 @@
"main": "app.js",
"dependencies": {
"@vant/weapp": "^1.6.5",
"miniprogram-computed": "^2.2.0"
"miniprogram-computed": "^2.2.0",
"wxml-to-canvas": "^1.1.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
......
learnOnline/pages/course/player.js
浏览文件 @ f8b93a87
......@@ -168,6 +168,9 @@ Page({
// 更新chapter
this.updateActiveChapter(this.data.nextChapter)
}
// 分享海报
const share = this.selectComponent('.share')
share.init()
},
// 当前播放时间更新
onTimeupdate(e) {
......
learnOnline/pages/course/player.json
浏览文件 @ f8b93a87
......@@ -3,6 +3,7 @@
"navigationBarTitleText": "",
"usingComponents": {
"player-video": "/components/player/video",
"player-audio": "/components/player/audio"
"player-audio": "/components/player/audio",
"share": "/components/share/index"
}
}
learnOnline/pages/course/player.wxml
浏览文件 @ f8b93a87
......@@ -73,3 +73,5 @@
</van-tabs>
</view>
</view>
<!-- 分享海报 -->
<share semesterId="{{ semesterId }}" courseId="{{ courseId }}" chapterId="{{ chapterId }}" class="share"></share>
learnOnline/pages/share/index.js 0 → 100644
浏览文件 @ f8b93a87
// pages/share.js
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 分享海报
const share = this.selectComponent('.share')
share.init()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
learnOnline/pages/share/index.json 0 → 100644
浏览文件 @ f8b93a87
{
"usingComponents": {
"share": "/components/share/index"
}
}
learnOnline/pages/share/index.wxml 0 → 100644
浏览文件 @ f8b93a87
<share semesterId="6741976022452797440" courseId="6798856727123984384" chapterId="6793103998254579712" class="share"></share>
learnOnline/pages/share/index.wxss 0 → 100644
浏览文件 @ f8b93a87
/* pages/share.wxss */
\ No newline at end of file
learnOnline/project.config.json
浏览文件 @ f8b93a87
......@@ -26,17 +26,18 @@
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"useIsolateContext": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"showES6CompileOption": false,
"useCompilerPlugins": false
"useCompilerPlugins": false,
"minifyWXML": true
},
"compileType": "miniprogram",
"libVersion": "2.12.2",
"libVersion": "2.21.0",
"appid": "wx45f200b105ce6659",
"projectname": "learnOnline",
"isGameTourist": false,
......
learnOnline/project.private.config.json
浏览文件 @ f8b93a87
......@@ -57,7 +57,7 @@
{
"name": "pages/course/player",
"pathName": "pages/course/player",
"query": "semester_id=6587527700271857664&id=6438627385595133952&chapter_id=6438608301109280768",
"query": "semester_id=6741976022452797440&id=6798856727123984384&chapter_id=6793103998254579712",
"scene": null
},
{
......@@ -77,6 +77,12 @@
"pathName": "pages/learnSystem/courseContent/courseContent",
"query": "id=6839457224302002176&sid=6839462307211247616",
"scene": null
},
{
"name": "",
"pathName": "pages/share/index",
"query": "semester_id=6741976022452797440&id=6798856727123984384&chapter_id=6793103998254579712",
"scene": null
}
]
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论