微信小程序开发系列二:微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用。
这个系列接下来的文章我们就来研究使用微信开发者工具自动生成的这个小程序的实现文件。本文以小程序的视图设计为主,就是下图所示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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
- Maven(六)之依赖管理
- 细说log4j
- SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoade
- TCP/IP(一)之开启计算机网络之路
- JSON入门指南--客户端处理JSON
- mysql5.7 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
- TCP/IP中你不得不知的十大秘密
- Java Web开发学习之路2012版
- TortoiseSVN客户端使用的2个配置问题
- JavaWeb(二)会话管理之细说cookie与session
- 概率论09 期望
- Javascript中数组的sort()和reverse()方法
- CentOS6.5开放端口,配置防火墙
- JavaWeb(一)Servlet中乱码解决与转发和重定向的区别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现签名涂鸦手写板
- Android 开发使用Activity实现加载等待界面功能示例
- 详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
- Android开发自定义控件之折线图实现方法详解
- Android Studio实现长方体表面积计算器
- android studio实现简单的计算器功能
- Android小程序实现个人信息管理系统
- Flutter 使用Navigator进行局部跳转页面的方法
- Android小程序实现简易QQ界面
- Android小程序实现音乐播放列表
- 详解Android10的分区存储机制(Scoped Storage)适配教程
- Android自定义View实现可拖拽缩放的矩形框
- Android实现掷骰子效果
- Android实现侧滑菜单DrawerLayout
- Android :okhttp+Springmvc文件解析器实现android向服务器上传照片