最近在調研微信小程序開發,對於一個前端小白來說,在各種框架都還用不熟的情況下,再來開發小程序確實還是不容易。
小程序出來之初,聽過演講,看過一點點兒視頻,感覺和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覆蓋一次,這樣就可以了。很神奇,我也不知道是偶然還咋回事了。