知乎日报
小程序不支持绑定html数据，猝？
开发初体验
体验背景
切图仔 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差不多，玩过这些项目的就会感觉无比情切。
另外，可以写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，等等，用着还是不习惯。新建文档的时候也只有默认的几种，不过，也符合场景，毕竟其他文本文件也没啥用。
其他的就没有深入玩了，就做了一个列表页，详情页做到一半就猝了。数据接口
详情请点击查看ZhihuDailyPurify - 知乎日报 API 分析疑惑组件
text 组件中
.index-time{
padding: 20px 40px; /*只有左右padding*/
padding-top: 40px; /*无效*/
padding-bottom: 40px; /*无效*/
}
image 组件中
<view class="index-ul-item">
<text class="title">标题来一个呀标题来一个呀标题来一个呀标题来一个呀标题来一个呀标题来一个呀</text>
<image class="img" mode="center" src="http://ac-dpeFsmm4.clouddn.com/dcc1dedffa8d73e6f5c2.jpg"></image>
</view>
.index-ul-item{
padding: 10px 20px;
background-color: #fff;
display: flex;
algin-items: stretch;
}
.index-ul-item .img{
height: 100px;
width: 100px;
flex-basis: 100px;
}
.index-ul-item .title{
flex-basis: 100%;
}
如果直接这样子，image的大小终究不会是css里面那样，如果仅仅对image设置大小，大小的数值不会有问题。
所以需要对image包一层view，不知道浏览器中是不是如此。事件绑定
<view class="index-ul-item" wx:for="{{list}}" data-id="{{item.id}}" bindtap="goToNews">
<text class="title">{{item.title}}</text>
<view class="img-box">
<image class="img" mode="center" src="https://ac-dpeFsmm4.clouddn.com/dcc1dedffa8d73e6f5c2.jpg"></image>
</view>
</view>
假若这样写，goToNews事件中通过参数的方式，拿不到data-id的值，event.target.dataset.id是undefined，其他数据貌似正常。
需要把相关绑定放到text上请求数据
wx.request发起的是 HTTPS 请求，但是，请求借口需要在管理中心配置白名单。
image发起的数据请求似乎也需要是白名单里的地址，似乎也有公共白名单。例如：ac-dpeFsmm4.clouddn.com/，http、https都可以拿到图片。
|
