Belinda的小程序踩坑记（一）
微信小程序出来已有段时间，虽还在内测阶段。利用空闲时间，我把蜂贷微信项目部分迁移到小程序上。
目录结构
小程序的主体由三个文件组成，这三个文件要放在项目的根目录下，分别是
- 1、app.js 配置小程序的逻辑
- 2、app.json 公共设置
- 3、app.wxss 公共样式
小程序可以自定义 page，但是 page 需要在 app.json 中做出声明，不然IDE会报错，找不到页面。小程序的页面由四个文件组成，分别是
- 1、.js文件 页面逻辑
- 2、.wxml 视图层文件，页面结构
- 3、.wxss 样式文件，页面样式表
- 4、.json 文件，配置文件，页面配置
小程序配置
小程序的主体由三个文件组成，这三个文件要放在项目的根目录下，分别是
- 1、app.js 配置小程序的逻辑
- 2、app.json 公共设置
- 3、app.wxss 公共样式
小程序可以自定义 page，但是 page 需要在 app.json 中做出声明，不然IDE会报错，找不到页面。小程序的页面由四个文件组成，分别是
- 1、.js文件 页面逻辑
- 2、.wxml 视图层文件，页面结构
- 3、.wxss 样式文件，页面样式表
- 4、.json 文件，配置文件，页面配置
小程序视图
在小程序中，你不能继续用 html 中的标签来构造你的页面，MANA 框架有特定的容器组件，view，scroll-view 以及 swiper。
1、view 是视图容器，类似于 html 中的 div ，但是不同的是，用 view 包裹的内容，在超出设备窗口的时候，它实现的效果如 css 样式设置的 overflow：hidden
2、如果你需要实现类似通讯录或则聊天列表的滚动效果，你需要使用 scroll-view 滚动容器组件，它实现的效果如 css 样式设置的 overflow:scroll 。
3、swiper 是滑块视图组件，如果你要实现类似轮播图的效果的话，他是你的不二之选，你能通过属性配置来控制是否显示圆点，是否自动播放，切换时间，以及切换间隔时间等。小程序的MANA也实现了数据的绑定，写法类似于 Angular 和 Vue，通过双括号的形式 如：{{data}} 即可，值得注意的是，如果你写在容器（为了便于描述和理解，下文会以标签来描述）于之间的话，你直接把变量写在双括号里即可，如：<view>{{data}}</view> ，但是如果你给标签的属性绑定变量，你需要将双括号放在双引号内，如：<view wx:if=”{{data}}”></view>,类似于Angular 和 Vue，你也能在双括号内进行简单的运算，如：<view hidden=”{flag?true:false}”></view>。
细心的同学可能发现了在介绍数据绑定的时候我们用了wx:if 的属性，这是 MANA 提供的条件渲染，通过判断 wx:if 传布尔值（非布尔类型进行隐士转化）来控制是否渲染标签中的内容。在 MANA 中还有一个属性能控制内容的显隐，不同的是，wx:if 只有在为 true 的时候才回去渲染标签中的内容，而 hidden 始终会渲染内容，只是根据条件来控制内容的显示与否。
此外MANA 也为我们提供了较为实用的列表渲染，wx:for 接受一个数组,在页面中能根据数组中的值来渲染页面列表
除了使用列表渲染来复用一块视图外，你还可以通过模版来进行复用，你能在 template 中定义一块代码片段，然后在不同的页面中引用，如：
<template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>
除了 template 外，MANA 还提供了另外两种方式来进行应用和复用，import 和 include ，import 有作用域的概念，他只会引用目标文件中定义的模版。include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置上。
除MANA 同样也定义了常用的事件分类，如
- 1、touchstart 手指触摸动作开始
- 2、touchmove 手指触摸后移动
- 3、touchcancel 手指触摸动作被打断，如来电提醒，弹窗
- 4、touchend 手指触摸动作结束
- 5、tap 手指触摸后马上离开
- 6、longtap 手指触摸后，超过350ms再离开
组件样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。如果你写过 css ，那你就能轻松驾驭 wxss,wxss 在选择器上做了限制，目前支持的选择器有：
- 1、.class 如：.intro 选择所有拥有 class=”intro” 的组件
- 2、#id 如：# firstname选择拥有 id="firstname" 的组件
- 3、element 如： view 选择所有 view 组件
- 4、element, 如： element view checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
- 5、::after 如：view::after 在 view 组件后边插入内容
- 6、::before 如：view::before 在 view 组件前边插入内容
开发过移动端的前端er 都知道，苹果手机有物理像素和逻辑像素的区别，比如设备的像素是350px，设计稿的像素是750px；一般在开发过程中，我们会使用自动化构建工具去做像素转化，或则是使用预处理器定义像素转化函数进行处理，在小程序的开发中，大可不必这么麻烦，小程序提供了一个 rpx 的单位，你可以直接写上你在设计稿中测量的数值即可，小程序开发工具在编译过程中会自动帮你做转换。
在下次小程序分享《小程序开发踩坑（二）》的时候，会教大家如何与后端进行数据交互，欢迎感兴趣的小伙伴订阅博客。
