小程序踩坑第二談

小程序學習總結
複製代碼

首先貼上官方文檔的連接地址

1. 觸發 upper 和 lower 事件的條件。如何在 scroll-view 中觸發該條件

首先 upper 事件和 lower 事件是在 scroll-view 中使用，能夠用在上拉自動加載和下拉刷新；或者單獨的下拉刷新也能夠，即 onPullDownRefresh，不過須要在全局變量中開啓才行。

*在滾動 scroll-view 時會阻止頁面回彈，因此在 scroll-view 中滾動，是沒法觸發 onPullDownRefresh

注意 scroll-view 和 onPullDownRefresh 是不可以同時使用的，這個在開發文檔中也有提示。

雖然都有文檔但仍是須要咱們本身去踩坑才能更好的學習瞭解，下面是 demo

<scroll-view 
    upper-threshold="150" 
    lower-threshold="125"
    scroll-y="true" 
    bindscrolltoupper='upper'
    scroll-into-view="{{toView}}" 
    scroll-top="{{scrollTop}}"
    bindscrolltolower='lower' class='home-bg'>
    
</scroll-view>
複製代碼

upper-threshold 是表示距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件；

lower-threshold 是表示距底部/右邊多遠時（單位px），觸發 scrolltolower 事件，定義好以後在 .js 文件中定義函數便可。

upper: function() {
    wx.showNavigationBarLoading()
    console.log('upper')
    wx.showLoading({
      title: '正在刷新',
    })
    this.queryTaskAll()
    setTimeout(function(){
      wx.hideLoading()
    }, 1200)
  },

  lower: function() {
    wx.showNavigationBarLoading()
    console.log('lower')
    wx.showLoading({
      title: '正在加載',
    })
    
    setTimeout(function() {
      wx.hideLoading()
    }, 1200)
  }
複製代碼

2 . 跳轉帶有底部菜單的時候使用什麼方法

在小程序中一共有 5 種。下面我來作一下代碼的搬運工

wx.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack能夠返回到原頁面。

wx.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

wx.reLaunch(OBJECT)

基礎庫 1.1.0 開始支持，低版本需作兼容處理

關閉全部頁面，打開到應用內的某個頁面。

wx.switchTab(OBJECT)

跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面

wx.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層。

尤爲注意的是：

1. tip: wx.navigateTo 和 wx.redirectTo 不容許跳轉到 tabbar 頁面，只能用 wx.switchTab 跳轉到 tabbar 頁面

根據 tip 咱們能知道只有經過 wx.switchTab 纔可以跳轉到 tabber 的界面，其餘的都不行，尤爲須要注意的是小程序的週期問題，onLoad, onShow . . . , 由於踩過坑，因此我會在最後把圖列舉出來。

3 . input 和 textArea 如何禁用獲取焦點

說實話這個部分其實不難，直接看文檔就能夠解決，可是我第一次使用的時候不知道出現了什麼毛病，老是不行，對於此我也很無奈，不事後來我本身迭代的時候刪除了部分無用代碼，把代碼重新過了一遍，而後就成功了，什麼毛病都沒有。。。鑑於仍是出了錯，因此我在這作了記錄。

<view class='editContent'>
        <textarea 
          value='{{item_content}}' 
          readonly="{{content_readonly}}" 
          class='create-content-input'                                    placeholder-class='content-holder' 
          placeholder="{{pleast_input_content}}" 
          bindinput="inputContent" 
          type='text' 
          disabled='{{textArea_disabled}}'
          focus='{{can_edit_content}}' 
          maxlength='-1'></textarea>
      </view>
複製代碼

第二個佈局代碼

<view class='editContent-title'>
        <input 
          value='{{item_title}}' 
          readonly="{{title_readonly}}" 
          class='create-title' 
          disabled='{{input_disabled}}'
          bindinput="inputTitle" type='text' 
          maxlength='15'></input>
      </view>
複製代碼

detail.js 種的相關代碼

data: {
    . . .
        
    input_disabled: true,
    textArea_disabled: true,
   
    . . .

  },
複製代碼

js 種的代碼我只保留了相關部分，能夠看到其實只要設置一個 disable 爲 true 便可禁用。

4 . 如何重寫 toolBar

寫過 Android 的朋友們應該都知道在 Android 開發中常常會出現自定義 View 的狀況，包括自定義佈局部分，在小程序中也同樣，若是我不喜歡默認的 toolbar 該怎麼辦呢，別急：

"window": {
    "backgroundTextStyle": "light",
    "navigationStyle": "custom",
    "navigationBarBackgroundColor": "#F8D300",
    "navigationBarTitleText": "碼個蛋",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#F8D300",
    "enablePullDownRefresh": true
  },
複製代碼

在 app.json 中的 window 中設置 navigationStyle 爲 custome 便可。自定義，能夠在 app.wxss 中設置自定義標題的樣式，而後把 toolbar 模板化，以後在各處引用便可。這裏就很少作闡述。

navigationStyle String default 導航欄樣式，僅支持如下值： default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕

這裏是官網文檔的解釋。右上角的膠囊按鈕是不管如何沒法去掉的，這一點須要注意。

5 . 當 margin 和 padding 不起做用的時候應該怎麼辦

在寫代碼的時候我遇到過不少次，就是設置了 margin 和 padding 的值可是界面顯示沒有一點點的變化，即便設置了很大也不行。相信你們或多或少都會有這種經歷，那當咱們遇到這種狀況的時候應該如何思考呢。

