前段時間把公司小程序項目開發完成了，所以來謝謝自己開發過程中碰到的問題和解決方法，以及用到的提高效率的工具和方法。

1、background圖片url不能為本地圖片

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

2、擴展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)
}

3、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請求了。

4、不同頁面中的數據交互

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

5、picker-view

小程序中picker-view中bindchange方法會在滑動結束后才觸發，如果我隨手一滑，還沒等他停下就就按確定按鈕或者跳轉頁面，那么bindchange沒觸發就不能獲取到滑動后改變的值，體驗很不好。可是我也不能改源碼，于是我去開發者平臺提出了，好在工作人員也馬上說下個版本優化。

6、使用gulp

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

7、生命周期

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

8、客服按鈕

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

總結

整體來說，小程序開發出來后的體驗還是不錯的，而小程序的語法在我有vue的基礎上學起來也比較快，開發中碰到的問題，通過google和其他人開發的經驗也一一解決了。都說寫文章是不僅僅是給別人看的，更是給自己看的，希望大家在看了后有收獲，有什么觀點不同也可以告訴，謝謝。