微信小程序开发系列二：微信小程序的视图设计

你们若是跟着我第一篇文章 微信小程序开发系列一：微信小程序的申请和开发环境的搭建 一块儿动手，那么微信小程序的开发环境必定搭好了。效果就是能把该小程序的体验版以二维码的方式发送给其余朋友使用。

这个系列接下来的文章咱们就来研究使用微信开发者工具自动生成的这个小程序的实现文件。本文以小程序的视图设计为主，就是下图所示pages/index目录里的index.wxml文件。

个人平常工做是用一个叫作UI5的前端框架作前端开发，恰好这个框架也支持建立xml格式的视图(UI), 和微信小程序的wxml很是类似。

作过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>

下面逐一解释每行代码。

第二行：<view class="container"> 声明了一个视图元素，css类型为container。这个container类是微信小程序自带的，若是删除，小程序视图位置会乱掉，参考我下面的测试：

因此须要保留。

第三行： <view class="userinfo"> view元素能够嵌套，至关于原生HTML里的div元素。此处定义了另外一个view元素，css类为userinfo。这个css类不是微信提供的，而是咱们本身开发的，位于文件index.wxss里：

第四行：

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>

定义了一个按钮，标签为“获取头像昵称”。

这个按钮仅当表达式!hasUserInfo && canIUse为true时才显示。

button是微信小程序框架提供的组件，组件是视图层的基本组成单元，自带一些功能与微信风格的样式。 注意这里的button标签并非HTML原生的标签。

在微信官网上能够查询组件的API：

https://developers.weixin.qq.com/miniprogram/dev/component/

下面这两个属性的含义：

open-type="getUserInfo": 点了这个按钮以后，会自动取当前点击了该按钮的微信用户的明细数据

bindgetuserinfo="jerry_getUserInfo": 当用户数据成功取回来以后，执行咱们本身开发的回调函数jerry_getUserInfo, 该函数定义在小程序index/index.js里。

第五行到第八行：

<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上。

咱们能够直接在手机上打开微信小程序的console页面，从而查看当前视图绑定的数据模型userInfo的明细，其中userInfo.nickName包含的值以下：

第11行：<text class="user-motto">{{motto}}</text>

纯文本元素，显示的文本绑定到数据模型motto上。这个模型字段motto硬编码成Hello World，因此咱们最后在小程序上看到显示的“Hello World"。

这篇文章即整个微信小程序开发系列的第二篇到此结束。下一篇文章我会继续讲解index.js里的代码含义。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: