微信小程序云开发——图片展示，视频播放案例

这次是帮朋友写的一个简单的小程序。考虑到成本和页面简单的问题，我就决定用小程序云开发来进行开发。后来实际开发的时候发现，页面用到图片实在是太多。CDN流量一个月5G根本不够用。但是我看到了数据库一天可以免费访问5万次，我就决定用base64来解决CDN流量不够用的问题。小程序云开发也是可以放视频的。有个提示就是我们在操作数据库的时候一定要注意权限的设置，不然就算你是管理员你在本地还是访问不到数据的！！！希望对大家有所帮助。直接上代码

WXML：

<view class="headerContainer"><view class="headerImage"><image src="../../images/header.jpg"></image></view><view class="headerName">摄影师：王刀刀</view><view class="headerDescrition"><text decode="{{true}}">美食&nbsp; · &nbsp;产品&nbsp; · &nbsp;广告&nbsp; · &nbsp;活动&nbsp; ·  &nbsp;航拍&nbsp; · &nbsp;微摄</text></view>
</view>
<view class="inforContainer"><view class="inforTitle">免费资源</view><view class="inforListContentContainer"><view class="inforListContainer" wx:for="{{resource}}" wx:key="key"><view class="circleContainer"><view class="cicleContent"></view></view><text>{{item}}</text></view></view><view class="inforTitle">联系方式</view><view><text class="phoneNumber">13626245104（微信同手机号）</text></view><view class="inforTitle">项目经历</view><!-- tab栏 --><view class="tabContainer"><view wx:for="{{tabTitle}}" data-tabIndex="{{index}}" wx:key="key" bindtap="tabClick"><text class="{{tabIndex === index ? 'tabActive':''}}">{{item}}</text></view></view><!-- tab栏对应的内容 --><view wx:for="{{tabTitle}}" wx:for-item="itemTab" wx:key='key'><!-- 图片 --><view class="imgContainer" hidden="{{itemTab === '微视频' ? true : tabIndex !== index ? true : false}}"><view class="imgListContainer" wx:for="{{itemTab === '美食摄影'? foodImgArr : itemTab === '产品摄影' ? proImgArr : sceneImgArr}}" wx:key='key'><image src="{{item}}" mode="aspectFill" data-index='{{index}}' bindtap="viewImage"></image></view></view><!-- 微视频 --><!-- <view wx:for="{{videoArr}}" wx:key="key"><video id="video_{{index}}" class="videoStyle" src="{{item}}" bindplay="videoPlay"></video></view> --></view>
</view>

WXJS：

