1. 程式人生 > >微信小程序之初探(常見語法 VS vue)常見問題(點擊不生效,數據綁定)

微信小程序之初探(常見語法 VS vue)常見問題(點擊不生效,數據綁定)

數據驅動 一點 驅動 win -1 沒有 html cat been

最近在調研微信小程序開發,對於一個前端小白來說,在各種框架都還用不熟的情況下,再來開發小程序確實還是不容易。

小程序出來之初,聽過演講,看過一點點兒視頻,感覺和angular語法有點相似(PS:那是也是只了解一點點兒angular語法);

近兩天開始嘗試開發小程序,講真,語法和angular和vue都很相似,小程序提供的語法現在還算全面,很多方法都有提供;

下面簡述一下常用方法的使用:

一:數據綁定;

  html

  技術分享

js 技術分享直接把數據寫在data裏面就行了,這樣數據可以直接渲染到頁面上,

那麽問題來了,通常我們會數據都是動態加載的,在vue語法中,可以直接改變數據驅動頁面數據改變,但是在小程序裏面不能馬上改變,

必須要使用

this.setData({

 msg : "我改變了" 

});

這樣當數據改變是,頁面上的數據才會相應跟著改變。

二:獲取數據;

  使用Vue 或者angular 時,我想要獲取msg的值 ,直接 this.msg 就ok了,而小程序是這樣的 this.data.msg ;

三 : 事件綁定:

  這裏就列舉常用的時間綁定,用vue時,[email protected]=“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覆蓋一次,這樣就可以了。很神奇,我也不知道是偶然還咋回事了。

微信小程序之初探(常見語法 VS vue)常見問題(點擊不生效,數據綁定)