小程序雜亂知識點


小程序小知識點

在做小程序的時候,有時候會因為文檔看的不仔細,或者其他原因,總會有一些小錯誤,因此記錄下來。

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  系列所有的值獲取到

 

currentTargettarget類似於當前結點和祖先結點的關系

 

表單POSTGET提交是有區別的  分別要設置method,並且字符串為大寫

另外不同方式執行的header頭也不一樣

method: "POST",

header: { "Content-Type": "application/x-www-form-urlencoded"},

 

method: 'GET',

header: {'Accept': 'application/json'},

 

data:{},是需要請求時候發送到服務器端的json數據

wx.request提交的url 要是https,他的successfail回調函數不是操作成功的回調函數,而是三次握手返回的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 咋子搞?待定

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM