前言

首先要聲明的是，我是一名 Android 開發者，以前基本沒有前端開發經驗，甚至連 JS ，HTML 都是爲了開發小程序現學的一些皮毛——因此文章中所提到的一些點也許在資深前端開發者看來只是小case，可是站在一個 Android 開發者的角度來看確實是大坑。javascript

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

正文

1，獲取小程序開發工具並正確安裝？

最近在一些地方看到不少人在入小程序坑的第一步就出現了不少的問題，其實很早以前（22號）關於怎樣搞定小程序的開發工具就已經有比較好的資料了，你們能夠直接去看一下而後照着作，基本上就沒啥問題。html

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

目前來說，咱們只能在微信的開發工具上編譯小程序的代碼，可是這並不意味着咱們必需要在那個開發工具上寫小程序的代碼——用過那個開發工具的人就會知道，那個開發工具並無多好用，代碼提示挺弱雞的，並且沒有自動保存是硬傷。前端

那麼怎麼辦呢？咱們徹底能夠在別的工具裏面寫代碼而後在小程序的開發工具裏面編譯。我試過 sublime 和 webstorm ，都是能夠在上面開發的，可是最後仍是發現 ws 更好用。我就不講 sublime 怎麼用了，你們只須要直接在裏面打開項目文件夾而後點右下角選擇當前的語言就能夠了。接下來着重講一講如何在 ws 裏面編寫小程序代碼。java

首先選擇小程序的目錄在 ws 裏面打開，這是很簡單的。可是這個時候打開裏面的文件以後你會發現，除了 js 代碼它能認出來以外，其餘的代碼他都並不可以認出來——主要是 .wxml 和 .wxss 文件。爲何呢？由於雖然 .wxml 和 .html 文件很像，.wxss 文件和 .css 文件很像，可是編譯器並不知道！這樣一來，咱們就沒法在這兩種文件裏面享受 ws 強大的代碼提示功能了——咱們能接受這種事麼？果斷不能！那麼接下來咱們應該怎麼辦呢？告訴編譯器，.wxml 格式的實際上是 HTML 文件，.wxss 格式的實際上是 CSS 文件。android

上圖把作這件事的流程講的很詳細了，.wxss 文件的轉化同理。這樣作了以後，編輯器就會知道他們的真實面目，而後就能夠有棒棒的代碼提示了（可是請注意，有寫微信本身寫的東西編輯器不只沒有代碼提示反而會報錯，無論他就行了）！接下來就能夠直接 ws 一個桌面小程序開發工具一個桌面，在 ws 裏面寫了代碼直接划過去點編譯了。git

3，跳轉page的時候怎麼傳遞數據？

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

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

反正我看到的時候是一頭霧水的。不過還好，通過一些摸索，終於知道了他們是啥。首先，代碼裏的 test 表明要跳轉到的 page 的url 地址。好比：json

那麼代碼就應該是：

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

聰明的人可能已經發現了，上面的代碼沒有了示例代碼裏面 ? 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() 裏面的 options 取就能夠了。

另外，其實更多的時候咱們的需求並非直接傳一個固定的參數到目標 page 裏面去，而是根據用戶的一些操做傳遞不一樣的值到目標 page 裏面去，這個時候該怎麼辦呢？要知道，咱們是沒有辦法得到組件的（這點太坑了，沒有 window 和 document）。這個時候，咱們能夠經過 dataset 來經過綁定組件數據達到目的。什麼？你不知道 dataset 是什麼東西？

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

4，某些圖片沒法加載？

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

我拿來練手的項目是 Gank.io 的客戶端，而 Gank 網站上的圖片都是寄放在新浪圖牀上的，默認的存儲的 url 是http://ww{1 || 2 || 3 || 4}.xxxxx.xxxxx.jpg，而後在小程序裏死活都加載不出來這些圖片！！！

