1. 程式人生 > >小程式技巧合集(持續學習更新中……)

小程式技巧合集(持續學習更新中……)

- 如何去掉button的邊框?

使用偽類

/*——————————html——————————*/

<button>點選</button>
/*——————————css——————————*/

button:after {
  border: none;
}

- 如何雙向資料繫結?

小程式的資料響應使用setData,類似react的setState的寫法,分別繫結。與vue的v-model繫結不同了

<input class="weui-input"
        type='number'
       maxlength="11" placeholder="請輸入手機號碼"
value='{{guiderTel}}' bindinput="bindPhoneInput"/>
/*——————————js——————————*/

Page({

    data: {
        tel:""
    },
    bindPhoneInput: function (e) {
      this.setData({
        tel: e.detail.value
      })
    },
})
方法 描述
navigateTo 保留當前頁面,跳轉到應用內的某個頁面(注意:目前頁面路徑最多隻能十層。)
redirectTo 關閉當前頁面,跳轉到應用內的某個頁面
reLaunch 關閉所有頁面,開啟到應用內的某個頁面
switchTab 跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面(跳轉的 tabBar 頁面的路徑,不能帶引數)
navigateBack 關閉當前頁面,返回上一頁面或多級頁面,通過delta設定返回的頁面數(如果 delta 大於現有頁面數,則返回到首頁)
navigator 上面都為js中設定,navigator是微信提供的元件
wx.navigateTo({
  url: 'test?id=1'
})

wx.redirectTo({
  url: 'test?id=1'
})

wx.reLaunch({
  url: 'test?id=1'
})

wx.switchTab({
  url: '/test'
})

wx.navigateBack({
  delta: 2
})
<view class="btn-area">
  <navigator url="/page/test?id=1">對應 wx.navigateTo</navigator>
  <navigator url="/page/test?id=1" open-type="redirect">對應 wx.redirectTo</navigator>
  <navigator url="/page/test?id=1" open-type="reLaunch">對應 wx.reLaunch</navigator>
  <navigator url="/page/test" open-type="switchTab" >對應 wx.switchTab</navigator>
</view>

tip: wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面,只能用 wx.switchTab 跳轉到 tabbar 頁面

-獲取跳轉引數

Page({
  onLoad: function(option){
    console.log(option.id)
  }
})

- 跳轉小程式?
①、navigator:基礎庫 2.0.7 開始支援

//  envVersion:develop(開發版),trial(體驗版),release(正式版)
<navigator  
    target="miniProgram" 
    open-type="navigate" 
    app-id="XXXXXXXX" 
    path="pages/invite/invite?id={{id}}"
    extra-data="" 
    version="release" 
    hover-class="none">
    跳轉小程式
</navigator> 

②、wx.navigateToMiniProgram:基礎庫 1.3.0 開始支援,此介面即將廢棄

openChat: function () {
    wx.navigateToMiniProgram({
      appId: 'XXXXXXXX',
      path: 'pages/invite/invite?id=' + id,
      extraData: '',
      envVersion: 'release',
      success(res) {
      }
    })
  }

-下拉重新整理

①、當前json檔案

{
  "enablePullDownRefresh": true,
}

②、當前js檔案

  onPullDownRefresh: function () {
    that.XXX();
  },

-下拉重新整理ios出現一塊空白

1、外層div

position: fixed;
height: 100%;

2、在 onPullDownRefresh 事件里加setTimeout事件延遲下下拉重新整理的事件。

setTimeout(function () {<br>   // 這裡寫重新整理要呼叫的函式,比如:
    _This.pullRefresh();
  }, 500);

3、app.json

"disableScroll": true