Page({
/**
* 页面的初始数据
*/
data: {
current_id:'',//当前播放视频id
videoList:[
{id:"1","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"2","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"3","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"4","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"5","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"6","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"7","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"8","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
{id:"9","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//视频列表点击事件
videoPlay:function(e){
console.log(e)
var id= e.currentTarget.dataset.index
var currentId=e.currentTarget.id
//没有播放时播放视频
if(!this.data.current_id){
this.setData({
current_id: currentId
})
var videoContext = wx.createVideoContext(id)
videoContext.play()
}else{//有播放时先将prev暂停,再播放当前点击的current
if(this.data.current_id != currentId){
var preVideoID='videoId'+this.data.current_id
var videoContextPrev = wx.createVideoContext(preVideoID)
videoContextPrev.pause()
}
this.setData({
current_id: currentId
})
var videoContext = wx.createVideoContext(id)
videoContext.play()
}
},
//点击下载视频并保存到
toUploadVideo(e){
console.log(wx.env)
//wx.env.USER_DATA_PATH:微信小程序提供的本地用户文件目录
wx.showLoading({
title: '正在下载,请稍后',
mask: true
})
var url = e.currentTarget.dataset.url
let fileName = new Date().valueOf()
//1.下载文件资源到本地
wx.downloadFile({
url: url,//下载资源的url
filePath:wx.env.USER_DATA_PATH+'/'+fileName+'.mp4',//指定文件下载后存储的路径(本地路径)(filePath放开手机没问题,开发者工具报超限错误)
name:'file',
// header: {}, // 设置请求的 header
// formData: {}, // HTTP 请求中其他额外的 form data
success: function(res){
console.log('downloadFile',res)
wx.hideLoading()
// success
//2.保存视频到系统相册。支持mp4视频格式
wx.saveVideoToPhotosAlbum({
filePath: res.filePath,//视频文件路径,可以是临时文件路径也可以是永久文件路径(本地路径)
success :function(ress) {
wx.showToast({
title: '下载成功',
icon: 'success'
})
//删除临时文件
var fileManager = wx.getFileSystemManager();//全局唯一的文件管理器
fileManager.unlink({//删除
filePath: wx.env.USER_DATA_PATH+'/'+fileName+'.mp4',
success: function(resf) {
console.log('unlink',resf)
}
})
},
fail (ress) {
console.log('保存视频失败',ress)
//未授权
if(ress.errMsg == 'saveVideoToPhotosAlbum:fail auth deny'){
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: function(c) {
//调起客户端小程序设置界面,返回用户设置的操作结果。
wx.openSetting({
success: function(settingdata) {
if(settingdata.authSetting['scope.writePhotosAlbum']){
wx.showModal({
title: "提示",
content: "获取权限成功,再次点击下载即可保存",
showCancel: false
})
}else{
wx.showModal({
title: "提示",
content: "获取权限失败,将无法保存到相册哦",
showCancel: false
})
}
}
})
}
})
}
},
})
},
fail: function(res) {
// fail
wx.hideLoading()
console.log('下载失败',res)
}
})
},
//获取该小程序下已保存的本地缓存文件列表 并 删除
handleSavedFileList(){
//1.获取该小程序下已保存的本地缓存文件列表(小程序本地存储的文件列表)
wx.getSavedFileList({
success: function(res){
console.log("getSavedFileList",res)
//遍历小程序本地存储的文件列表
res.fileList.forEach((val,key) =>{
//2.删除存储的垃圾数据
wx.removeSavedFile({
filePath: val.filePath
})
})
}
})
}
})
大三集中实训做的一个微信小程序之点餐系统(静态页面不包含java后台逻辑)
微信小程序是一种轻量级的应用开发平台,主要针对移动端,它允许开发者通过编写JavaScript、WXML(微信小程序标记语言)和WXSS(微信小程序样式语言)来构建应用。在这个项目中,“大三集中实训做的一个微信小程序之点餐系统”是一个实践性的学习项目,虽然不包含Java后台逻辑,但它涉及到了微信小程序开发中的多个核心知识点。 我们要理解微信小程序的基本架构。微信小程序的开发主要包括四部分:页面结构(WXML)、样式设计(WXSS)、业务逻辑(JavaScript)和数据管理。WXML负责定义页面的结构,类似于HTML,但它的作用是建立视图层的结构;WXSS则用来设置页面元素的样式,类似于CSS,但有其特定的语法和规则;JavaScript用于处理业务逻辑和数据操作,包括网络请求、数据缓存、事件处理等。 在这个点餐系统中,描述提到了视频的上传与下载。在微信小程序中,可以使用`wx.uploadFile`和`wx.downloadFile`API来实现文件的上传和下载。这两个API都需要指定服务器的URL和本地文件路径,然后通过回调函数处理结果。需要注意的是,文件上传和下载都涉及到用户隐私和安全性,因此在实际开发中,必须确保符合相关法律法规和微信小程序的政策。 此外,登录功能的实现通常会用到微信小程序的OAuth授权。用户可以通过微信账号一键登录,开发者可以获取到用户的OpenID,以进行身份验证和数据绑定。在微信小程序中,这个过程可以通过`wx.login`和`wx.getUserInfo`API完成,结合后端服务进行鉴权。 描述中提到“博客文有详细介绍”,这可能是指开发者将项目实施过程和遇到的问题记录在个人博客上,作为学习资源分享。这种做法对于巩固知识、积累经验非常有益,也是提升个人技能和分享精神的体现。 至于压缩包内的“zhang”可能是项目源代码文件夹或某个文件的名称,但由于具体文件内容未知,无法进一步展开详细说明。不过,通常一个完整的微信小程序项目会包含app.js、app.json、app.wxss等全局配置文件,以及每个页面对应的json、wxml、wxss和js文件。 这个微信小程序点餐系统项目涵盖了微信小程序的基础开发、用户认证、文件操作等多个方面,是学习和实践小程序开发的一个良好案例。通过这样的实战训练,开发者可以深入理解和掌握微信小程序的开发流程和关键技术。
- 1
- 2
- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整
- 粉丝: 24
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于JAVA+SpringBoot+Vue+MySQL的多媒体素材库 源码+数据库+论文(高分毕设项目).zip
- 521自习室预订系统_zip.zip
- 523点餐平台网站_zip.zip
- 基于JAVA+SpringBoot+Vue+MySQL的电商平台 源码+数据库+论文(高分毕设项目).zip
- 522租房网站_zip.zip
- 基于JAVA+SpringBoot+Vue+MySQL的二手车交易系统 源码+数据库+论文(高分毕设项目).zip
- "永磁直驱风力发电系统PMSG的并网装置仿真研究",永磁直驱风力发电系统的并网装置仿真研究:基于双PWM变流器控制策略与最大功率点跟踪控制,永磁直驱风力发电系统PMSG 本仿真以永磁直驱风力发电系
- 526教师人事档案管理系统_zip.zip
- 524在线动漫信息平台_zip.zip
- 525家具销售电商平台_zip.zip
- 基于JAVA+SpringBoot+Vue+MySQL的高校教师科研管理系统 源码+数据库+论文(高分毕设项目).zip
- V4.5版本到V13.0版本的Newtonsoft.Json
- 529垃圾分类网站_zip.zip
- 基于JAVA+SpringBoot+Vue+MySQL的纺织品企业财务管理系统 源码+数据库+论文(高分毕设项目).zip
- 基于JAVA+SpringBoot+Vue+MySQL的格障碍诊断系统 源码+数据库+论文(高分毕设项目).zip
- 528口腔管家平台_zip.zip