首页-请柬

首页主要有一个邀请函动画、轮播图及音乐播放

音乐播放调用微信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/,单击右键部署,可以不上传依赖包,云端自动下载配置

上次更新: 1/22/2019, 3:38:00 PM