小程序语法参考使用{{message}}，可以将直接使用js中传过来的数据，但是在小程序中更新数据需要在Page实例下的

语法参考

组件上的配置

在json文件中修改navigationBarTitleText的值可以修改当前组件的标题，修改navigationBarBackgroundColor的值可以修改标题栏的颜色（值得注意的是该属性只接受3位十六进制的颜色值）
在wxml中使用的变量和方法要在js中的Page中进行声明，且js中Page是组件必须的
使用{{message}}，可以将直接使用js中传过来的数据，但是在小程序中更新数据需要在Page实例下的方法调用this.setData将数据传到渲染层。

WXML

条件渲染

使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

    <view wx:if="{{condition}}"> True </view>

    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-06-18'
    }（js中的数据）

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>

    <template is="msgItem" data="{{...item}}"/>

模板

is可以动态决定具体需要渲染哪个模板

    <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>

引入

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，简言之就是 import 不具有递归的特性。

include

include 可以将目标文件中除了<template/>和<wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

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

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

WXSS

rpx

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

wxss的选择器

wxss支持类选择器，id选择器，元素选择器和伪元素选择器。

选择器权重选择器的叠加使用，其权重也相加

JavaScript

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。

模块化

小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。 B.js 引用模块A，并使用A暴露的multiplyBy2方法完成一个变量乘以 2 的操作

// moduleA.js
module.exports = function( value ){
  return value * 2;
}

// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

执行顺序

小程序的执行的入口文件是 app.js 。并且会根据其中 require 的模块顺序决定文件的运行顺序，当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行。

{
  "pages": [
    "pages/index/index",
    "pages/log/log",
    "pages/result/result"
  ],
  "window": {}
}

// app.js
console.log('app.js')


// pages/index/index
console.log('pages/index/index')


// pages/log/log
console.log('pages/log/log')


// pages/result/result
console.log('pages/result/result')


以上文件执行后输出的结果如下：
app.js

pages/index/index

pages/log/log

pages/result/result

作用域

同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似。

在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数不会互相影响，如代码所示。代码清单2-36 在脚本 a.js 中定义局部变量

    // a.js
    // 定义局部变量
    var localValue = 'a'


    在脚本 b.js 中无法访问 a.js 定义的变量
    // b.js
    // 定义局部变量
    console.log(localValue) // 触发一个错误 b.js中无法访问 a.js 中定义的变量

当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的，如代码所示。

在脚本 a.js 中设置全局变量
// a.js
// 获取全局变量
var global = getApp()
global.globalValue = 'globalValue'


 在脚本 b.js 中访问 a.js 定义的全局变量
// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue

需要注意的是，上述示例只有在 a.js 比 b.js 先执行才有效，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置，如代码所示。

定义全局变量
// app.js
App({
  globalData: 1
})


获取以及修改 global 变量的方法
// a.js
// 局部变量
var localValue = 'a'

// 获取 global 变量
var app = getApp()

// 修改 global 变量
app.globalData++  // 执行后 globalData 数值为 2

获取 global 变量

// b.js
// 定义另外的局部变量，并不会影响 a.js 中文件变量
var localValue = 'b'

// 如果先执行了 a.js 这里的输出应该是 2
console.log(getApp().globalData)