这次是帮朋友写的一个简单的小程序。考虑到成本和页面简单的问题，我就决定用小程序云开发来进行开发。后来实际开发的时候发现，页面用到图片实在是太多。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}}">美食 · 产品 · 广告 · 活动 · 航拍 · 微摄</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 click
tabClick: 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);
// 上个一视频id
var 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;
}
云开发的数据库截图：
