应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:42

前言


首先必须声明的就是,我就是一名 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() 去动态的发生改变控件的属性了。


结语


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


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

标签赢得的数据也不是。


解析 HTML 块?没document,没window,解析它简直就是一种煎熬。


里面无法以获取 的值域?明明文档里存有说道在 里面就是可以积极支持 的,结果你可以辨认出非要无法赢得他的值。


必须同时实现多层列表?有的时候也许须要在一个列表项的每一项下面又存有一个子列表,在小程序里怎么做?


如何便利开心的同时实现相似 Java 里面的静态变量的效果?没一个专门的类放置 static final 的值供其他地方采用感觉全身都不自在。


接下来我想要谈论一下我对小程序的观点。


第一点,不管小程序能够无法在未来的时间里在移动端的大放异彩,自学它,掌控它,都就是没任何坏处的。


第二点,就目前的版本而言,小程序的整体表现使我有些沮丧——真的就是太过半封闭。研发小程序就感觉像在微信给我们划设的一个小圈子里兜兜玩玩,在圈里也许我们能够获得很较好的研发体验,但是一步都过来严禁。


第三点,在性能与方便快捷之间,最终往往可以就是方便快捷获胜。


第三点,能够用 js 研发的,最终都会用 js 研发。


多谢各位看客看见这,顺便去点个star吧:wechat-weapp-gank

TAG标签:
阅读推荐