|
|
|
|
移动端

1.6.3 猜拳游戏的布局

《微信小程序开发入门精要》第1章微信小程序入门,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程。本节为大家介绍猜拳游戏的布局。

作者:李宁来源:人民邮电出版社|2017-12-13 15:03

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

1.6.3 猜拳游戏的布局

进入小程序IDE,单击IDE左上角的“编辑”选项(如图1-13所示),开始编辑代码。

猜拳游戏的布局非常简单,如图1-14所示。

猜拳游戏的布局是纵向显示了3个组件:文本组件(text)、图像组件(image)和按钮组件(button)。在创建小程序工程时,默认建立了两个页面:index和logs,如图1-15所示。我们不需要考虑logs,在这个例子中只修改和index页面相关的文件。index是小程序第一个显示的页面。

猜拳游戏的布局是纵向显示了3个组件:文本组件(text)、图像组件(image)和按钮组件(button)。在创建小程序工程时,默认建立了两个页面:index和logs,如图1-15所示。我们不需要考虑logs,在这个例子中只修改和index页面相关的文件。index是小程序第一个显示的页面。

其中,index.wxml文件是index页面的布局文件,现在打开该文件,并按下面的内容修改代码。

  1. <!--index.wxml--> 
  2. <view class="container"> 
  3. <text class="finger_guessing">猜拳游戏</text> 
  4. <view class="userinfo"> 
  5. <image class="userinfo-avatar" src="{{imagePath}}" background-size="cover"/> 
  6. <button bindtap="guess">{{title}}</button> 
  7. </view> 
  8. </view> 

在这段代码中,image和button组件的内容都需要动态改变,所以image组件的src属性和button组件的文本值(夹在<button>和</button>之间的部分)都分别与一个变量绑定。这是小程序的一个重要特性(和React Native完全相同)。在改变组件的属性值时,并不需要直接获取该组件的实例,而只需将该属性与某个同类型的变量绑定,一旦该变量的值改变,属性值也就会随之改变了。绑定变量的格式是“{{变量名}}”。改变了的定义和初始化部分,在下一节会详细介绍。

我们发现,就算按前面的布局,仍然不能像图1-14所示那样摆放组件,这是因为还需要调整下面代码的样式(index.wxss文件)。

  1. /**index.wxss**/  
  2. .userinfo {  
  3. display: flex;  
  4. flex-direction: column;  
  5. align-items:center;  
  6. margin-top: 50px;  
  7. }  
  8. .userinfo-avatar {  
  9. width: 500rpx;  
  10. height: 500rpx;  
  11. margin: 40rpx;  
  12. }  
  13. .userinfo-nickname {  
  14. color: #aaa;  
  15. }  
  16. .finger_guessing {  
  17. color: #F00;  
  18. font-size: 30px;  
  19. margin-top: 20px;  

前面的布局代码主要调整了userinfo-avatar的宽度和高度,让图像显示得更大一些。

最后,还需要修改app.wxss文件的代码,将padding属性的值改成50rpx 0,代码如下:

  1. /**app.wxss**/  
  2. .container {  
  3. height: 100%;  
  4. display: flex;  
  5. flex-direction: column;  
  6. align-items: center;  
  7. justify-content: space-between;  
  8. padding: 50rpx 0;  
  9. box-sizing: border-box;  

当然,现在可能仍然无法显示图像,因为还没有设置imagePath变量,而且还没有把图像放到工程目录中。现在读者可以到网上找3张图片,分别是剪子、石头和布,当然,也可以用本例提供的图像,并在小程序工程根目录建立一个images目录,将这3个图像文件放到该目录中。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Linux标准教程

本书以Linux Redhat 9.0中文版为基础编写,从易用性和实用性角度出发主要介绍Linux Redhat 9.0中文版的应用知识,通过本书的学习,相信初中...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