小程序系列 - 1.小程序组成

# js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    time: (new Date()).toString()
  },
})
​
# wxml
    <text>当前时间：{{time}} </text>
​
​
# 属性动态改变
    <text data-test="{{test}}"> hello world</text>
##需要注意的是变量名是大小写敏感的，也就是说 {{name}} 和 {{Name}} 是两个不同的变量。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
​
#可以控制渲染内容

#定义
    在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
    
    
#格式
    <view wx:for="{{array}}">  //array  是在js data 中定义的数组
        {{index}}: {{item.message}}
    </view>
​
#  wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：
    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
         {{idx}}: {{itemName.message}}
    </view> 
​
## wx:key 绑定 key  代表唯一标识

#定义模板  name 属性为模板的名字
​
    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
​
​
#使用模板
    #使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
    <template is="msgItem" data="{{...item}}"/>
    
        就会显示
            <!-- 输出
            0: this is a template Time: 2016-06-18
            -->

#在 item.wxml 中定义了一个叫 item的 template ：
<template name="item">
  <text>{{text}}</text>
</template>
​
#在 index.wxml 中引用了 item.wxml，就可以使用 item模板：
<import src="item.wxml"/> 引用了 item.wxml中 指定的模板
<template is="item" data="{{text: 'forbar'}}"/>
    
    
    
## 注意
 import 有作用域的概念，C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template 
 
 
 ## 引入完模板，直接用is 只使用模板
    <import src="b.wxml"/> #导入模板
    <template is="B"/>  # 使用模板
​

<include src="header.wxml"/>
​
<view> body </view>
​
<include src="footer.wxml"/>

@import './test_0.wxss'

<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>
​
# 小程序支持动态更新内联样式：
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

// moduleA.js
module.exports = function( value ){
  return value * 2;
}
​
​
​
// B.js
​
// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)
​
​
​

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行。

a.js 不可以直接访问 b.js 中的局部变量；
#使用全局变量，可以通过全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的
​
// a.js
// 获取全局变量
var global = getApp()
global.globalValue = 'globalValue'
​
​
// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue
​
​
​
​
#只有在 a.js 比 b.js 先执行才有效，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置
​
​
// app.js
App({
  globalData: 1
})
​
​
​
// a.js
// 局部变量
var localValue = 'a'
​
// 获取 global 变量
var app = getApp()
​
// 修改 global 变量
app.globalData++  // 执行后 globalData 数值为 2
​
​
​