前言

首先要聲明的是，我是一名 Android 開發(fā)者，之前基本沒有前端開發(fā)經(jīng)驗，甚至連 JS ，HTML 都是為了開發(fā)小程序現(xiàn)學的一些皮毛——所以文章中所提到的一些點也許在資深前端開發(fā)者看來只是小case，但是站在一個 Android 開發(fā)者的角度來看確實是大坑。

前面就不說太多東西了，文章的末尾再談談我對小程序的一些看法——這篇文章主要是談談在開發(fā)小程序的過程中遇到的一些坑。

PS：推薦一下我寫的一個微信小程序版的Gank客戶端：wechat-weapp-gank

正文

1，獲取小程序開發(fā)工具并正確安裝？

最近在一些地方看到很多人在入小程序坑的第一步就出現(xiàn)了很多的問題，其實很早之前（22號）關于怎樣搞定小程序的開發(fā)工具就已經(jīng)有比較好的資料了，大家可以直接去看一下然后照著做，基本上就沒啥問題：獲取小程序開發(fā)工具并正確安裝的教程

2，直接在微信開發(fā)工具上寫代碼？

目前來講，我們只能在微信的開發(fā)工具上編譯小程序的代碼，但是這并不意味著我們必須要在那個開發(fā)工具上寫小程序的代碼——用過那個開發(fā)工具的人就會知道，那個開發(fā)工具并沒有多好用，代碼提示挺弱雞的，而且沒有自動保存是硬傷。

那么怎么辦呢？我們完全可以在別的工具里面寫代碼然后在小程序的開發(fā)工具里面編譯。我試過 sublime 和 webstorm ， 都是可以在上面開發(fā)的，但是最后還是發(fā)現(xiàn) ws 更好用。我就不講 sublime 怎么用了，大家只需要直接在里面打開項目文件夾然后點右下角選擇當前的語言就可以了。接下來著重講一講如何在 ws 里面編寫小程序代碼。

首先選擇小程序的目錄在 ws 里面打開，這是很簡單的。但是這個時候打開里面的文件之后你會發(fā)現(xiàn)，除了 js 代碼它能認出來之外，其他的代碼他都并不能夠認出來——主要是 .wxml 和 .wxss 文件。為什么呢？因為雖然 .wxml 和 .html 文件很像，.wxss 文件和 .css 文件很像，但是編譯器并不知道！這樣一來，我們就無法在這兩種文件里面享受 ws 強大的代碼提示功能了——我們能接受這種事么？果斷不能！那么接下來我們應該怎么辦呢？告訴編譯器，.wxml 格式的其實是 HTML 文件，.wxss 格式的其實是 CSS 文件。

上圖把做這件事的流程講的很詳細了，.wxss 文件的轉化同理。這樣做了之后，編輯器就會知道他們的真實面目，然后就可以有棒棒的代碼提示了（但是請注意，有寫微信自己寫的東西編輯器不僅沒有代碼提示反而會報錯，不管他就好了）！接下來就可以直接 ws 一個桌面小程序開發(fā)工具一個桌面，在 ws 里面寫了代碼直接劃過去點編譯了。

3，跳轉page的時候怎么傳遞數(shù)據(jù)？

小程序給我們開放了很好的接口來進行頁面之間的跳轉：

但是在這個地方微信官方對于這一個接口并沒有太多的描述，只是簡簡單單的給了我們一行代碼：wx.navigateTo({url: "test ? id = 1"}); ，其實這里這樣寫是有些難以理解的——test 是個什么鬼 ? id 是個什么鬼？中間那個問號是個什么鬼？這都是些什么鬼？

反正我看到的時候是一頭霧水的。不過還好，經(jīng)過一些摸索，終于知道了他們是啥。首先，代碼里的 test 代表要跳轉到的 page 的url 地址。比如：

那么代碼就應該是：

wx.navigateTo({url: "/pages/specific/specific"});
1
1

聰明的人可能已經(jīng)發(fā)現(xiàn)了，上面的代碼沒有了示例代碼里面 ? id = 1 的部分，怎么回事，是我寫錯了么？并不是。這一部分其實是跳轉 page 時用來傳值的關鍵方法，并不必需，但很有用。

* ? 是一個分隔符一樣的東西，它的后面就是所有要傳到目標 page 的值。而這些值是通過鍵值對來一一對應的，每個鍵值對之間用 & 隔開。但是要注意的是，似乎這種方式傳值只能傳 String 過去，不是 String 類型的值傳過去之后也會被轉化為 String 。*比如，我傳了個 array 和 json 過去：

var arrayData = ["firstData" , "secondData"];
var jsonData = {first: "firstData" , second: "secondData"};
wx.navigateTo({url: "/pages/specific/specific ? data: " + arrayData + "&json=" + jsonData});

結果目標page里接受到的是：

//目標page的onLoad方法
onLoad: function (options) {
        //結果是：firstData , secondData
        console.log(options.data);
        //結果是：f
        console.log(options.data[0]);
        //結果是：[object Object]
        console.log(options.json);
        //結果是：undefined
        console.log(options.data.first);

        //很顯然，被轉化了  
}

上面其實也演示了如何在目標 page 里面接收傳過來的數(shù)據(jù)，直接在 onLoad() 里面的 options 取就可以了。

另外，其實更多的時候我們的需求并不是直接傳一個固定的參數(shù)到目標 page 里面去，而是根據(jù)用戶的一些操作傳遞不同的值到目標 page 里面去，這個時候該怎么辦呢？要知道，我們是沒有辦法獲得組件的（這點太坑了，沒有 window 和 document）。這個時候，我們可以通過 dataset 來通過綁定組件數(shù)據(jù)達到目的。什么？你不知道 dataset 是什么東西？