答案：其實不用思考，我由於很長時間沒有寫過正統的 html 和 css 的代碼了，因此有關的實現我確實記不清了。可是在小程序中，百分之九十的這種問題均可以經過包裹一個 view 來實現。由於在 Android 中的代碼寫多了，因此養成了距離什麼直接設置的習慣。可是在小程序中必定要記得 view ， view ， view。增長個 view 萬事大吉。

6 . 設置獲取你點擊第幾個對象的時候如何進行設置判斷

咱們在 Android 中的列表能夠經過 position 來肯定，若是使用框架的話也能夠直接獲得。那麼在小程序的列表呢？一樣能夠經過代碼來獲得。稍等：

//單擊事件的響應  刪除須要刪除服務器上的數據
  shortTap: function(e) {
    let that = this;
    let index = parseInt(e.currentTarget.dataset.index);
    //觸摸時間距離頁面打開的毫秒數
    let touchTime = that.data.touch_end - that.data.touch_start;
    console.log('當前點擊位置爲' + index)

    console.log(touchTime);
    let list = that.data.getData

  },
複製代碼

這裏獲得具體點擊事件的關鍵就是 e.currentTarget.dataset.index 這句話。不過當列表點擊某一個對象出現動畫而不是跳轉的時候會有坑。不能經過此方法，這裏只適合用來點擊跳轉而不適合點擊動畫。須要 css 動畫的知識來配合才行。這些你們遇到的時候天然能夠看到。

7 . 顯示隱藏時的坑（只能做用於 view) 咱們在使用的時候常常會須要顯示隱藏來使用。不過這裏有個坑，就是當須要來回顯示的時候會出現問題。

首先我把方式寫出來，其次我會把我遇到的一些錯誤來講出來。

<view class='save-style {{showOrHidden? "show":"hide"}}'>
           <block class='edit'>
               <image 
                bindtap='image_can_edit' 
                class='dialy-change' 
                src='{{detail_change}}'></image>
               <image 
                bindtap='image_can_delete' 
                class='dialy-delete' 
                src='{{detail_delete}}'></image>
           </block>

          
        </view>

          <view class='{{TshowOrHidden? "show":"hide"}}'>
              <view 
                class='save-style-two' 
                bindtap='save_dayBook'>
                <text class='tv-save-style'>{{tv_save}}</text>
              </view>
           </view>

      </view>
複製代碼

樣式

.hide {
  display: none;
}
 
.show {
  display: block;
}
複製代碼

首先注意不能把這兩個樣式放在全局變量，只有放在頁面的 wxss 下才會有效果。親測效果會失效，，，但願懂緣由的大佬能夠解釋一下。

還有一樣的實現，不過是在代碼中用法不同

<view> 
 <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button> 
</view> 
<view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> 
 <canvas canvas-id="pieCanvas1" style="width:400px;height:280px;"></canvas> 
</view> 
複製代碼

js 中的代碼

Page({ 
 data: { 
  showView: true
 }, 
 onLoad: function (options) { 
  // 生命週期函數--監聽頁面加載 
  showView: (options.showView == "true" ? true : false) 
 } 
 , onChangeShowState: function () { 
  var that = this; 
  that.setData({ 
   showView: (!that.data.showView) 
  }) 
 }, 
}) 
複製代碼

樣式中的代碼同上

8 . 微信小程序開發中新出了尺寸單位rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx，如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

這個實際上是比較常識的問題，由於我跟着宇哥學小程序的時候沒有實際按照設計圖來，設計圖給的是 px ，但爲了適配考慮仍是使用 rpx ，不過一開始我印象不夠深入。因此忘了。固然也有可能根據不一樣的手機來適配。

9 . 從 splash 頁面跳轉到帶有底部菜單欄的界面的時候應該使用什麼函數

底部菜單欄的有關跳轉在上面已經有所介紹。只有一個方法。能夠自行查看。

10 . 定義 util 文件函數的時候如何對外暴露接口部分

咱們在寫代碼的時候常常會出現須要工具類的狀況，那咱們寫工具類的時候如何對外暴露方法呢？

module.exports = {
  postReq: postReq,
}
複製代碼

另外一個

module.exports = {
  formatTime: formatTime,
  Time: Time,
  onDate: onDate
}
複製代碼

注意這裏的名字，第一個部分的名字是對外暴露的名字（第一個名字是什麼那麼在外部調用的時候就用什麼名字），後一個名字是定義在 util.js 中的具體函數的名字。

// 時間和日期的綜合信息顯示
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour,  minute, second].map(formatNumber).join(':')
}
複製代碼

11 . 定義函數時寫法的分別含義，（是否爲函數的參數部分）

const req = (action, data, header, method, success, err) => {

  wx.request({
    url: baseUrl + action,
    data: data,
    method: method,
    header: header,
    dataType: "json",
    success: function (res) {
      success(res)
    }
  })
}

const postReq = (action, data, success) => {
  var header = {
    'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
  let cookie = wx.getStorageSync("cookieKey");
  if (cookie != null && cookie != undefined) {
    header.Cookie = cookie
  }
  req(action, data, header, 'POST', success)
}
複製代碼

注意 = 後面的部分，有幾個數就說明有幾個參數，=> 表明具體的實現：{ } 這裏的寫法參考 kotlin 理解。

小程序的周期函數相關

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
    // Do something when show.
  },
  onHide: function() {
    // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
複製代碼