前言
首先要声明的是，我是一名 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"});
- 1
- 1
聪明的人可能已经发现了，上面的代码没有了示例代码里面 ? 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 开发。
文章来自：第九程序