阅读 188

第三章:手把手,动手编写一个简单小程序(下)

作者:知晓云 - 小程序开发快人一步

界面美化与样式调整

在上一节,我们已经初步了解在小程序中增加视觉元素的方法。而在这一节,我们将会学习编写小程序的样式表,为我们的欢迎小程序「美化」一下。

修改元素属性

上一章中,我们已经初步掌握 WXSS 的语法。这次,我们就来尝试使用 WXSS,来调整文字和图片大小、颜色等等属性。

找到工程中 pages/welcome.wxss 文件并打开,我们就可以页面元素,进行调整。先从图片开始吧:

image{
  width: 150rpx;
  border-radius: 50%;
}

复制代码

将这段加进去并保存,可以看到图片的大小已经被调整,图片形状也变成圆形。

调整文字字号,也可以用同样的方法进行。

text{
  font-size: 64rpx;
}
复制代码

保存后,可以看到字号修改的结果。

调成元素排布

现在,我们的小程序已经有了初步形态,但它们的排布明显是不正常的。我们希望可以将视觉元素以一定方法进行排列,而不是现在这样被随意放置在屏幕上。

这时候,我们就需要用到 Flex。什么是 Flex 呢?它是 HTML 中被广泛应用的一种视觉元素排版、排布方法,能够灵活地根据我们所需,对页面视觉元素进行排布。

使用 Flex 之前,需要进行简单的声明。还记得我们在上一节中,为 元素「套」上的 吗?现在就要请它出场了。

view{
  display: flex;
}
复制代码

将它添加进 welcome.wxss 文件中并保存,我们就可以尽情使用 Flex 了。

首先,我们需要让视觉元素按照「从上至下」的顺序进行排列,需要用到 flex-direction 属性,将 中的视觉元素,按照纵向进行排列。

view{
  display: flex;
  flex-direction: column;
}
复制代码

接着,我们希望元素能够居中显示,这时候我们就需要用到 align-items 属性,它用于设定横向排版模式。将 align-items 值设为 center,就能让视觉元素居中显示。

view{
  display: flex;
  flex-direction: column;
  align-items: center;
}
复制代码

另外,我们希望元素可以均匀地排布在页面上,而不是像现在这样「挤」在界面顶部。这时,我们就需要用到 justify-content 属性了。

