小程序小知識點
在做小程序的時候,有時候會因為文檔看的不仔細,或者其他原因,總會有一些小錯誤,因此記錄下來。
1.關於FORM表單
<form bindsubmit="formSubmit">
<button formType="submit">提交</button>
</form>
表單一定要設置一個綁定函數,即 bindsubmit的屬性值 formSubmit
另外一定要設置一個button,並且屬性key=”value”是固定的 formType="submit"
js端
formSubmit: function(e){
console.log(e);
}
下圖事件的細節獲取name值寫錯了,
應該是 e.detail.value.mobile
e為建立這個提交函數的時候傳入的對象,可以為任意字母,一般為e或者event
可以用
e.detail.value.XXX.length 來獲取當前輸入框的長度
使用e.detail.value就可以把e.detail.value.XXX 系列所有的值獲取到
currentTarget和target類似於當前結點和祖先結點的關系
表單POST和GET提交是有區別的 分別要設置method,並且字符串為大寫
另外不同方式執行的header頭也不一樣
method: "POST",
header: { "Content-Type": "application/x-www-form-urlencoded"},
method: 'GET',
header: {'Accept': 'application/json'},
data:{},是需要請求時候發送到服務器端的json數據
wx.request提交的url 要是https,他的success和fail回調函數不是操作成功的回調函數,而是三次握手返回的success或者fail.
服務器端返回的數據要是JSON形式
success: function(res) {} 返回值以形參是形式存在,類似於ajax成功的返回值
一般在調用函數以后,都使用var that = this;因為如果有時候如果調用多個函數this會指向錯亂。好像JQUERY源碼里有這樣的用法。
2.提示
wx.showToast 類似於alert
wx.hideToast 隱藏彈出框 不知道有什么用。。
wx.showModel 類似於confirm 根據操作返回true或者false
wx.showModal({
title: '提示',
content: '這是一個模態彈窗',
success: function(res) {
if (res.confirm) { //點擊確定以后執行的操作
console.log('用戶點擊確定')
}else{ //點擊取消執行的操作
}
}
})
wx.showActionSheet(){}彈出一個類似於select option框一樣的列表,最多6個返回索引 0開始
個人覺得這些提示框經常結合setTimeout函數執行,而不是本身的success:function,如果根據官方提供的調用成功以后執行的方法,提示框會在調用的一瞬間就執行成功或者失敗函數,根本來不及看清提示
setTimeout(function(){
//action 在提示框結束以后,執行你想執行的動作
},1000)
3.跳轉
wx.navigateTo,是保留當前頁面,調到應用內某個頁面,使用wx.navigateBack可以返回
類似於在當前頁面上加一層float層,遮住當前頁面
而wx.redirectTo是關閉當前頁面,調到應用內某個頁面 不可以返回
上面兩者可以帶參數
應用的頁面就是app.json里注冊過的頁面,否則報錯navigateTo:fail url not in app.json
並且上面兩個跳轉函數都是不可以調到tabBar頁面的,tabBar是在app.json里 tabBar的list里的列表頁
wx.switchTab 調到tabBar頁面,並且關掉所有其他非tabBar頁面,不能攜帶參數
wx.navigateBack 返回上X層頁面,默認是1
4.關於傳遞參數
靜態數據:
在頁面初始化的時候,data這個json數據,是頁面靜態數據,可以在模板中直接引用,
Page({
data:{
test:'hello world',
arrayInfo:[{
info1:'first',
info2:'second',
}]
}
})
在模板頁中,通過{{test}}和{{arrayInfo.info1}}、{{arrayInfo.info2}}可以引入數據
動態數據:
可以通過事件的觸發,動態設置數據
this.setData(){
"information":"dynamic data",
}
可以通過wx:for循環輸出數據,類似於foreach,它綁定一個數組,默認當前下標變量名為index,數組當前項的默認名為item
可以使用 wx:for-item 和wx:for-index指定變量名
現在如果單獨使用wx:for會有一個warning級錯誤,可以和wx:key消滅錯誤提示
wx:for="{{userListInfo}}" wx:key="item"
5.事件
在模板頁中,事件綁定有balabala一堆,但是我目前只有bindtap,類似於click
比如
<view class="consignee-action" data-deleteid="{{item.id}}" bindtap="deleteClick">刪除</view>
這里這個view綁定的就是deleteClick這個事件,點擊的時候會在JS中找到同名函數進行事件處理。
data-deleteid是一個dataset的屬性,JS可以通過這個查找到data-*對應的值。進行與服務器端的交互.以data-開頭,多個單詞用-鏈接,不能有大寫.
通過傳入的event,可以通過event.currentTarget.dataset.XXX來獲取在模板頁設置的時候這個data-XXX的值
6.全局變量
在app.js中定義的數據或者函數都是全局的,但是函數是沒有必要放在全局里
//app.js
App({
globalData:{
userInfo:null,
servsers:'https://shop.com'
}
})
在頁面中getApp().globalData.servsers就可以獲取到設置的全局變量的值
7.函數的復用
test.js
test: function(){
}
module.exports={
test:test
}
other.js
var common = require('test.js');
page({
common.test()
})
這里是網上找的代碼,如果是我們的項目 都是index.js 咋子搞?待定