小程序介绍

1. 我对小程序的理解
2. 小程序基本语法介绍
3. 实现一个简单的小程序

1.我对小程序的理解

• 小程序是有别于传统web、h5、app以及微信公众号的新的一种应用形式，由微信团队于今年开发，用张小龙自己的话来说：

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

• 与其它类型应用的区别
  • 和web相比，首先入口不同，web使用url或者搜索引擎搜索，另外web回访可能通过收藏和搜索引擎
  • 和H5相比，和web类似
  • 和APP相比 ，首先学习、和开发成本比较小，只需要一些css、js技能就能快速开发。另外需要下载和安装，不想用了还需要卸载，小程序就没有这方面的问题，扫码即可使用
  • 和微信公众号相比 入口不同，需要关注以及分享的文章
• 优缺点
  • 优点：开发成本低，简单的编码就可以实现原生的用户体验
  • 缺点：比较封闭的系统，导流能力较弱
• 预计2017年1月9日上线
• 我的一个疑问：“提高用户效率的工具、用完即走”的理念，h5就能解决，小程序能实现的、不能实现的，h5都能实现，甚至还更轻量、开发效率还更快，这种情况下开发小程序有什么好处呢？

2.小程序的基本语法你介绍

小程序的语法非常简单，只要有一点前端知识就可以快速学会。另外 ，小程序语法和vue又相当类似，但是又比vue精简一些

• 数据绑定

模板：
  <view>{{ message }}</view>

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

• 条件渲染

模板：
  <view>
    <view wx:if="{{show}}">
      {{message}}
    </view>
    <view wx:else>
      不显示内容
    </view>
  </view>

  js：
  Page({ 
    data: { 
      show:true,
      message: 'Hello MINA!' 
    }
  })

• 列表渲染

模板：
  <view>
    <view wx:for="{list}" wx:key="key">
      {{ item }}
    </view>
  </view>

  js：
  Page({ 
    data: { 
      list:[
        'hellow world','maybe next time','hover your wings'
      ],
      show:true,
      message: 'Hello MINA!' 
    }
  })

• 与用户交互
  • 点击事件

模板
<view>
<text> you have clicked {{ times }} times</text>
<button bindtap='handle'>click me</button>
</view>
js:
Page({
data: {
times:0
},
handle(){
this.setData({
times:this.data.times+1
})
}
})
```

• 输入框事件

模板
<view>
<text> hello {{ content }}</text>
<button bindinput='handle'>click me</button>
</view>
js:
Page({
data: {
content:''
},
handle(e){
this.setData({
content:e.detail.value
})
}
})
```

3.实现一个简单的小程序