小程序坑兩三

  • 如下總結隨時有可能根據小程序版本更新出現變化
  1. 在獲取小程序二維碼時, 返回的是"亂碼", 實際上是==二維碼==的二進制文件流, 須要後端對其進行處理, 存爲圖片後, 將路徑返回給前端便可css

  2. 在==啓用新接口==的時候, 須要將域名添加到 [微信公衆平臺]--[設置]--[開發設置]--[服務器配置], 纔可正常訪問服務器
  3. 小程序中request方法當請求方式爲GET時, 將==參數==寫入data中便可實現url的==自動拼接==, 無須手動進行url拼接
  4. 在小程序中不可引用任何涉及到==window==的第三方js文件, 在小程序中沒有window的概念, 不要嘗試用瀏覽器中操做dom的方法去操做小程序中的元素.
  5. 在小程序的接口請求中不能是用==this==關鍵字, 須要在Page下掛載的一級函數中將this指針轉移到非關鍵字上(另, 在setData成功以後增長了回調函數, 可應用於一些須要參數設置成功以後才能執行的場景), 如:
Page({
    onLoad () {
        const that = this
        request().then(res => {
            that.setData({
                res: res
            }, function () {
                console.log('set data success')
            })
        })
    }
})
  1. 善用==template==模板, 有利於模塊化的實現, 並大大簡化了二次開發的成本, 在使用模板時, 切記須要將wxml, wxss, js分別引入當前頁面的對應的三個文件中前端

  2. wxml與js之間的==數據傳遞==是在wxml標籤上添加 data-some-data=""屬性, 經過事件觸發, 在event中接收event.currentTarget.dataset中以駝峯方式(即: someData)獲取到的
  3. 若須要直接==更改data數據==中某個對象下的屬性的值時, 或者須要更改數組中某個下標處所對應的元素時, 可經過以下方法修改:
Page({
    data: {
        person: {
            name: 'hanmeimei'
        },
        arr: [1, 2, 3]
    },
    onLoad () {
        this.setData({
            'person.name': 'lilei',
            'arr[2]': 1
        })
        console.log(this.data.person) // {name: 'lilei'}
        console.log(this.data.arr) // [1, 2, 1]
    }
})
  1. 在wxml中, 全部有關==js變量或者表達式==的, 所有用{{ }}來標明, 全部不被{{ }}包裹的, 所有被當作字符串解析json

  2. ==綁定事件==無須在事件名後加括號, 傳參數是用data-some-param=""來傳參. 事件的綁定有兩種方式, bindtap or catchtap, 區別在於使用catch綁定事件會阻止事件繼續向上==冒泡==, 而bind不會, 根據具體須要來使用.
  3. 儘可能避免==可滑動組件==的多級嵌套, 如: swiper, scroll-view, canvas, map, 不然你會被事件衝突的處理搞得心煩意亂.
  4. wxss文件==不支持==相似於less, scss等==多層級嵌套==的編寫方式, 最經常使用的標籤選擇方式是使用class來進行選擇, 多是在選擇器的性能上作考慮, 由於一級的class選擇的效率要高得多, 其具體目的還不得而知
  5. 最好是對wx.request()進行一次==封裝==, 將接口請求的經常使用數據(如: open_id, access_token, ...)進行統一添加, 以減小後期的開發成本
  6. 小程序header部分, 以及tabBar部分爲==代碼編輯盲區==, 全部wxml, js可操做區域在header如下, tabBar以上, 這部分區域只可根據.json文件進行有限的修改
  7. 小程序中不可以使用==背景圖片==, 全部涉及到圖案的都須在image標籤中添加
  8. 小程序頁面之間==數據傳遞==的方式可分爲兩種, 一種是經過app下的globalData(其實這種方式更嚴格的說應該是數據共享), 另一種是經過跳轉的時候的url參數拼接, 在onLoad時將參數接到來實現數據傳遞. 這裏要注意一下第二種方式, 在拼接參數時需注意, 參數中不可出現 = & ? # 等會影響到url參數解析的字符, 不然會被過濾, 如有此類參數, 則需在拼接前將含有特殊字符的參數使用encodeURIComponent()進行轉碼, 在接收到參數以後再使用decodeURIComponent()進行解碼, 方可實現含特殊字符的數據傳輸
  9. 小程序的框架及組件已實現了必定程度的==半集成化==, 如onPullDownRefresh事件, 可實現下拉刷新的功能; onReachBottom事件, 可實現分頁加載的功能; onPageScroll事件, 可監聽頁面滾動, 也許能夠經過此事件實現圖片的懶加載, 還未證明
  10. 微信開發者工具備一個特異功能, 就是哪裏出錯它都不會報, 也不會告知緣由, 你只會發現你的代碼執行不下去了, 這時候最好的辦法就是打斷點, 一點一點向下推移, 而後總有一部分代碼是該執行可是沒有執行到, 而後就會發現一部分代碼會有很是明顯的語法或者常見報錯形式, 可是微信很任性, 它看出來了, 但就是不告訴你.canvas

  11. 移動應用支持小程序類型分享小程序

    移動應用分享功能支持小程序類型分享,要求發起分享的App與小程序屬於同一微信開放平臺賬號。支持分享小程序類型消息至好友會話,不支持「分享至朋圈」及「收藏」。微信客戶端版本要求:6.5.6及以上微信客戶端版本。爲兼容舊版本客戶端,若客戶端版本低於6.5.6,小程序類型分享將自動轉成網頁類型分享。後端

相關文章
相關標籤/搜索