多讀書，多看報，多看文檔少睡覺。

4，某些圖片無法加載？

這個坑真的是深坑，可能很久很久都不會遇到，但是一旦遇到真的很蛋疼。

我拿來練手的項目是 Gank.io 的客戶端，而 Gank 網(wǎng)站上的圖片都是寄放在新浪圖床上的，默認的存儲的 url 是http://ww{1 || 2 || 3 || 4}.xxxxx.xxxxx.jpg，然后在小程序里死活都加載不出來這些圖片?。。?/strong>

我一開始不知道到底是小程序的 <image> 標簽的問題還是圖片的問題，就找了很多地方的圖片來做測試，包括 CSDN 上的，簡書上的，github 圖床上的，結果是這些圖片都可以正常顯示——甚至新浪微博上的，一些人的頭像，都可以顯示！后來我發(fā)現(xiàn)，只要 URL 是 ww+數(shù)字 開頭的圖片，都不能正常的顯示！這也太坑了。。。后來我就在思考怎么解決這個問題——要么改變 標簽，他自身肯定是有問題的，可能對某些來源的圖片不太友好；要么改變圖片，讓它去適應這個 標簽。這兩方面要改其實都挺難的，但是顯然第一種方式基本上是不可能的，就只能在第二種方式上去下功夫。

最后經(jīng)過不斷地嘗試，我總結了很多規(guī)律，最后通過把圖片的 URL 由 ww+數(shù)字變成 ws+數(shù)字 解決了這個問題，讓圖片得以顯示在小程序上。比如：

本來的URL：
http://ww1.sinaimg.cn/large/610dc034jw1f87z2n2taej20u011h11h.jpg
變換之后的URL：
http://ws1.sinaimg.cn/large/610dc034jw1f87z2n2taej20u011h11h.jpg

不要問我為什么這樣改了就可以顯示了，因為我也不知道。。。太神奇了。。。

5，this.setData() 顯示沒這個方法？

首先想要說的是，作為一個 Android 開發(fā)者，我非常不適應小程序的數(shù)據(jù)與控件綁定的方式。在 Android 開發(fā)的時候，我們是可以直接獲得控件然后對控件做數(shù)據(jù)綁定的工作的，而在小程序里，我并不能夠直接獲得控件的對象，所有的數(shù)據(jù)綁定與動態(tài)修改只能通過維護 Page 里面的 data{} 以及調用setData() 方法來進行，我不好評判這兩種方式的優(yōu)劣，只能說真的很不習慣。

但是有些和我一樣以前沒怎么接觸過前端開發(fā)的朋友在做這個的時候就有可能會踩坑了——setData() 是 Page 這個層級上的方法，并不是在任何地方調用 this.setData() 方法都可以順利的得到我們預期的結果的。比方說：

Page({
    onLoad: function (options) {
        wx.request({
            url: Constant.GET_URL,
            success: function (res) {
                this.setData({...});
            }
        });
    },
});

我在 wx.request() 的回調接口里面 success() 里面寫 this.setData({...})，就不能完成預期操作，程序會報錯說沒有 setData() 這個方法，因為這個時候 this 獲取到的已經(jīng)并不是 Page 了，上下文已經(jīng)發(fā)生了變化，那么當前層級沒有 setData() 方法就很正常了。那么怎么解決這個問題呢？像這樣：

Page({
    onLoad: function (options) {
        that = this;
        wx.request({
            url: Constant.GET_URL,
            success: function (res) {
                that.setData({...})
            }
        });
    },
});

var that;

和一開始的區(qū)別在于多了一個全局變量 that，并且在 onLoad() 方法里面對它進行了賦值，使它等于 this。這樣的話，我們就可以在這個 Page 的任何地方調用 that.setData() 來動態(tài)的改變控件的屬性了。

結語

本來是還有一些問題要談一談的，但是寫到這里篇幅已經(jīng)挺長的了，就干脆把其他的放到下一篇里面算了。剩下的問題還有：

• 后臺接收數(shù)據(jù)需要表單？小程序并不能很方便的獲得數(shù)據(jù)的表單，甚至 <form>標簽獲得的數(shù)據(jù)也不是。
• 解析 HTML 塊？沒有document，沒有window，解析它簡直是一種折磨。
• <form/> 里面無法獲取 <picker/> 的取值？明明文檔里有說在 <form/> 里面是可以支持 <picker/> 的，結果你會發(fā)現(xiàn)死活無法獲得他的值。
• 要實現(xiàn)多層列表？有的時候也許需要在一個列表項的每一項下面又有一個子列表，在小程序里怎么做？
• 如何方便愉快的實現(xiàn)類似 Java 里面的靜態(tài)變量的效果？沒有一個專門的類存放 static final 的值供其他地方使用感覺全身都不自在。

接下來我想談一下我對小程序的看法。

• 第一點，不管小程序能不能在未來的時間里在移動端大放異彩，學習它，掌握它，都是沒有任何壞處的。
• 第二點，就目前的版本而言，小程序的表現(xiàn)讓我有些失望——實在是太過封閉。開發(fā)小程序就感覺像是在微信給我們劃定的一個小圈子里兜兜轉轉，在圈里也許我們能得到很良好的開發(fā)體驗，但是一步都出去不得。
• 第三點，在性能與便捷之間，最終往往會是便捷取勝。
• 第三點，能用 js 開發(fā)的，最終都會用 js 開發(fā)。

多謝各位看官看到這，順便去點個star吧：wechat-weapp-gank