//index.js
const app = getApp()
Page({data: {resource: ['全画幅单反相机', '大三元镜头组', '预定摄影棚', '微距镜头', '普通闪灯', '联机拍摄', '常用道具', '助理'],// '微视频'tabTitle: ['美食摄影', '产品摄影', '场景摄影'],videoDist: ['cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/乌米粽.MP4','cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/喜来登香港老饭店.mp4','cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/建德新安江奇雾.MP4','cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/蜜瓜.MP4'],video_id: '',videoArr: [],proImgId: ['5edf0df2-2b61-4b19-821d-0cd62067ea9f', '34f6ab37-184a-4acc-99e3-f132a12ed0d8', '3e66d75e-3d36-4d00-b307-695c5f6f9a90', 'b6d25571-0167-48c7-b17f-d1ad5d86017a','bd76baca-dd0e-4815-a384-70a4a208e78b', '596734eb-0018-44e3-9491-61252ca3ee07', 'e67ab1f3-f991-471c-9108-0b2cbd130f47', 'c2fb5258-776d-4db7-a26c-5af777c4ab75', '2d632cf1-522e-471b-977d-bd25f29f2814','b3df7c5b-2038-4639-90e2-a2aef1c9c155', 'e69f322a-ba77-49c2-82ac-b6d4d9122403', 'c305d4d4-70a6-4171-b3f9-816e137470f6', 'd75e81cc-7f28-4930-ace4-27db31127668', '0cd82ecc-a679-468b-a5f7-0fe418b876cd','dc7378ca-5b9b-4559-b86d-e254ed5a9212', '049ffdab-2060-4878-a60d-e8bfa181f8bf', 'b650e215-838b-48ef-85ea-145deffec499', '9cda3ce3-4070-464e-8662-867328bf62f3', '9a556f92-8133-4dfa-8960-975e7d1771b5','e4b61e5a-436b-4722-8599-342a25abbea6', '86c01e07-77cb-45f7-9a91-5f0c2c131f63', 'efcee82c-a03d-4014-aab9-35667de1e133', '4184091e-1b56-4c96-8fc6-2e17536b2e17', '4fe446c7-98b9-4d6b-8cdb-47e2ef7cf069','37f78fcc-bda1-4eb8-8658-ce592c4506de', '3557b4a7-3148-4d59-8074-56870814e358', '0f8e533e-be27-4119-be72-025c79175bf1'],foodImgId: ['d07f4db0-d1c1-4587-aa8c-6e387046e5c6', 'e8ac583c-857f-4880-b905-1cba97444c1b', '633d628c-c465-420e-9219-e06e35e9b38b', '9eadfb94-c593-46ce-beab-f25ed4aaa75c', '5f0787fa-db10-4202-9878-7dcc2545317c','87659922-bf49-456c-aea5-40cab438acda', '381c52fa-de26-43da-83de-649a27f3e944', '0263078c-c8e1-4688-a352-5a08570ccd9d', '4e91c53a-d978-4171-90b1-38d2e2c2b70d','8115131d-6bee-4248-b942-724db65cdf4a','14d2976e-74a3-414e-b294-6984a41082a3', '20027202-eaee-4dbc-8db9-092ba4cc2ab0', '1aa9d907-5d85-442e-b570-4be37165b023', 'dd2c28dd-8ac5-40b6-9ecd-30a41289c350','9218522e-6786-4e85-8fa6-7eb4d61e77a9','290e0638-0a65-4548-be30-ea0c5852f51f', '311216c4-69b5-4ea6-9cdf-41d24a17450d', '6fbf09c2-4864-4066-a0af-3dfff4eea9a6', '77f24bc1-dbde-4569-a3fa-11a7741fc982','854425c8-fc05-451e-b610-e2b19081e927','d99fbdf3-5f91-4b52-962f-8b0e708b4072', 'f6f892ea-988c-4fb8-99ed-e35c15b4f9a9', 'ead195c2-c19d-47ea-8238-24246acb8610', 'b901e96b-d933-4bce-93d0-d4875412135f','2554c62a-30f2-4686-9cbc-d61eb8a8f98b','0a82f6ce-abb7-4246-875a-bf7eb44f797a', '57bbc128-8233-4d4b-ac02-b8a98df72955', '861cf71e-94ab-429e-b7a9-ff71a41e47b0', '2b341370-7ffc-4731-a75b-88e13ceac76f','8fa338f6-27e5-4356-ad9c-60a769439a65','16ff398f-c5ed-40b4-b1b0-83412d7434ee', '3b2b5810-7da4-4e32-8154-f2900c19e9e2', 'ae396e4d-7f3b-4a8c-ab92-445bf47fabe2', '9091408d-9a53-47e4-b2d5-379c0ff9b0c2','96ac1f17-4745-4c2c-8b8a-861d48ec0be3','97dd778a-63c6-4746-82ca-67f14e31d5a7', '69194a57-cfb5-4708-a879-2d838fe8f3d7', '9d022fc8-3e50-4511-8ad9-9cefcc597498', '1563f6ca-ca21-4b86-bd8c-2f5cd602fd2c','d6fa920c-ac5d-4c30-9bbb-54f89451f19c','1e755458-08f3-4940-929f-6d55ac25e686', '7c8c0486-b07d-4837-a6f4-e156a689b30e', '5dfd0b3f-6921-4fb4-8edf-9d9f2c7c17a7', 'e60b80b0-3bb8-4060-9830-a901ad96d712','08a7754f-a592-42e7-b19b-8a0c710fb0b3'],sceneImgId: ['1b6a8e6e-41a1-4960-84c6-74e25cd8e29c', 'a0a2edf3-ac0f-4ffe-a210-98920393a4f8', '5ccc9a84-ccb5-4804-86d1-accbeb2ca908', '05217f7f-5488-41f8-94c8-c715280c7070', '26190797-60b2-4440-a65d-213c01dfec64','376e1441-a6b9-4a32-837f-dfa599a3f69d', '5dc25b9b-9756-4c7f-b429-f0512e0bfb90', '1afe46c6-700a-4726-ae74-1d6a1e32b600', '160e6bb3-5d0b-4198-8831-11e9ad80030c', '1fbbbfd1-9aaa-4a9b-b145-61e0139379a3','7895262a-53ac-498c-bb6f-cd244a39b317', '3c7c0910-d9c4-4b97-a146-18d15fad0075', '480d1583-85e6-4777-aba9-fdb6d07fa0e2', '7aaa12ab-9c2a-4b87-b147-e46ee62144ba', '64c42cf5-9e20-45f9-88a2-e7e2a4194bcd','745c04f0-dadd-4970-991e-db318751fc28', '49b154f5-a0de-413f-a1bb-43c39fa8ee82', 'feb9da8a-6eed-4f98-873b-6bda33350ddb', '22dc45f8-8c81-43b1-9dda-c6c0dca05668', '76eb3e0f-1630-4904-9713-fb3b505aa84b','f46d719b-7ee4-4da2-a271-1f19a68b4d54', '88333abb-d6b6-4f70-8c97-9e1e0eea5787', 'df733468-f352-481d-8e10-a75f270acd05', 'f94590e7-86a6-47b8-936d-81f2112ce478'],proImgArr: [],foodImgArr: [],sceneImgArr: [],tabIndex: 0},// tab clicktabClick: function(e) {let tabIndex = e.currentTarget.dataset.tabindex;this.setData({tabIndex: tabIndex})},// 加载video数据的函数downVideoFun: function() {let that = this;let videoList = this.data.videoDist;let arr = [];for (let i in videoList) {wx.cloud.downloadFile({fileID: videoList[i]}).then(res => {arr.push(res.tempFilePath);that.setData({videoArr: arr})}).catch(error => {console.log(error);})}},// 多个视频点击播放暂停videoPlay: function(e) {var id = e.currentTarget.id;console.log(id);// 上个一视频idvar prev_id = this.data.video_id;// 停止山一个视频播放wx.createVideoContext(prev_id).pause();this.setData({video_id: id})// 延迟500ms，再播放本视频setTimeout(function() {wx.createVideoContext(id).play();}, 500)},// 美食图片foodImgFun: function() {let that = this;let foodImgId = that.data.foodImgId;let arr = [];const db = wx.cloud.database();for (let i in foodImgId) {db.collection('foodImg').where({_id: foodImgId[i]}).get().then(res => {arr.push(res.data[0].foodImg);that.setData({foodImgArr: arr})}).catch(err => {console.error(err)})}},// 产品图片proImgFun: function() {let that = this;let proImgId = that.data.proImgId;let arr = [];const db = wx.cloud.database();for (let i in proImgId) {db.collection('proImg').where({_id: proImgId[i]}).get({success: function(res) {arr.push(res.data[0].proImg);that.setData({proImgArr: arr})},fail: console.error})}},// 场景图片sceneImgFun: function() {let that = this;let sceneImgId = that.data.sceneImgId;let arr = [];const db = wx.cloud.database();for (let i in sceneImgId) {db.collection('sceneImg').where({_id: sceneImgId[i]}).get({success: function(res) {arr.push(res.data[0].sceneImg);that.setData({sceneImgArr: arr})},fail: console.error})}},// 图片预览viewImage: function(e) {console.log(this.data.tabIndex);let index = e.currentTarget.dataset.index;if (this.data.tabIndex === 0) {console.log("dianl")var imgArr = this.data.foodImgArr;} else if (this.data.tabIndex === 1) {var imgArr = this.data.proImgArr;} else {var imgArr = this.data.sceneImgArr;}wx.previewImage({current: imgArr[index], //当前图片地址urls: imgArr, //所有要预览的图片的地址集合 数组形式success: function(res) {},fail: function(res) {},complete: function(res) {},})},/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function() {},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function(options) {this.foodImgFun();this.proImgFun();this.sceneImgFun();// this.downVideoFun();},/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function() {},/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function(msg) {}})

WXSS：

/**index.wxss**/page {background: #f6f6f6;display: flex;flex-direction: column;justify-content: flex-start;
}.headerContainer {display: flex;flex-direction: column;align-items: center;background-color: #323232;padding: 30rpx 0 60rpx 0;
}.headerImage {width: 170rpx;height: 170rpx;border-radius: 50%;overflow: hidden;
}.headerImage image {width: 100%;height: 100%;
}.headerName {font-size: 36rpx;color: #fff;margin-top: 40rpx;
}.headerDescrition {color: #fff;font-size: 24rpx;margin-top: 30rpx;
}.inforListContentContainer {display: flex;flex-direction: row;flex-wrap: wrap;
}.inforContainer {padding: 0 30rpx 60rpx 30rpx;
}.inforTitle {height: 60rpx;line-height: 50rpx;font-size: 28rpx;color: #383838;letter-spacing: 2rpx;border-bottom: 2rpx solid #d9d9d9;margin-top: 40rpx;
}.circleContainer {width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #60ad99;position: relative;margin-left: 60rpx;
}.cicleContent {width: 8rpx;height: 8rpx;border-radius: 50%;background-color: #fff;position: absolute;left: 6rpx;top: 6rpx;
}.inforListContainer {display: flex;flex-direction: row;align-items: center;margin-top: 36rpx;
}.inforListContainer text {display: block;width: 200rpx;font-size: 24rpx;color: #8e8e8e;margin-left: 28rpx;
}.phoneNumber {display: block;font-size: 24rpx;color: #8e8e8e;margin-left: 60rpx;margin-top: 20rpx;
}.videoStyle {width: 100%;height: 400rpx;margin-top: 30rpx;
}.imgContainer {display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 40rpx;
}.imgContainer .imgListContainer:nth-child(3n-1) {border-left: 1px solid #353439;border-right: 1px solid #353439;
}.imgListContainer {width: 33.333%;height: 240rpx;box-sizing: border-box;border-bottom: 1px solid #353439;/* overflow: hidden; */
}.imgListContainer image {width: 100%;height: 100%;
}.tabContainer {display: flex;flex-direction: row;justify-content: space-around;height: 70rpx;line-height: 70rpx;font-size: 28rpx;/* border-bottom: 2rpx solid #d9d9d9; */color: #323232;
}.tabActive {color: #60ad99;
}

云开发的数据库截图：

微信小程序云开发——图片展示，视频播放案例相关推荐

微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...
关于微信小程序云开发---实现客服自动回复图片例子
关于微信小程序云开发-实现客服自动回复例子微信自带的云开发功能使前端工程师可以独立的开发出一款小程序,微信自带的云开发. 首先和开发其他平台的项目一样先看官方文档. 微信小程序开放文档一. 什么是 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
关于微信小程序云开发以及云开发实例展示
本文分享给使用微信云开发的同学序言首先,云开发是一种趋势,因为跨平台解决方案可以提高开发效率,减少开发成本.使用云开发,开发者无需关注服务器.网络和数据库等底层技术,可以专注于业务逻辑的开发,从而 ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...

微信小程序云开发——图片展示，视频播放案例

微信小程序云开发——图片展示，视频播放案例相关推荐

最新文章

热门文章