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

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

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

2、擴(kuò)展icon組件

小程序內(nèi)部為我們提供了很多icon供我們選擇(小程序icon），但是如何要用我們自己的圖標(biāo)而且不用image組件來擴(kuò)展icon組件如何做呢。
首先，我在這里介紹一個(gè)瀏覽器端小程序查看與調(diào)試工具(wept),它能啟動(dòng)個(gè)服務(wù)，讓我們?cè)跒g覽器中調(diào)試頁面，并且也能在修改文件后實(shí)時(shí)刷新修改后的頁面。
那為什么需要這么工具呢，因?yàn)樵谖⑿砰_發(fā)者工具中查看wxml是看不到詳細(xì)的樣式信息，而這個(gè)工具在瀏覽器中可以看到icon組件最終的樣子,而控制圖片樣式的就是圖中的before這個(gè)偽元素,而且他的class都是以"wx-icon-"為前綴。

所以我們?yōu)槲覀兛梢赃@樣自定義icon,然后在wxml中這樣使用<icon type="custom">就可以了

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

3、request請(qǐng)求

微信小程序中為我們封裝了ajax請(qǐng)求，api是wx.request(options)。在我項(xiàng)目中的需求，很多請(qǐng)求用的是post，但是如果你把參數(shù)method設(shè)置為post后還需要添加header的"content-type"為"application/x-www-form-urlencoded"，如果你們每個(gè)request中都要重新寫這個(gè)一樣的header就很麻煩。在一個(gè)就是統(tǒng)一的錯(cuò)誤回調(diào)，我們很多請(qǐng)求的錯(cuò)誤回調(diào)中干的事情基本一樣，所以我們是否設(shè)置個(gè)默認(rèn)的錯(cuò)誤回調(diào)，這樣代碼就簡(jiǎn)潔多了。
新建一個(gè)ajax.js文件，我們可以根據(jù)自己需求來配置defaultConfig，然后通過Object.assign來是否覆蓋配置

function ajax(config) {
    var defaultConfig = {
        method: "GET",
        fail: function() {
            console.log('fail')
            wx.hideToast()
            wx.stopPullDownRefresh()
            wx.showModal({
                title: "提示",
                content: "網(wǎng)絡(luò)異常",
                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')，掛載到全局的方法中，這樣在每個(gè)頁面通過getApp().ajax(config)就能使用自己封裝后的api請(qǐng)求了。

4、不同頁面中的數(shù)據(jù)交互

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

5、picker-view

小程序中picker-view中bindchange方法會(huì)在滑動(dòng)結(jié)束后才觸發(fā)，如果我隨手一滑，還沒等他停下就就按確定按鈕或者跳轉(zhuǎn)頁面，那么bindchange沒觸發(fā)就不能獲取到滑動(dòng)后改變的值，體驗(yàn)很不好?？墒俏乙膊荒芨脑创a，于是我去開發(fā)者平臺(tái)提出了，好在工作人員也馬上說下個(gè)版本優(yōu)化。

6、使用gulp

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

7、生命周期

掌握好小程序頁面切換，4種導(dǎo)航切換時(shí)生命周期的變化，很重要！

8、客服按鈕

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

總結(jié)

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