白霸天的博客

你需要知道的小程序开发基础

发表于 |

微信小程序出来已有段时间，虽还在内测阶段。利用空闲时间，我把蜂贷微信项目部分迁移到小程序上。

##1.目录结构

小程序的主体由三个文件组成，这三个文件要放在项目的根目录下，分别是

  1. app.js 配置小程序的逻辑
  2. app.json 公共设置

  3. app.wxss 公共样式

    小程序可以自定义 page，但是 page 需要在 app.json 中做出声明，不然IDE会报错，找不到页面。小程序的页面由四个文件组成，分别是

  4. .js文件 页面逻辑

  5. .wxml 视图层文件，页面结构
  6. .wxss 样式文件，页面样式表
  7. .json 文件，配置文件，页面配置

2.小程序配置

app.json 决定页面文件的路径、窗口表现、设置网络超时时间、设置多少 tab 。

在 pages 对象里定义页面路径，pages 接受由字符串组成的数组，pages数组的第一个元素就是小程序的首页。

  1. window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
  2. tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
  3. networkTimeout 用来设置各种网络请求超时时间
  4. debug 是布尔类型，用来配置是否在开发者工具中开启 debug 模式

3.小程序视图

在小程序中，你不能继续用 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，通过双括号的形式 如： 即可，值得注意的是，如果你写在容器（为了便于描述和理解，下文会以标签来描述）于之间的话，你直接把变量写在双括号里即可，如： ，但是如果你给标签的属性绑定变量，你需要将双括号放在双引号内，如：,类似于Angular 和 Vue，你也能在双括号内进行简单的运算，如：。

细心的同学可能发现了在介绍数据绑定的时候我们用了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可以将目标文件除了

除MANA 同样也定义了常用的事件分类，如

  1. touchstart 手指触摸动作开始
  2. touchmove 手指触摸后移动
  3. touchcancel 手指触摸动作被打断，如来电提醒，弹窗
  4. touchend 手指触摸动作结束
  5. tap 手指触摸后马上离开
  6. longtap 手指触摸后，超过350ms再离开

    4.组件样式

定义在 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 的单位，你可以直接写上你在设计稿中测量的数值即可，小程序开发工具在编译过程中会自动帮你做转换。

在下次小程序分享《小程序开发踩坑（二）》的时候，会教大家如何与后端进行数据交互，欢迎感兴趣的小伙伴订阅博客。

蜂贷微信端