Android 开发者谈小程序开发中遇到的那些坑
前言
首先要声明的是，我是一名开发人员，之前基本没有前端开发经验。甚至JS和HTML都只是我为了开发小程序而学到的一些表面东西——所以文中提到的一些点可能有经验的人更能体会到。对于前端开发者来说，这似乎是一个小案例，但从开发者的角度来看，这确实是一个很大的陷阱。
一开始我就不说太多了。我会在文末谈谈我对小程序的一些看法——这篇文章主要讲的是小程序开发过程中遇到的一些坑。
PS：推荐一个我写的微信小程序版Gank客户端：--gank
正文 1、获取小程序开发工具并正确安装？
最近在一些地方看到很多人在进入小程序坑的第一步就遇到了很多问题。其实很早之前（22日）就已经有比较好的关于如何获取小程序开发工具的资料了。你看一下然后照着做就可以了，基本上不会有问题：小程序开发工具获取并正确安装教程
2.直接在微信开发工具上写代码？
目前我们只能在微信的开发工具上编译小程序的代码，但这并不意味着我们必须在该开发工具上编写小程序的代码——用过该开发工具的人都知道，开发工具不太好用，代码提示比较弱，没有自动保存是一个缺陷。
那么该怎么办呢？我们可以在其他工具中编写代码，然后在小程序开发工具中进行编译。我尝试了WS和WS，两者都可以开发，但最终发现ws更有用。我不会详细介绍如何使用它。您只需直接打开项目文件夹，点击右下角选择当前语言即可。接下来我们重点讲一下如何在ws中编写小程序代码。
首先选择小程序的目录，在ws中打开。这很简单。但此时，打开里面的文件后，你会发现除了它能识别的js代码外，其他代码它都无法识别——主要是.wxml和.wxss文件。为什么？因为虽然 .wxml 和 .html 文件非常相似，并且 .wxss 文件与 .css 文件非常相似，但编译器并不知道！这样我们就无法在这两个文件中享受到ws强大的代码提示功能了——这种事情我们能接受吗？绝对不是！那么接下来我们应该做什么呢？告诉编译器，.wxml 格式实际上是 HTML 文件，.wxss 格式实际上是 CSS 文件。
上图非常详细地解释了执行此操作的过程。这同样适用于 .wxss 文件的转换。这样做完之后，编辑器就知道了他们的真实面目，然后就可以有很棒的代码提示了（但是请注意，如果你自己在微信上写东西，编辑器不仅没有代码提示，而且会报错，不管怎样）它）好吧）！接下来就可以直接ws桌面小程序开发工具和桌面了。 ws中写完代码后，直接划过去，点击编译即可。
3、跳转页面时如何传输数据？
小程序为我们开辟了一个很好的页面间跳转的界面：
但是这里微信官方并没有对这个接口有太多的描述，只是简单的给了我们一行代码：wx.({url: "test ? id=1"});，其实这里是这样写的，有些困难理解——测试到底是什么？ id 到底是什么？中间那个问号是什么鬼？这到底是什么？
反正我看到的时候也是一头雾水。幸运的是，经过一番探索，我终于弄清楚它们是什么了。首先，代码中的test代表要跳转到的页面的url地址。例如：
那么代码应该是：
wx.navigateTo({url: "/pages/specific/specific"});
- 1
- 1
聪明的人可能发现了，上面的代码没有？示例代码中的 id = 1 部分。发生了什么？难道是我写错了？并不真地。这部分其实就是跳转页面时用来传值的关键方法。这不是必需的，但非常有用。
*？类似于分隔符，后面跟着要传递到目标页面的所有值。这些值通过键值对一一对应，每个键值对之间用&分隔。不过需要注意的是，似乎只能通过这种方式来传递值。不属于类型的值在传递后也会进行转换。 *例如我传递了a和json：
var arrayData = ["firstData" , "secondData"]; var jsonData = {first: "firstData" , second: "secondData"}; wx.navigateTo({url: "/pages/specific/specific ? data: " + arrayData + "&json=" + jsonData});
- 1
- 2
- 3
- 1
- 2
- 3
目标页面收到的结果是：
//目标page的onLoad方法 onLoad: function (options) { //结果是：firstData , secondData console.log(options.data); //结果是：f
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
上面其实演示了如何在目标页面接收传入的数据，直接在()中获取即可。
另外，其实更多的时候，我们的需求并不是直接向目标页面传递一个固定的参数，而是根据一些用户操作向目标页面传递不同的值。这个时候我们应该做什么呢？要知道，我们没有办法获取分量（这太混乱了，没有求和）。这时候我们就可以通过绑定组件数据来达到我们的目的。什么？你不知道那是什么？
多读书，多看报纸，多看文献，少睡觉。
4.有些图片无法加载？
这个坑实在是太深了。你可能很久很久都不会遇到，但是一旦遇到就真的很痛苦了。
我以前实践的项目是Gank.io客户端，Gank网站上的图片都存储在新浪图片上。默认存储的 URL 为 {1 || 2 || 3 || 4}...jpg，那么这些图片就无法在小程序中加载了！ ！ ！
一开始我不知道是小程序标签的问题还是图片的问题，于是我从很多地方找了图片进行测试，包括CSDN、简书、图床上的图片。结果这些照片都是正常的。显示——连新浪微博上某些人的头像都可以显示！后来发现只要是ww+数字开头的网址就无法正常显示！这太混乱了。 。 。后来我就在想如何解决这个问题——要么改标签，肯定有问题，而且可能对某些来源的图片不友好；或更改图片以使其适应标签。想要改变这两方面其实是相当困难的，但显然第一种方式基本上是不可能的，所以我们只能从第二种方式着手。
最后，经过不断的尝试，总结了很多规则，最终通过将图片的URL从ww+修改为ws+，解决了问题，使得图片能够在小程序上显示。例如：
本来的URL： http://ww1.sinaimg.cn/large/610dc034jw1f87z2n2taej20u011h11h.jpg 变换之后的URL： http://ws1.sinaimg.cn/large/610dc034jw1f87z2n2taej20u011h11h.jpg
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
不要问我为什么这么改之后还能显示，因为我也不知道。 。 。太棒了。 。 。
5. this.() 是否显示了这个方法？
首先我想说的是，作为一名开发者，我对小程序中数据和控件的绑定方式感到非常不舒服。开发时，我们可以直接获取控件，然后对控件进行数据绑定。但是，在小程序中，我无法直接获取控件的对象。所有的数据绑定和动态修改都只能通过维护来完成。使用Page中的data{}，调用()方法即可。我无法判断这两种方法的优缺点。我只能说我实在不习惯。
但像我这样之前没怎么接触过前端开发的朋友在这样做的时候可能会遇到麻烦——()是Page级别的方法，并不意味着在任何地方都可以调用this.()方法。我们可以顺利得到我们预期的结果。例如：
Page({ onLoad: function (options) { wx.request({
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如果我在wx.()的回调接口的()中写this.({...})，则无法完成预期的操作。程序会报错说没有()方法，因为此时这个获取到的值不再是Page了，上下文发生了变化，所以当前关卡没有()方法也是正常的。那么如何解决这个问题呢？像这样：
Page({ onLoad: function (options) { that = this; wx.request({ url: Constant.GET_URL, success: function (res) { that.setData({...}) } }); }, }); var that;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
与一开始的不同之处在于，多了一个全局变量 that，并且在 () 方法中给它赋值，使其等于 this。在这种情况下，我们可以在此 Page 中的任何位置调用 that.() 来动态更改控件的属性。
结论
本来还有一些问题想讲，但是写到这里已经相当长了，所以就放在下一篇文章里吧。剩下的问题是：
接下来我想谈谈我对小程序的看法。
感谢您阅读本文，请顺便给我一个星星：--gank