最新消息:站点添加了一些不太友好的内容,请见谅...

微信小程序初体验

山外有山 onlyling 1379浏览 0评论

体验背景

切图仔 N年

前端开发工程师 1.5年

前端项目临时背锅工程师

 

Vue 深入坑,做过项目

React 初略了解

Weex 初略了解

 

小程序文档 通体看了一遍

小程序demo weapp-demo-album 看了一下

 

开发平台:Mac OS

也不知道为什么就像写写小程序,以前错过了微信公众号之类的前端开发,这次小程序就不能错过了,要不然真的会失业吗?

着手准备

工具:官方提供的开发工具

数据:某平台开放接口

首先去开放者中心下载开放工具,然后筛选接口。

不小心知道了个人也可以注册小程序,就注册了一个,神奇的拥有了AppID(小程序ID)。

个人注册小程序,选择其他组织,组织代码符合格式就好,我是直接复制了提示的那个代码。组织什么证件照,随笔你上传一张。最后通过微信认证一下就好了。

官方说有没有AppID(小程序ID)都可以开发,只是有所限制。具体限制应该就是它了。

这里是一个小重点。

在微信小程序开发者用户中心,设置中,有一个服务器域名配置,request合法域名、socket合法域名、uploadFile合法域名、downloadFile合法域名,并且一个月内可申请3次修改。在微信小程序中有关于这类请求的接口,统统都要在这里设置一个白名单,并且需要https协议的接口,要不然请求会报错报错报错。另外,不仅仅是类似ajax请求,就连image组件里的图片请求地址也要是白名单里面的。

貌似设置白名单,新接口,24小时后才能使用。所以,要做开发,提前把各种接口梳理一遍,要不然,哼,等吧。

也就是没有AppID(小程序ID)的项目,就没有请求数据了。不过也没关系,貌似微信小程序中也有公共白名单,例如一些第三方CDN域名,目前发现了ac-dpeFsmm4.clouddn.com域名,可以随意拿数据,http、https都可以,统统都可以,不要设置,就可以直接使用,开心吗?

关于数据接口,文档上说了“wx.request发起的是 HTTPS 请求”,那就是必须用https协议的了咯,预选方案中貌似只有cnodejs是默认开启https的,并不想用它,以前有些过cnodejs的一个小玩意。特别想写知乎,最近一直在逛它,但文档上全是http的请求,但是,冒着作死就不会死的精神,试了一下https协议,哎哟,可以有。

开发体验

最开始我以为它就是web项目,写下去才知道,并不是。

虽然微信小程序是以我们比较熟悉的语言书写,但除了js,其他并不是。例如写WXML的时候,貌似只能用它提供的组件标签,WXSS倒没有什么大的变化,可能就是选择器上少了,和某些效果表现上有差异。

大致可以把微信小程序理解为一个JS to Native方案,和RN、Weex差不多,玩过这些项目的就会感觉无比情切。

经过深入玩家提醒:

小程序并不是JS to Native。完全是用WebView做的渲染和封装。js 在ios上用的是 JS Core。Android是v8 WXML不是只能用提供的标签,其他的都能用。但是不建议用。

另外,可以写es6哟。

反正我是没有玩过,就看过。说一下我是怎么玩微信小程序的吧。

首先把文档看了一遍,感觉上没多大问题,和Vue、React之类的框架有不少相似的地方。有过这方面开发经验的人,照着开发文档撸就可以了。

另外,也看了其他人的体验介绍,找了一个比较小的项目,看看它的项目结构是怎么样的。老毛病,每次遇见新的东西就去看别人怎么写,怎么部署项目。

找一个好些的UI,或直接找用同样接口的案例。找案例最好了,不仅有UI可以抄,接口都提供的使用方法,啊哈哈,脸皮不是一般的厚。

那我们就开始干咯。

新建项目的时候,会默认初始化一个简单的案例,拿来改改就上手了。

由于没有常规的ajax方案,只好用wx.request和Promise封装一个熟悉的ajax,有点泪奔。

最开始写WXML的时候,也有点无从下手,以前写web项目,都会有系统的css框架或者UI组件,现在都是0,要自己写。并且总带着web项目的想法看待微信小程序,完全把它当做浏览器玩,有吃亏。

后来也不多想,就是一个简单的项目,一个列表,一个详情页,先撸一下,后面再搞其他的。

其他也蛮简单的,主要的标签少了,那么几个。view -> div,几乎就是一个容器,text -> p,文字专属,image -> img,客官,您要点图片吗,可好玩了。另外,某些组件都要一些不合“印象”的表现。

js部分,还是原来的配方,还是熟悉的味道,由于个人长期写Vue,时常把data里面的静态数据通过this.xx来用,其实需要this.data.xx的方式。

另外,setData这个函数,诶,不好说,Vue中,数据改变,视图就直接跟着变,微信小程序里面非要setData一下。

其他交互实现的方案都是老套路了,定义函数,使用函数等。另外,在这个小项目中使用到了一个类似生成器的东西,终于学有所用了。

在app.json中添加一个pages路径,貌似开发工具就自动生成了对应的四个文件。当时我是先自己新建了一个js文件,在app.json中配置后,其他是三个文件就出来了。

路由(页面?)切换的效果不是很理想,在开发工具调试中查看的样子,真机还不知道。当一个路由切换进来,虽然有webapp的那种页面从右往左切入,盖住旧页面,但是新切入的页面是空白页,页面进入后才加载内容。路由也没有别名,切换路由都是通过当前文件地址找相对位置。

微信小程序没有绑定html的方法,知乎日报出上手,猝。

额外就说说开发工具吧,个人感觉,它还是适合做一个模拟器,也可能是开发习惯问题,不太习惯在编辑里调试。编码中的而一些快捷键和常规编辑器不合,例如关闭当前文档,command+w,恢复,command+y,等等,用着还是不习惯。新建文档的时候也只有默认的几种,不过,也符合场景,毕竟其他文本文件也没啥用。

其他的就没有深入玩了,就做了一个列表页,详情页做到一半就猝了。

项目地址

wx-demo

部分反馈收集

WXSS本质上就是css,但去掉了很多选择器。其实是被微信给屏蔽掉了。至于微信为什么使用webview却阉割了那么多东西。我想应该这次的小程序只是第一个选型,早点搞出来。后期会切换成js to native方案。因为现在微信在这方面没有什么现成的技术积累。相反阿里有个Weex。

转载请注明:OnlyLing-WEB前端开发者 » 微信小程序初体验

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址