这篇博客主要介绍小程序入门常见，前提是有web或者HTML开发经验，一眼就能学会的。

##总纲：
1.入门目录配置说明
2.小程序头部底部tabBar设置
3.常用轮播效果和功能介绍
4.事件绑定和数据绑定
5.列表渲染

##一、基本目录配置
index.wxml =index .html，是页面内容
index.wxss =index .css，是css样式表
根目录app.json为全局配置文件，配置窗口颜色，底部tab，页面文件路径，网络超时时间。
如果需要新增page里面的页面，直接在app.json中写入，可以直接生成该页面的文件夹，四个文件一起生成，方便快捷。
项目根目录app.js中App()用来注册小程序可指定其生命周期。
css写法都一样
布局方面不同之处，
视图容器：view = div (相当于块级元素)
文本text = span (相当于行内元素)
图片image = img
滚动和轮播组件：swiper/scroll-view
页面链接：navigator *相当于a标签
js：
小程序中每个页面的作用域各自独立，支持模块化。且小程序框架不是运行在浏览器中，无法获取document，window 。
应该是引不了第三方插件，但是一些常用的组件比如轮播地图客服绘图小程序都已经实现好了拿来用就行。
最好不要在小程序里用jquery的思路直接操作dom。
渲染层可加入事件绑定 bindtap类似onclick ,在Page()里写相应的事件处理函数。
直接修改 this.data 而不调用 this.setData 无法改变页面的状态。
AppSecret不能放在前端代码里。

##二、头部底部设置
底部tabBer
根目录app.json

"tabBar": {
        "color": "#999",// tab 上的文字默认颜色 
        "selectedColor": "#8d80ea", //tab 上的文字选中时的颜色 
        "backgroundColor": "#fff",// tab 的背景色 
        "borderStyle": "gray",//tabbar上边框的颜色， 仅支持 black/white 
        "position": "bottom",// 可选值 bottom、top 
        "list": [//tab 的列表 
            {
                "pagePath": "pages/index/index",// 页面路径，必须在 pages 中先定义 
                "iconPath": "resource/page.jpg",//图片路径 
                "selectedIconPath": "resource/page-sel.jpg",//选中时的图片路径 
                "text": "首页"
            },
            {
                "pagePath": "pages/user/user",
                "iconPath": "resource/me.jpg",
                "selectedIconPath": "resource/me-sel.jpg",
                "text": "我的"
            }
        ]
    }

头部全部配置在window中。

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",// 导航背景颜色
    "navigationBarTextStyle": "black",// 导航栏标题颜色，仅支持 black/white 
    "navigationBarTitleText": "微信接口功能演示",// 导航栏标题文字内容 
    "backgroundColor": "#eeeeee",// 窗口的背景色 
    "backgroundTextStyle": "light"
  }
}

##三、轮播介绍

轮播和HTML轮播一致，不同的是它适用框架来写。引入swiper组件更为简便。

//index.wxml
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
//index.js
Page({
  data: {
    imgUrls: [ //存储图片
        \'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg\',
        \'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg\',
        \'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg\'
    ],
    indicatorDots: true,// 是否显示面板指示点
    autoplay: true,// 自动切换
    interval: 5000,// 自动切换间隔
    duration: 1000 //滑动动画时长
  }
})

##四、事件绑定那个数据绑定

事件绑定
bindtap类似onclick，catchtap与bindtap相比可以阻止事件冒泡

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

bindtap 当用户点击该位置就会在该页面对应的Page中找到该bindtap的处理函数clickMe。

Page({
  data: {
    msg: \'Hello World\'
  },
  clickMe: function() {
    this.setData({ 
    msg:msg
    })
  }
})

要注意bindtap不可写成bindtap()
相应的事件处理函数接受参数event

• 其中event.target为触发事件源组件
  event.currentTarget为触发事件当前组件
  组件中可以定义数据通过事件传递给SERVICE，以data-开头
  处理函数中获取：event.currentTarget.dataset

数据绑定

页面内的内容

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

在JS的data中配置

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

在数组中获取数据

<view class="items" wx:for="{{array}}" wx:key="" wx:for-item="item"  data-code="{{item.code}}" data-text="{{item.text}}" >
  <image class="item-img" mode="aspectFit" src="{{item.src}}" ></image>
  <view class="item-text" >{{item.text}}</view>
</view>

列表内容循环**{{array}}，数据默认变量名字定义为item**，以下可以直接用item.XX来写入。例如图片用**{{item.src}}引入，文本用{{item.text}}**来插入

##五、列表渲染

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 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

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

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

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

##以上内容来自于微信小程序官方开发文档，经过个人整理后写入。
后续第二篇：https://mp.csdn.net/mdeditor/85258021#