小程序开发学习一：开发语言解析

小程序的开发是建立在已有的开发语言和微信的封装api之上的，学习前我们梳理下基础的东西。
前端开发通用js html json css。
js ：页面脚本
html ：页面标签语言
json： 一种数据格式
css ：页面样式语言
前端框架，像vue这种，有接触的就比较好理解，它有自己的数据绑定方式。
小程序使用的独特语言：
wxml 类比 html 和前端框架的结合
wxs 类比js
wxss类比css

1.小程序的项目结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

1.1 小程序主体

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

1.2小程序页面

目录图中page文件夹就是页面文件夹，index文件夹包含主页的所有文件。

这个简单的程序里，log是日志文件夹，utils 是通用工具js文件夹。

2.小程序使用语言

2.1wxml

这是页面载体，他的官方定义如下：
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
他的基本语法如下。

2.1.1模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的 地方调用。

标签解释：

 <template ></template>  模板标签
 <view> </view> 组件标签
 <block > </block >块级标签

他不支持div span之类，页面一概使用 view标签。当view组件多而且有其他应用时用blok标签来控制。
简单使用时，我们在页面文件用view组件就可以了，如下图。

页面组件标签：

input框
是否开关

<switch> </switch>

按钮

<button > </button >

有些html 标签用法有改变需探索。

重复模板

定义模板

使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> hello</text>
  </view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

关于数据使用这块，我们在下面的数据绑定这块再细讲。

2.1.2 引用

WXML 提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include

include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

相当于header页面展现在include标签位置。

2.1.3 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单运用

内容展现
数据绑定使用 Mustache 语法（双大括号）将变量包起来，页面中用双大括号引用变量，变量值在data中赋予。

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组合

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]。

运算

逻辑判断

<view wx:if="{{length > 5}}"> </view>

详见 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

2.1.4 列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名，wx:for 也可以嵌套。

block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。

简单说 wx：for 就是按条件循环渲染展现组件。

wx:key

如果列表中小组件新加和减少或者状态有改变时，需要定位到精确小组件位置，这时就需要wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
示例代码

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ]
   }
 })   

每个switch按钮，带有字符串key。
注意：
当 wx:for 的值为字符串时，会将字符串解析成字符串数组。
花括号和引号之间如果有空格，将最终被解析成为字符串。
注意代码中的空格，有些ide可以高亮显示空格。

2.1.5 条件渲染

与for对比， 相当于if判断后渲染。

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。

wx:if 与 hidden 对比

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
详见 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

2.2 wxs

WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。
wxs与js是有区别的，wxs类似js但是语法不完全相同，两者在安卓和ios的表现也不太通。

每一个 .wxs 文件和 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。
引用的时候，要注意如下几点：
1.只能引用 .wxs 文件模块，且必须使用相对路径。
2.wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
3.如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

这些与其他的前端框架都有相似性，详见
https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

官方文档写的比较仔细了，有前端框架比如vue之类的使用经验，上手应该比较快。