最全教程：微信小程序开发入门详解
步骤1：微信小程序的申请和开发环境的搭建
激活之后，就可以进入小程序主体信息登记页面了。这里需要使用身份证号码和手机验证码进行登记。
大家可以把它当成是一个集成开发环境(IDE).
自动创建好的小程序如下图所示，界面显示就是一个简单的 Hello World 文本。
我们点击 上传 按钮：
随便维护一个版本号，比如 1.0.0, 然后点击 上传。
会生成一个体验版的二维码，这时发送给你的朋友，就可以使用这个小程序了。
当您的朋友在手机上扫描该二维码，会看到如下界面：该小程序标注了体验版的提示：
做过 JSP 开发的朋友们，可以把 wxml 类比成 JSP 文件。
wxml 源代码：
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{
{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{
{motto}}</text>
</view>
</view>
下面逐一解释每行代码。
所以需要保留。
第四行：
<button wx:if="{ {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>
定义了一个按钮，标签为 获取头像昵称。
这个按钮仅当表达式 !hasUserInfo && canIUse 为 true 时才显示。
下面这两个属性的含义：
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
这里定义了一个 block 区域，有两个 UI 元素组成：image 和 text.
对 image 元素，bindtap="bindViewTap", 意思是一旦点击，执行我们在 index.js 里实现的事件处理函数 bindViewTap.
class="userinfo-avatar": userinfo-avatar 也是我们在 wxss 里自定义的 css 类。 src="{ {userInfo.avatarUrl}}": 该 image 的 src 属性绑定到数据模型 userInfo 的字段 avatarUrl 上。数据类型 userInfo 是 index.js 里创建的，绑定到当前的视图上。 而另一个文本元素 text 显示的文本绑定到 userInfo.nickName 上。
这里定义了一个 block 区域，有两个 UI 元素组成：image 和 text.
对 image 元素，bindtap="bindViewTap", 意思是一旦点击，执行我们在 index.js 里实现的事件处理函数 bindViewTap.
class="userinfo-avatar": userinfo-avatar 也是我们在 wxss 里自定义的 css 类。 src="{ {userInfo.avatarUrl}}": 该 image 的 src 属性绑定到数据模型 userInfo 的字段 avatarUrl 上。数据类型 userInfo 是 index.js 里创建的，绑定到当前的视图上。 而另一个文本元素 text 显示的文本绑定到 userInfo.nickName 上。