微信小程序之初探（常见语法 VS vue）常见问题（点击不生效，数据绑定）

最近在调研微信小程序开发，对于一个前端小白来讲，在各类框架都还用不熟的状况下，再来开发小程序确实仍是不容易。

小程序出来之初，听过演讲，看过一点点儿视频，感受和angular语法有点类似（PS：那是也是只了解一点点儿angular语法）；

近两天开始尝试开发小程序，讲真，语法和angular和vue都很类似，小程序提供的语法如今还算全面，不少方法都有提供；

下面简述一下经常使用方法的使用：

 一：数据绑定；

　　html

　　

     js 直接把数据写在data里面就好了，这样数据能够直接渲染到页面上，

那么问题来了，一般咱们会数据都是动态加载的，在vue语法中，能够直接改变数据驱动页面数据改变，可是在小程序里面不能立刻改变，

必需要使用

this.setData({

　msg : "我改变了"　

})；

这样当数据改变是，页面上的数据才会相应跟着改变。

二：获取数据；

　　使用Vue 或者angular 时，我想要获取msg的值 ，直接 this.msg 就ok了，而小程序是这样的 this.data.msg ；

三 ： 事件绑定：

　　这里就列举经常使用的时间绑定，用vue时，直接使用@click=“functionName” ，小程序 bindtap="functionName" ；

　   另外常见的还有input框的时间监听， <input  bindinput="queryMsg" value="{{msg}}"/>  bindinput=“functionName”；

　　input框发生改变时想干吗就干吗，input框的value值要用  e.detail.value 来获取；

四 ： ajax请求VS小程序的wx.request({})  详细用法能够上官网文档查看；

五 ： 跳转window.location.href   VS  小程序跳转 wx.navigateTo({url : "../query-detail/query-detail"})  ！！！！注意，在小程序方法中不能跳转外链，只能在应用内部跳转；  跳转有五个方法

一、 wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack能够返回到原页面。

二、wx.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。

三、wx.switchTab(OBJECT)   跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面

四、wx.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可经过 getCurrentPages()) 获取当前的页面栈，决定须要返回几层。

五、wx.reLaunch(OBJECT)   

  详细使用方法跳转到  官网 https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject

 六 ： 点击事件无效，页面数据渲染正常；

按钮没法点击 Do not have xx handler in current page

页面能正常显示，不过按钮事件不能触发  提示没法在当场页面找到触发事件

Do not have XX handler in current page: RR. Please make sure that XX handler has been defined in RR, or RR has been added into app.json

仔细检查，路径添加了，事件也添加了，依然错误，没法找到错误缘由，最后尝试替换路径顺序，页面点击事件正常

以上方法 来自  http://www.jianshu.com/p/75a1c6a8a316

修改了app.json中路径顺序后仍是不行；

个人解决方法是： 在html中写了点击事件的方法  好比

而后再 js中也写了注册了query这个函数，可是，仍是报错，多是由于修改了html中的query，而后我看js中也有query函数，同样的就没有管，结果仍是没法点击，最后，我把html中的query负责一遍，再到js中把就是中的query覆盖一次，这样就能够了。很神奇，我也不知道是偶然还咋回事了。