xcmy / wepydemo

WePY项目试水

WePY项目

官方文档 github地址

按照👆指导步骤初始化项目

在pages创建自己的主页home.wpy

<style lang="less">

</style>
<template>
  <view class="container" >

    <text class="info">{{step.count}}</text>
    <text class="info">今天为本群点击的次数</text>
    <!--<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{step.img}}"></image>-->

    <button @tap="tap" size="default" type="primary">点击木鱼</button>

  </view>

</template>

<script>
  import wepy from 'wepy'
  import howler from 'howler'
  export default class Home extends wepy.page {

    data = {
        step:{
          count:0,
          img:"../image/1.jpg"

  }
    }
    methods = {
      tap(){
        this.step.count++
        this.play()
      },
      play(){
        console.log("播放")
        // var sound = new Howl({
        //   src: ['sound.webm', '../audio/chengdou.mp3']
        // });
        // sound.play()
      }
    }

  }
</script>

修改app.wpy中入口文件为home.wpy，打开小程序可以看到变化

wpy文件格式

*.wpy中的<script>部分

import wepy from 'wepy';

//通过继承自wepy.page的类创建页面逻辑
export default class Index extends wepy.page {
    //可用于页面模板绑定的数据
    data = {
        motto: 'Hello World',
    };

    //事件处理函数(集中保存在methods对象中)
    methods = {
    };

    //页面的生命周期函数
    onLoad() {
    };
}

*.wpy中的<style>部分

<style lang="less">

//遵循css样式
</style>

*.wpy中的<template>部分

<template>
//使用小程序的组件
  <view>
  </view>

</template>