体验背景
切图仔 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。
转载请注明：OnlyLing - Web 前端开发者 » 微信小程序初体验