小程序wepy踩坑记

最近又要做小程序了
同事推荐了一个微信官方的框架wepy

问题1
编译之后发现不能正确运行
把这个去掉就好了（代码压缩也要去掉，这个也会引发一些问题）

图片.png

这样我们就能像开发vue一样开发小程序了
npm run dev运行

得到 / 改变变量的值

//传统模式
self.setData({userInfo: userinfo});

//wepy
var self = this
self.setTimeoutTitle = '到三秒了'
 self.$apply()

调用全局app.wpy 的方法

this.$parent.getUserInfo(function (userInfo) {
  
})

组件通信

// parent.wpy

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

data = {
    parentTitle: 'p-title'
};


// child.wpy

props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: String,
        default: 'nothing',
        twoWay: true
    }
};

onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title

    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}

问题2
启用promise
启用promise后原生的 wx.requst就不能用了。。。
要换成promise的写法

    进入项目根目录，安装polyfill

npm install wepy-async-function --save

    在app.wpy中引入polyfill

import 'wepy-async-function'; 

    在app.wpy中使API promise化

export default class extends wepy.app {

    constructor () {
        super();
        this.use('promisify');
    }

}

问题3
录音后，开发者工具无法播放在本地缓存的声音
但是手机预览的可以的

问题4
wxParse 富文本解析组件无法使用

原因 wxParse.js中的
that.setData(bindData) 无法生效，导致数据无法绑定上去

解决办法
wxParse.js 返回数据，在使用页面中
用 this.xxx = xxx 绑定
再通过 this.$apply() 同步上去

图片.png

结果

图片.png

问题4
音频播放回掉函onTimeUpdate数没作用
解决方法
调用回掉函数 onPlay()和onPause()就好了

innerAudioContext.onTimeUpdate((res) => {
   console.log(12313)
})
innerAudioContext.onPlay((res) => {})
innerAudioContext.onPause((res) => {})

问题5
组件改动后，页面没效果
解决方法
父组件的改动才能让页面重新编译，改动父文件即可

问题6
@tap绑定事件得不到事件源
解决方法
@tap="aaa" 方法后面不要带括号

aaa:function(event){
  console.log(event)
}

问题7
video组件的封面图闪一下就没了
模拟器上的bug
真机上OK

持续更新中。

小程序wepy踩坑记

推荐阅读更多精彩内容