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

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

 

 

这个系列接下来的文章我们就来研究使用微信开发者工具自动生成的这个小程序的实现文件。本文以小程序的视图设计为主，就是下图所示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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: