微信小程序開發踩坑與總結

前段時間把公司小程序項目開發完成了，因此來寫寫本身開發過程當中碰到的問題和解決方法，以及用到的提升效率的工具和方法。

一、background圖片url不能爲本地圖片

好比background：URL（../imgs/xxx.png），這樣圖片並不能顯示。
解決的辦法，1：將圖片上傳到服務器，填寫服務器上的圖片的路徑地址。2：將圖片轉爲base64編碼。

二、擴展icon組件

小程序內部爲咱們提供了不少icon供咱們選擇(小程序icon），可是如何要用咱們本身的圖標並且不用image組件來擴展icon組件如何作呢。
首先，我在這裏介紹一個瀏覽器端小程序查看與調試工具(wept),它能啓動個服務，讓咱們在瀏覽器中調試頁面，而且也能在修改文件後實時刷新修改後的頁面。
那爲何須要這麼工具呢，由於在微信開發者工具中查看wxml是看不到詳細的樣式信息，而這個工具在瀏覽器中能夠看到icon組件最終的樣子,而控制圖片樣式的就是圖中的before這個僞元素,並且他的class都是以"wx-icon-"爲前綴。

因此咱們爲咱們能夠這樣自定義icon,而後在wxml中這樣使用<icon type="custom">就能夠了

.wx-icon-custom:before {
    content: '',
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(xxxx)
}

三、request請求

微信小程序中爲咱們封裝了ajax請求，api是wx.request(options)。在我項目中的需求，不少請求用的是post，可是若是你把參數method設置爲post後還須要添加header的"content-type"爲"application/x-www-form-urlencoded"，若是大家每一個request中都要從新寫這個同樣的header就很麻煩。在一個就是統一的錯誤回調，咱們不少請求的錯誤回調中乾的事情基本同樣，因此咱們是否設置個默認的錯誤回調，這樣代碼就簡潔多了。
新建一個ajax.js文件，咱們能夠根據本身需求來配置defaultConfig，而後經過Object.assign來是否覆蓋配置

function ajax(config) {
    var defaultConfig = {
        method: "GET",
        fail: function() {
            console.log('fail')
            wx.hideToast()
            wx.stopPullDownRefresh()
            wx.showModal({
                title: "提示",
                content: "網絡異常",
                showCancel: false,
                confirmText: "肯定",
                confirmColor: "#3CC51F",
            })
        }
    }

    if (config.method == 'POST') {
        defaultConfig.header = {
            'content-type': 'application/x-www-form-urlencoded'
        }
    }

    let _config = Object.assign(defaultConfig, config)
    wx.request(_config)
}

module.exports = ajax

而後在app.js中引用var ajax = require('utils/ajax.js')，掛載到全局的方法中，這樣在每一個頁面經過getApp().ajax(config)就能使用本身封裝後的api請求了。

四、不一樣頁面中的數據交互

咱們常常有這樣的需求，修改A頁面的一個數據須要跳轉到B頁面，在B頁面中修改數據後，而後返回A頁面，A頁面顯示修改後的數據，固然這樣的需求也可能發生在同一頁面的不一樣組件之間。而一般解決這中需求的辦法是使用event-bus這樣的思路，因而我開始google找到這樣的一個小程序庫(weapp-event),詳細的使用你們能夠查看連接。

五、picker-view

小程序中picker-view中bindchange方法會在滑動結束後才觸發，若是我隨手一滑，還沒等他停下就就按肯定按鈕或者跳轉頁面，那麼bindchange沒觸發就不能獲取到滑動後改變的值，體驗很很差。但是我也不能改源碼，因而我去開發者平臺提出了，好在工做人員也立刻說下個版本優化。

六、使用gulp

如今前端工程化爲咱們帶來很大便利，在小程序開發中，雖然使用的wxss文件，可是因本質最後仍是在由瀏覽器渲染的，因此css也會有兼容問題，咱們可使用gulp-autoprefixer來幫咱們解決css的兼容。另外，咱們也能夠將本身的文件在壓縮打包一次，不過遇到的一個問題是壓縮wxml文件，我用gulp-htmlmin不行，由於wxml中像input有些組件是必須閉合的<input />，而htmlmin會把閉合"/"去掉，致使編譯錯誤，我查了htmlmin的api沒找着不讓他去掉的方法，因此你們有更好的方式壓縮wxml也能夠教教我。

七、生命週期

掌握好小程序頁面切換，4種導航切換時生命週期的變化，很重要！

八、客服按鈕

這個客服按鈕<contact-button>很坑爹，不能自定樣式，而且有效的點擊區域也只有它顯示的圖標那麼大，並且圖標也很醜，想到這就異常的無語。不過，咱們想到了一個投機的方式解決了。咱們的需求是點擊這一塊進入客服會話，客服按鈕有個屬性type，咱們設置它爲default-light，它就是白色，能和白色背景融合看不出來，而後再鋪滿n個按鈕，達到點擊進入客服會話。紅色框部分全是客服按鈕！

總結

總體來講，小程序開發出來後的體驗仍是不錯的，而小程序的語法在我有vue的基礎上學起來也比較快，開發中碰到的問題，經過google和其餘人開發的經驗也一一解決了。都說寫文章是不只僅是給別人看的，更是給本身看的，但願你們在看了後有收穫，有什麼觀點不一樣也能夠告訴，謝謝。