微信小程序之初探(常見語法 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"})  !!!!注意,在小程序方法中不能跳轉外鏈,只能在應用內部跳轉;  跳轉有五個方法

1、 wx.navigateTo(OBJECT) 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。

2、wx.redirectTo(OBJECT)關閉當前頁面,跳轉到應用內的某個頁面。

3、wx.switchTab(OBJECT)   跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面

4、wx.navigateBack(OBJECT) 關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧,決定需要返回幾層。

5、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覆蓋一次,這樣就可以了。很神奇,我也不知道是偶然還咋回事了。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com