共计 2560 个字符,预计需要花费 7 分钟才能阅读完成。
体验背景
切图仔 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,等等,用着还是不习惯。新建文档的时候也只有默认的几种,不过,也符合场景,毕竟其他文本文件也没啥用。
其他的就没有深入玩了,就做了一个列表页,详情页做到一半就猝了。
项目地址
部分反馈收集
WXSS 本质上就是 css,但去掉了很多选择器。其实是被微信给屏蔽掉了。至于微信为什么使用 webview 却阉割了那么多东西。我想应该这次的小程序只是第一个选型,早点搞出来。后期会切换成 js to native 方案。因为现在微信在这方面没有什么现成的技术积累。相反阿里有个 Weex。