view{
 display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
复制代码

这次保存,我们发现小程序界面并没有变化。先别急,我们先为 指定一个高度试试看。

view{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 800rpx;
}
复制代码

保存后,我们就可以看到界面终于有了变化。

为什么为要为 指定高度呢?因为默认情况下, 的高度只会与其中包裹的元素高度一致,也就是其中的文字+图片的高度。

而为 添加高度后, 里的元素就会按照 justify-content: space-around; 属性的指示,让元素均匀地铺在整个固定高度了的 中。

除了这些属性之外,Flex 还有许多能定义的属性和值。你可以查阅相关资料,了解 Flex 的更多实用用法。

长度单位 RPX

也许你已经注意到,我们在 WXSS 中所用的长度单位并非 PX(Pixel,像素),而是 RPX。RPX 全称为 responsive pixel(直译为「动态像素」),它是微信提出的一种?元素计量单位。

在 RPX 中,所有手机的屏幕宽度都会被固定为 750 rpx,实际像素以宽度 750 rpx 为标准进行调整。开发者不需要关心用户使用什么设备,只需使用 rpx 单位定义宽度,微信就能在编译时自动根据屏幕尺寸来处理元素。

微信官方提供的最佳实践是,在小程序设计过程中,使用 iPhone 6 的屏幕尺寸作为设计稿标准。这样,开发者在开发过程中,只需直接对尺寸除以 2,就能正确地配置视觉元素的尺寸。

为小程序加入逻辑

现在,我们的小程序已经初具雏形。接下来,我们就要为它添加逻辑,让小程序可以读取用户的昵称和头像,直接放到小程序中,变成问候语。

了解小程序获取用户资料的机制

在小程序中获取用户资料,方法有些特殊。我们需要先在小程序中设置一个按钮,让用户点击;然后?建立一个函数,当用户点击该按钮的时候,这个函数将会接收用户资料。

不同于其他利用接口调用用户资料的做法,微信为小程序设计这样略显奇怪的步骤,是因为微信希望当用户主动要求的时候,小程序再去请求用户资料,避免出现「刚启动小程序就要求授权」的情况。

新建按钮元素

回到 index.wxml 文件。我们在文件中加入 < button > 元素,然后给按钮写一个引导文字。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
  <button>点击获取资料</button>
</view>
复制代码

保存后,我们可以看到按钮已经在界面上了。但是当我们点击它,小程序是不会有任何反应的,因为微信不知道我们需要获取用户资料,放入图片和文字中。

从微信获取用户资料

想让按钮可以获取用户资料,我们首先要让微信知道,当用户点击按钮时,微信需要将用户资料给我们。

这时,我们需要给 < button > 组件添加 open-type=getUserInfo 属性,用以声明按钮点击的事件是获取用户资料。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
  <button open-type='getUserInfo'>点击获取资料</button>
</view>
复制代码

接下来,我们就要正式用上 JS 文件,接收微信传给我们的数据。?

我们打开 welcome.js,可以看到微信已经自动为我们生成一些生命周期函数。我们可以直接删除其中自动生成的空白函数,只留下 Page() 一个函数。

// pages/welcome.js
Page({

})
复制代码

接下来,我们要新建一个接收用户资料的函数,名为 getProfile。当这个函数接收到用户资料后,就直接输出到控制台中。

// pages/welcome.js
Page({
  getProfile(res){
    console.log(res) // console.log() 函数可以将变量、数据,写入开发者工具的控制台中。
  }
})
复制代码

函数建好保存文件,我们还要回到 welcome.wxml 文件,继续修改按钮的代码,让微信将数据传入我们写好的函数中。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
  <button open-type='getUserInfo' bindgetuserinfo='getProfile'>点击获取资料</button>
</view>
复制代码

一切就绪!保存代码之后,我们在预览区尝试点击按钮。点击后,开发者工具会向我们请求授权。

点击「同意」,在调试器(开发者工具的右下角区域)的 Console 标签中,就可以看到我们已经成功获取用户数据。

可以看到,在这么多的数据中,微信将用户数据包裹在这个对象里的 detail.userInfo 中。尝试输出其中 detail.userInfo 的内容,就可以看到干净的用户资料了。

// pages/welcome.js
Page({
  getProfile(res){
    console.log(res.detail.userInfo)
  }
})
复制代码

将数据处理结果放到界面

接下来,我们就来尝试将小程序界面中原本的默认头像和欢迎语,替换为用户头像和昵称。

在小程序中,界面层(WXML)和逻辑层(JS)之间有一种特殊的数据交换方式,名为「数据绑定」。WXML 可以与 JS 中的特殊的变量进行绑定,当 JS 修改变量的时候,变化将会直接传入界面层。

在 JS 中,想要将数据放入可在界面层展示的变量,可以利用 Page() 对象本身含有的 setData() 函数。回到 welcome.js,就可以用 setData() 将用户数据写入变量。

// pages/welcome.js
Page({
  getProfile(res){
    this.setData({
      "profile": res.detail.userInfo
    })
  }
})
复制代码

wx.setData() 函数中,我们需要传入一个 JS 对象,其中以键值对的方式,设置所需的变量。本例中,我们将用户资料,直接写入到 profile 变量中。

运行一下代码,再点击一次按钮,我们发现「Console」控制台不再输出获取到的用户数据(因为 console.log() 函数已经被删除)。那么,我们怎么知道 setData() 写入成功与否呢?

点击调试器的「App Data」标签,我们可以看到页面对象 Page 中,所有的变量。尝试重新编译小程序,点击按钮再过一会,就会发现 profile 变量已经写入成功了。

接下来,我们需要在 WXML 文件中,?绑定这些变量,以便将用户资料显示在界面上。在 WXML 中,我们需要用到「双花括号」的语法,对 JS 中的变量进行绑定操作。「双花括号」不仅可以用在小程序的 组件中,任何可被自由插入字符串的位置都能使用。

<!--pages/welcome.wxml-->
<view>
  <text>{{ profile.nickName }}</text>
  <image src='{{ profile.avatarUrl }}' mode='widthFix'></image>
  <button open-type='getUserInfo' bindgetuserinfo='getProfile'>点击获取资料</button>
</view>
复制代码

重新编译小程序,再点击按钮,可以看到小程序已经成功展示用户昵称和头像。

设置资料缺失时的显示

到这里,小程序已经可以很好地实现功能,但我们依然需要进行额外优化。

例如,当用户刚启动小程序时,由于小程序没有获取到我们的资料,致使整个小程序页面会是空白一片。

接下来,我们就要着手继续优化小程序,为它设置「默认数据」。让小程序获取到资料前,显示一个默认的欢迎语和图片。

如果想要在页面加载时写入初始化数据,除了利用 setData() 函数之外,我们还可以直接建立 data 对象并写入数据。这样,在加载时,data 对象将会自动生效。

我们在 welcome.wxml 中,新增 data,并初始化 profile 对象。在 profile 对象中,我们可以写入一些初始数据。

// pages/welcome.js
Page({
  getProfile(res) {
    this.setData({
      "profile": res.detail.userInfo
    })
  },
  data:{
    "profile":{
      nickName: 'Hello World',
      "avatarUrl": '/image/avatar.jpg'
    }
  }
})

复制代码

保存代码并编译,就可以看到小程序刚启动时会自动载入初始数据。点击按钮,欢迎语和图片将会自动替换为用户资料。

相关阅读

第一章:一文了解小程序

第二章:手把手,动手编写一个简单小程序(上)

访问「知晓云」(cloud.minapp.com),学习更多小程序开发课程

关注下面的标签,发现更多相似文章
评论