小程序开发框架wepy-原创手记-慕课网

小程序目前主流的开发框架有mpvue 和wepy 两种，由于wepy是腾讯自己开发的框架，所以先来简单了解一下wepy。
wepy的作用主要是提高开发者的开发效率，采用了类似使用了vue的代码书写风格，结合使用webwack提供的多种插件，开发者可以熟练的上手小程序开发，但再开发过程中还有有很多与vue的不同需要注意。
（如果对VUE还不熟悉的同学，可以先一下vue的使用方法链接如下）
https://www.jianshu.com/writer#/notebooks/13518445/notes/17261801

1.methodes方法调用（vue中的methods中书写的方法直接用this可以调用，再wepy中this调用的方法需要写在和methodes同级的位置上）

   methods = {
    bindtap () {        let rst = this.commonFunc();        // doSomething
    },

    bindinput () {        let rst = this.commonFunc();        // doSomething
    },
  }//正确：普通自定义方法在methods对象外声明，与methods平级customFunction () {    return 'sth.';
}

2.组件模版的创建（vue中组件的创建方法与页面的创建方法相同，wepy中组件的创建一定要用wepy.component 来创建）

      //wepy页面穿件方法 
      export default class Index extends wepy.page {}      //wepy组件创建方法
      export default class yearProgress extends wepy.component {}

3.事件处理函数对象events 这个在vue中没有遇到过，他的主要作用是传递的事件的函数，在父组件调用子组件的方法，和子组件调用父组件的方法中比较常见。

        this.$emit('some-event', 1, 2, 3, 4);        // events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
        events = {            'some-event': (p1, p2, p3, $event) => {           console.log(`${this.$name} receive ${$event.name} from${$event.source.$name}`);
            }
        };

4.config页面配置对象，对应于原生的page.json文件，类似于app.wpy中的config。

//用于设置小程序最上方的标题文字config = {
        navigationBarTitleText: '我的楼码',
}

5.wepy中ajax请求的全局拦截器

        this.intercept('request', {        // 发出请求时的回调函数
        config (p) {            // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
            p.timestamp = +new Date();            console.log('config request: ', p);            // 必须返回OBJECT参数对象，否则无法发送请求到服务端
            return p;
        },        // 请求成功后的回调函数
        success (p) {            // 可以在这里对收到的响应数据对象进行加工处理
            console.log('request success: ', p);            // 必须返回响应数据对象，否则后续无法对响应数据进行处理
            return p;
        },        //请求失败后的回调函数
        fail (p) {            console.log('request fail: ', p);            // 必须返回响应数据对象，否则后续无法对响应数据进行处理
            return p;
        },        // 请求完成时的回调函数(请求成功或失败都会被执行)
        complete (p) {            console.log('request complete: ', p);
        }
    });

6.页面跳转这个要注意一下，在小程序中页面跳转如果是tab中的页面就要用不同的页面跳转方法

        //一般的页面跳转方法
            wx.navigateTo({
                url: url
            })      //遇到 tab 里面的转转的时候用这种方式跳转
            wx.switchTab({
              url: url
           })

7.数据的同步，通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

         <child :title="parentTitle" :syncTitle.sync="parentTitle" 
          :twoWayTitle="parentTitle"></child>

          data = {              parentTitle: 'p-title'
          };          //child.wpy
        // 数据的双向绑定
        twoWayTitle: {            type: String,            default: 'nothing',            twoWay: true
       }

作者：王炳祺
链接：https://www.jianshu.com/p/6e6ad95ff28c