三分钟入门微信小程序

前言

这篇博客主要写给那些只接触过H5开发，只掌握了基本的 js 或 jq 开发模式的前端萌新。或者，对于一些想入手小程序又不想花太多时间去看小程序的大佬也有小小的帮助。话不多说，直接进入正题。

内容

1、学习原生小程序的开发，你需要准备什么？

• 在没有正式开始接触小程序开发之前，估计大多数人都在想，微信出来的东西，还要搞什么微信登录，注册小程序账号等等，肯定非常麻烦。那如果我告诉你，自己写一个Demo来玩，就像写一个HTML一样简单，你还会觉得麻烦吗？
• 试想一下，我们写HTML的时候需要什么知识和工具。无非就是css和js基础，布局就用html，另外需要一个开发工具而已。
• 如果你决定开始写一个小程序的Demo玩一下，那么请你只需要准备一样东西：
• 
• 另外，你需要有一定的HTML和CSS基础，甚至你可以不需要太多的JS知识就可以开始写一个Demo，不要害怕麻烦，也许你害怕的东西，可能正是你未来需要日夜相伴的朋友。请用交朋友的心态来认识微信小程序，如果不了解它，那么我将通过这篇微博介绍与我相伴两年多的朋友给你认识一下，如何？

2、像开发H5一样开发小程序，你还怕什么？

• 下面我将利用对比的形式来介绍入手微信小程序开发（入门级）和H5开发有多少你熟悉的东西。

	HTML+JS+CSS	Mini-Program	异同点
布局	HTML	WXML	两者都可以创建元素，有行内元素和块元素等相似点
样式	CSS	WXSS	CSS控制HTML元素的样式，WXSS控制WXML的样式
行为	JS	ES	为什么是ES，因为开发小程序你要摒弃操作DOM的旧习
请求数据	Ajax	wx.request	Ajax可以异步同步，wx.request只有异步

3、开始写你的第一个 Mini-Program

下面我将分别用微信开发者工具和HBuilder写一个Demo开始表演实际开发中H5开发和小程序开发惊人相似的地方：

Demo简介：监听输入框的内容，实时在另外一个元素内展示出来

• 分别用HTML和WXML实现

1. HTML最简实现方式，CSS，HTML，JS都写在同一个HTML文件中
   

2. 小程序端新建页面会创建四个同名不同后缀的文件分工处理，HTML也可以分工，但是需要因为，小程序端则不需要手动引入，可以认为他们本来就是一体的，密不可分的协作关系。

小程序端的布局，十分相似有没有？bindinput跟HTML的oninput一样，绑定监听事件

小程序端的样式控制，一毛一样，有没有

小程序端JS实现，写一个input方法，和HTML里的bindinput方法同名即可，我这里写的是bindinput="{{input}",故写了一个input方法去监听，拿到输入框的value，通过this.setDatag更新data里的text。那么，WXML里面的{{text}}，就可以实时展示变化的data里面的text

总结

各位同学，都学会了吗？原来写一个Demo如此简单！！！本人将会不定时更新一些实用经验，有兴趣的可以关注一下，方便交流探讨。