微 信小程序开发| “朝闻道”知识分享大赛

[Thomas Wade]

这是我参加朝闻道知识分享大赛的104 篇文章

上述代码用到了以下3个小程序组件： <image>组件：用于显示图片，需要配套src属性来指定图片来源（因本次开发需要用到图片，找一张矩形图片logo.png用于制作头像，将其放到根目录下的images文件夹中）； <text>组件：用于显示文本，可以直接将文本放在组件的首尾标签之间； <button>组件：用于显示按钮，可以直接将按钮上的文字放在组件的首尾标签之间。

我们对上述代码进行修改，加入图片素材和文字显示，修改后的代码如下

 

 此时已经可以在画面中看到图片、文字和按钮了，还需要对它们进行布局和样式的设置使页面看起来更美观。

我们使用小程序容器组件<view>来把刚才这三个组件装进去以便可以垂直布局，代码修改如下：

 然后打开index.wxss来规定容器组件view的样式：

 

其中第1、2行代码是wxss页面特有的注释效果，以/*开头且以*/结尾。 和wxml页面一样，注释的快捷键为Ctrl+/，用于将指定行添加或去掉注释效果、。

容器组件<view>的具体样式解释如下：

height：高度，取值为100视窗高度，即自适应整个手机页面高度；

background-color：背景颜色为浅蓝色；

display：布局效果为弹性布局，方便里面的组件快速实现横着或竖着排列用的；

flex-direction：弹性布局大方向为column竖着排列；

align-items：相反水平方向的对齐方式为居中显示；

justify-content：调整内容为组件上下之间留有相等的空间环绕，不要都挤在一起。

 

继续修改index.wxss代码，添加内容如下：

 注：字体颜色color和背景颜色background-color均可以有多种形式的取值方式，以红色为例，既可以用十六进制编码表示为#ff0000或#f00，也可以用英文单词表示为red，还可以用RGB十进制编码表示为rgb(255,0,0)。更多颜色取值可参考本书附录C 小程序预定颜色。

3. 逻辑实现

为了体验页面中按钮的点击效果，我们这里为其制作一个简单的点击事件：点击按钮后弹出对话框显示“你好“。 首先修改index.wxml中关于按钮组件button的部分，为其追加bindtap属性用于绑定点击事件。相关代码如下：

 <!-- 3.按钮 -->

  <button bindtap="sayHello" >点击获取个人信息</button

取值sayHello为自定义函数，表示当点击按钮时会执行该函数内容。

此时还没有写sayHello这个函数的具体内容，因此点击按钮后会看到Console控制台提示如下：

 看到这个提示至少说明按钮的点击事件已经触发成功了，接下来我们需要去index.js文件中编写该自定义函数sayHello。

index.js文件代码添加如下：

 其中用到了wx.showToast()方法用于显示对话框，其中参数title的取值会显示对话框文字；duration的取值为该对话框的停留时间（单位：毫秒），当前表示5秒后对话框自动关闭。