我一開始不知道究竟是小程序的 <image> 標籤的問題仍是圖片的問題，就找了不少地方的圖片來作測試，包括 CSDN 上的，簡書上的，github 圖牀上的，結果是這些圖片均可以正常顯示——甚至新浪微博上的，一些人的頭像，均可以顯示！後來我發現，只要 URL 是 ww+數字開頭的圖片，都不能正常的顯示！這也太坑了。。。後來我就在思考怎麼解決這個問題——要麼改變標籤，他自身確定是有問題的，可能對某些來源的圖片不太友好；要麼改變圖片，讓它去適應這個標籤。這兩方面要改其實都挺難的，可是顯然第一種方式基本上是不可能的，就只能在第二種方式上去下功夫。

最後通過不斷地嘗試，我總結了不少規律，最後經過把圖片的 URL 由 ww+數字變成 ws+數字解決了這個問題，讓圖片得以顯示在小程序上。好比：

原本的URL：
http://ww1.sinaimg.cn/large/610dc034jw1f87z2n2taej20u011h11h.jpg
變換以後的URL：
http://ws1.sinaimg.cn/large/610dc034jw1f87z2n2taej20u011h11h.jpg

不要問我爲何這樣改了就能夠顯示了，由於我也不知道。。。太神奇了。。。

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

首先想要說的是，做爲一個 Android 開發者，我很是不適應小程序的數據與控件綁定的方式。在 Android 開發的時候，咱們是能夠直接得到控件而後對控件作數據綁定的工做的，而在小程序裏，我並不可以直接得到控件的對象，全部的數據綁定與動態修改只能經過維護 Page 裏面的 data{} 以及調用setData() 方法來進行，我很差評判這兩種方式的優劣，只能說真的很不習慣。

可是有些和我同樣之前沒怎麼接觸過前端開發的朋友在作這個的時候就有可能會踩坑了——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 獲取到的已經並非 Page 了，上下文已經發生了變化，那麼當前層級沒有 setData() 方法就很正常了。那麼怎麼解決這個問題呢？像這樣：

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

var that;

和一開始的區別在於多了一個全局變量 that，而且在 onLoad() 方法裏面對它進行了賦值，使它等於 this。這樣的話，咱們就能夠在這個 Page 的任何地方調用 that.setData() 來動態的改變控件的屬性了。

結語

原本是還有一些問題要談一談的，可是寫到這裏篇幅已經挺長的了，就乾脆把其餘的放到下一篇裏面算了。剩下的問題還有：

後臺接收數據須要表單？小程序並不能很方便的得到數據的表單，甚至 <form>標籤得到的數據也不是。
解析 HTML 塊？沒有document，沒有window，解析它簡直是一種折磨。
<form/> 裏面沒法獲取 <picker/> 的取值？明明文檔裏有說在 <form/> 裏面是能夠支持 <picker/> 的，結果你會發現死活沒法得到他的值。
要實現多層列表？有的時候也許須要在一個列表項的每一項下面又有一個子列表，在小程序裏怎麼作？
如何方便愉快的實現相似 Java 裏面的靜態變量的效果？沒有一個專門的類存放 static final 的值供其餘地方使用感受全身都不自在。

接下來我想談一下我對小程序的見解。

第一點，無論小程序能不能在將來的時間裏在移動端大放異彩，學習它，掌握它，都是沒有任何壞處的。
第二點，就目前的版本而言，小程序的表現讓我有些失望——實在是太過封閉。開發小程序就感受像是在微信給咱們劃定的一個小圈子裏兜兜轉轉，在圈裏也許咱們能獲得很良好的開發體驗，可是一步都出去不得。
第三點，在性能與便捷之間，最終每每會是便捷取勝。
第三點，能用 js 開發的，最終都會用 js 開發。

文章來自：第九程序

一名Android開發者的微信小程序填坑之路

前言

正文

1，獲取小程序開發工具並正確安裝？

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

3，跳轉page的時候怎麼傳遞數據？

4，某些圖片沒法加載？

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

結語