首页-请柬
首页主要有一个邀请函动画、轮播图及音乐播放
音乐播放调用微信api
const audioCtx = wx.createInnerAudioContext()
具体查看文档,文档使用示例比较详细,小程序开发
注意: 一些视图组件,引入taro封装的组件,利于最后多端编译
下面是主要代码:
import Taro from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import { AtNoticebar } from 'taro-ui'
import './index.less'
import music_icon from '../../assets/images/music_icon.png'
import music_play from '../../assets/images/music_play.png'
import we from '../../assets/images/we.png'
import email_icon from '../../assets/images/email.png'
const audioCtx = wx.createInnerAudioContext()
export default class HotShowing extends Taro.Component {
config = {
navigationBarTitleText: '请柬'
}
constructor() {
super(...arguments)
this.state = {
movieData: [],
currentTab: 0,
animationData: [],
imgList: [],
isPlay: true,
queueData: null,
emailData: null,
isEmail: false,
isDialog:false,
dialogData:null
}
}
getList() {
const that = this
const db = wx.cloud.database()
const banner = db.collection('banner')
banner.get().then(res => {
console.log(res.data[0].banner)
that.setState({
imgList: res.data[0].banner || []
})
setTimeout(()=>{
this.queue()
},8000)
})
}
audioPlay() {
const that = this
if (that.state.isPlay) {
audioCtx.pause()
that.setState({
isPlay: false
})
wx.showToast({
title: '您已暂停音乐播放~',
icon: 'none'
})
} else {
audioCtx.play()
that.setState({
isPlay: true
})
wx.showToast({
title: '背景音乐已开启~',
icon: 'none'
})
}
}
getMusicUrl() {
const that = this
const db = wx.cloud.database()
const music = db.collection('vadio')
music.get().then(res => {
console.log(res)
let musicUrl = res.data[0].musicUrl
audioCtx.src = musicUrl
audioCtx.loop = true
audioCtx.autoplay = true
audioCtx.play()
})
}
queue() {
let animation = wx.createAnimation({})
animation.translate((200 - 60), 0).scale(0.3).opacity(0.5).step({ duration: 2000 }).height(0).step()
this.setState({ queueData: animation.export()})
let animation2 = wx.createAnimation({})
animation2.translate(0, 330).step({ duration: 1000 })
setTimeout(() => {
this.setState({
isEmail: true
})
}, 2000)
setTimeout(()=>{
this.setState({
emailData: animation2.export()
})
},2100)
}
openDialog() {
this.setState({
isDialog:true
})
}
closeDialog(){
if(!this.state.isDialog) return
let animation3 = wx.createAnimation({});
animation3.translate(1000, 100).step({ duration: 1000 })
this.setState({
dialogData:animation3.export()
})
setTimeout(()=>{
this.setState({
isDialog:false
})
},3000)
}
componentDidMount() {
// Taro.request({
// url: '',
// method: "GET",
// data: {
// locationId: 290
// },
// header: {
// 'content-type': 'application/json'
// }
// })
// .then(res => {
// })
this.getMusicUrl()
this.getList()
}
render() {
return (
<View className='page'>
<View onClick={this.queue.bind(this)} animation={queueData}>
<AtNoticebar marquee>
祝福小朋友,猪年快乐!2019-1-13 于上海 模板最后更新于1-13日晚
</AtNoticebar>
</View>
{
isEmail ?
<Image src={email_icon} class="email_img" onClick={this.openDialog.bind(this)} animation={emailData} />
:
''
}
<View className='page-main'>
{
isPlay ?
<View class="bg_music" tap={this.audioPlay}>
<Image src={music_icon} class="musicImg music_icon" onClick={this.audioPlay.bind(this)} />
<Image src={music_play} class="music_play pauseImg" onClick={this.audioPlay.bind(this)} />
</View>
:
<View class="bg_music" tap={this.audioPlay}>
<Image src={music_icon} class="musicImg" onClick={this.audioPlay.bind(this)} />
<Image src={music_play} class="music_play playImg" onClick={this.audioPlay.bind(this)} />
</View>
}
<Swiper
className='test-h'
indicatorColor='#999'
indicatorActiveColor='#333'
vertical
circular
indicatorDots
autoplay>
{imgList.map((item, index) => (
<SwiperItem key={index}>
<Image className='slide-image' src={item} mode="aspectFill" lazy-load="true" />
</SwiperItem>
))}
</Swiper>
{isDialog ?
<View class="info" onClick={this.closeDialog.bind(this)} animation={dialogData}>
<View class="content" onClick={this.closeDialog.bind(this)}>
<h1>Mr.fei & Miss.禾子</h1>
<p>谨定于 2019年2月2日 (星期六)中午12:00</p>
<p>农历 腊月二十八 中午十二点整</p>
<p>地址:湖北*仙桃</p>
<Image src={we} class="img_footer" />
</View>
</View>
:
''
}
</View >
</View >
)
}
}
云开发相关
- project.config.json文件配置云函数目录cloudfunctionRoot:
"cloudfunctionRoot": "static/functions/"
- 基于小程序文档说明,配置cloud字段实现云开发能力的兼容性:
"cloud": true,
tabBar: {
color: "#e9bd91",
selectedColor: "#ea3c25",
backgroundColor: "#FBFBFB",
borderStyle: "white",
list: [{
pagePath: "pages/index/index",
text: "请柬",
iconPath: "./assets/images/weding.png",
selectedIconPath: "./assets/images/weding_focus.png"
}
- 开通云开发
在开发者工具工具栏调试器、编辑器一行,点击 “云开发” 按钮即可开通云开发
云开发控制台
- 数据库
云开发提供了一个 JSON 数据库
- 存储
云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。
- 云函数
云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
云开发过程
- 初始化
云能力初始化,在小程序端开始使用云能力前,需先调用 wx.cloud.init 方法完成云能力初始化,配置一些云函数参数,本例写在app.js里
- 数据库使用
在开始使用数据库 API 进行增删改查操作之前,需要先获取数据库的引用。以下调用获取默认环境的数据库的引用:
const db = wx.cloud.database()
要操作一个集合,需先获取它的引用:
const todos = db.collection('todos')
注意: 集合要先创建
- 云函数定义
编辑工具里写好云函数执行方法,后续再调用这个方法
const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const MAX_LIMIT = 100 exports.main = async (event, context) => { // 先取出集合记录总数 const countResult = await db.collection('user').count() console.log('countResult', countResult) const total = countResult.total // 计算需分几次取 const batchTimes = Math.ceil(total / 100) // 承载所有读操作的 promise 的数组 const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('user').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() tasks.push(promise) } // 等待所有 return (await Promise.all(tasks)).reduce((acc, cur) => ({ data: acc.data.concat(cur.data), errMsg: acc.errMsg })) }
- 调用云函数
getUserList () { const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { console.log(res) that.setState({ userList:res.result.data.reverse() }) }) }
- 云函数部署
在开发者工具上编辑器里找到该云函数文件夹/static/functions/,单击右键部署,可以不上传依赖包,云端自动下载配置