wepy框架-页面.wpy文件中script标签的组成结构

页面文件page.wpy中所声明的页面实例继承自wepy.page类,该类的主要属性介绍如下:

属性 说明
config 页面配置对象,对应于原生的page.json文件, 类似于app.wpy中的config
components 页面组件列表对象,声明页面所引入的组件列表
data 页面渲染数据对象,存放可用于页面模板绑定的渲染数据
methods wxml事件处理函数对象,存放响应wxml中所捕获到的事件的函数,如bindtap、 bindchange
events WePY组件事件处理函数对象,存放响应组件之间通过$broadcast、$emit、 $invoke所传递的事件的函数
其它 小程序页面生命周期函数,如onLoad、 onReady,computed等,以及其它自定义的方法与属性

 script标签代码如下:

<script>
  import wepy from '@wepy/core'
  import eventHub from '../common/eventHub';
  import { mapState } from '@wepy/x';
  import store from '../store';
  import testMixin from '../mixins/test'

  wepy.page({
    store,
    config: {
      navigationBarTitleText: 'test'
    },

    hooks: {
      // Page 级别 hook, 只对当前 Page 的 setData 生效。
      'before-setData': function (dirty) {
        if (Math.random() < 0.2) {
          console.log('setData canceled');
          return false; // Cancel setData
        }
        dirty.time = +new Date();
        return dirty;
      }
    },

 

    mixins: [testMixin],

    data: {
      inputmodel: 'v-model',
      mynum: 20,
      userInfo: {
        nickName: '加载中...'
      },
      currentTime: +new Date(),
      setTimeoutTitle: '标题三秒后会被修改',
      count: 0,
      netrst: '',
      groupList: [
        {
          id: 1,
          name: '点击改变',
          list: [
            {
              childid: '1.1',
              childname: '子项,点我改变'
            }, {
              childid: '1.2',
              childname: '子项,点我改变'
            }, {
              childid: '1.3',
              childname: '子项,点我改变'
            }
          ]
        },
        {
          id: 2,
          name: '点击改变',
          list: [
            {
              childid: '2.1',
              childname: '子项,点我改变'
            }, {
              childid: '2.2',
              childname: '子项,点我改变'
            }, {
              childid: '2.3',
              childname: '子项,点我改变'
            }
          ]
        },
        {
          id: 3,
          name: '点击改变',
          list: [
            {
              childid: '3.1',
              childname: '子项,点我改变'
            }
          ]
        }
      ]
    },

    computed: {
      ...mapState([ 'counter' ]),
      testcomputed () {
        return 'computed - ' + this.mynum;
      }
    },

    methods: {
      handleViewTap () {
        console.log('handleVieTap clicked');
      },
      tap () {
        throw 'can not go here';
      },
      plus () {
        this.mynum++
      },
      toast () {
        let promise = this.$invoke('toast', 'show', {
          title: '自定义标题',
          img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png'
        })

        promise.then((d) => {
          console.log('toast done')
        });
      },
      mixintap () {
        console.log('do noting from ' + this.$is);
      },
      communicate () {
        let counters = this.$children.filter((com) => com.$is === 'components/counter');

        // Get children counter
        counters[0].num++;
        counters[1].num--;

        eventHub.$emit('app-launch', {a: 1}, {b: 2});
      },
      request () {
        let self = this
        let i = 10
        let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ==']
        while (i--) {
          wx.request({
            url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i,
            success: function (d) {
              if (d.statusCode !== 200) {
                self.netrst += d.statusCode + '.';
              } else {
                self.netrst += d.data + '.';
              }
            }
          })
        }
      },
      counterEmit (num) {
        console.log(`${this.$is} receive event, the number is: ${num}`);
      }
    },

    created () {
      let self = this
      self.currentTime = +new Date(); 

      self.setTimeoutTitle = '标题三秒后会被修改';
      setTimeout(() => {
        self.setTimeoutTitle = '到三秒了';
      }, 3000);

      wx.getUserInfo({
        success (res) {
          self.userInfo = res.userInfo;
        }
      });
    }
  });
</script>