lypeer：一名Android开发者的微信小程序填坑之路《上》

前言

首先必须声明的就是，我就是一名 Android 开发者，之前基本没前端开发经验，甚至连 JS ，HTML 都就是为了研发小程序现学的一些皮毛——所以文章中所提及的一些点也许在资深前端开发者认为只是大case，但是东站在一个 Android 开发者的角度来看的确就是大坑。

前面就不说道太多东西了，文章的末尾再谈谈我对小程序的一些观点——这篇文章主要就是谈谈在研发小程序的过程中碰到的一些坑。

PS：所推荐一下我写下的一个微信小程序版的Gank客户端：wechat-weapp-gank

正文

1，以获取小程序开发工具并恰当加装？

最近在一些地方看见很多人左哨小程序坑的第一步就发生了很多的问题，其实很早之前（22号）关于怎样搞掂小程序的开发工具就已经存有比较不好的资料了，大家可以轻易回去看看一下然后照著搞，基本上就没啥问题：以获取小程序开发工具并恰当加装的教程

2，轻易在微信开发工具上贴代码？

目前来说，我们就可以在微信的开发工具上编程小程序的代码，但是这并不意味著我们必须必须在那个开发工具上贴小程序的代码——用过那个开发工具的人就可以晓得，那个开发工具并没多小巧，代码提示信息挺强鸡的，而且没自动留存就是硬伤。

那么怎么办呢？我们全然可以在别的工具里面写下代码然后在小程序的开发工具里面编程。我先行过 sublime 和 webstorm ， 都就是可以在上面研发的，但是最后还是辨认出 ws 更好用。我就不谈 sublime 怎么用了，大家只须要轻易在里面关上项目文件夹然后点右下角挑选当前的语言就可以了。接下来着重于谈一谈如何在 ws 里面撰写小程序代码。

首先挑选小程序的目录在 ws 里面关上，这就是很直观的。但是这个时候关上里面的文件之后你可以辨认出，除了 js 代码它能够认出之外，其他的代码他都并不能认出——主要就是 .wxml 和 .wxss 文件。为什么呢？因为虽然 .wxml 和 .html 文件很像是，.wxss 文件和 .css 文件很像是，但是编译器并不知道！这样一来，我们就无法在这两种文件里面享用 ws 强悍的代码提示信息功能了——我们能够拒绝接受这种事么？果断无法！那么接下来我们必须怎么办呢？说编译器，.wxml 格式的其实就是 HTML 文件，.wxss 格式的其实就是 CSS 文件。

注把搞这件事的流程谈的非常详尽了，.wxss 文件的转变同理。这样搞了之后，编辑器就可以晓得他们的真实面目，然后就可以存有棒棒的代码提示信息了（但是请注意，存有写下微信自己写下的东西编辑器不仅没代码提示信息反而可以收起，不管他就不好了）！接下来就可以轻易 ws 一个桌面小程序开发工具一个桌面，在 ws 里面写下了代码轻易划过去点编程了。

3，重定向page的时候怎么传递数据？

小程序给我们对外开放了较好的USB去展开页面之间的重定向：

但是在这个地方微信官方对于这一个USB并没太多的叙述，只是简简单单的给了我们一行代码：wx.navigateTo({url: "test ? id = 1"}); ，其实这里这样写下就是有些难以认知的——test 就是个什么鬼 ? id 就是个什么鬼？中间那个问号就是个什么鬼？这都就是些什么鬼？

反正我看见的时候就是一头雾水的。不过要是，经过一些探索，终于晓得了他们就是啥。首先，代码里的 test 代表必须重定向至的 page 的url 地址。比如说：

那么代码就必须就是：

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方法

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 里面发送传过来的数据，轻易在 onLoad() 里面的 options 挑就可以了。

另外，其实更多的时候我们的市场需求并不是轻易传一个紧固的参数至目标 page 里面回去，而是根据用户的一些操作方式传达相同的superficial目标 page 里面回去，这个时候该怎么办呢？必须晓得，我们就是没办法赢得组件的（这点太坑了，没 window 和 document）。这个时候，我们可以通过 dataset 去通过存取组件数据达至目的。什么？你不晓得 dataset 就是什么东西？

多读书，多看书，多看看文档太少睡。

4，某些图片无法读取？

这个坑真的就是深坑，可能将很久很久都不能碰到，但是一旦碰到真的很蛋疼。

我当作赖草的项目就是 Gank.io 的客户端，而 Gank 网站上的图片都就是寄放在新浪图床上的，预设的存储的 url 就是http://ww{1 || 2 || 3 || 4}.xxxxx.xxxxx.jpg，然后在小程序里非要都读取不出这些图片！！！

我一已经开始不晓得到底就是小程序的 标签的问题还是图片的问题，就打听了很多地方的图片去搞测试，包含 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() 的反弹USB里面 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() 去动态的发生改变控件的属性了。

结语

本来就是除了一些问题必须谈一谈的，但是写下至这里篇幅已经挺长的了，就干脆把其他的放在下一篇里面反正。剩的问题除了：

后台接收数据须要表单？小程序并无法很便利的赢得数据的表单，甚至