说明

  本章节将以一个具体的小程序界面为例，介绍前端页面开发的知识和技巧，前面几章讲过的内容将不再赘述。本文章转自NanDoDu。

绘制界面原型

  在绘制界面原型之前，我们需要先以文档的形式，将页面功能点陈列出来，此处省略这一步骤，直接进入界面原型设计的讲解。

绘制工具

  界面原型设计的工具因人而异，我采用的是Photoshop，特点就是麻烦，对，因为当时不知道墨刀之类的专业界面原型设计工具。

绘制要点（偏向于Ps）

  • 界面原型设计力求一步到位（否则就可能像我一样，反反复复重写.wxss文件）

  • 多参考好的界面设计，集大成

  • Ps一定要保存原有图层

  • Ps导出.png图片时，如果是对已有图案的修改，直接覆盖，避免同类图片冗余

  • 大量的矢量图标都不需要自己绘制（这也是血的教训，自己画的图标又不标准又耗时），登录 https://www.iconfont.cn/ 进行搜索下载

  • 一般的界面设计都能通过编程实现，只有难易之分，所以设计时不要顾虑太多后期的实现策略（但是动态背景或者听起来就比较高级的还是先放一放，开发前期还是着力搭建框架）

  • 界面原型设计的画布采用与微信开发小程序预览界面相同像素大小，对于之后的编程只有好处没有坏处（否则你就只能像我一样，疯狂修改.wxss里的数据，一次次地真机调试，浪费了大量时间）

界面前端编程

  新建界面的要点在上一章已经讲得很清楚，我们从已经初始化页面配置开始讲起。

设置页面背景

1. 修改背景颜色

  小程序页面默认背景颜色是白色，如果我们要改变当前页面的背景色，打开newpage.wxss进行修改：

1
2
3
page {
    background-color: whitesmoke;
}

  小程序支持两种颜色代码，一种是图示的颜色英文名称，另一种是十六进制代码，使用Ps的同学可以直接在Ps调色板中获取到所需颜色的十六进制代码。

2. 修改背景图片

  小程序背景图片的添加有些特殊，本地的图片一般是不能直接作为背景图片，当我们添加了本地图片作为背景时，图片无法显示，以及会出现如下报错：

1
pages/newpage/newpage.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96

  对于这种情况，最好的解决办法是将本地图片上传到oss，获取图片的url，写入.wxss中，但是如果我们坚持使用本地图片，则需要在.js文件中输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//把base64转换成图片
  getBase64ImageUrl(data) {
    // 获取到base64Data
    var base64Data = data;
    /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
    base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
    /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
    const base64ImgUrl = "data:image/png;base64," + base64Data;
    /// 刷新数据
    // console.log(base64ImgUrl)
    this.setData({
      baseImgUrl:base64ImgUrl
    })
  }

  这样就能将我们的本地图片转化成base64，判断成功的依据是，重新编译时出现弹窗，选中我们的背景图片，系统会自动生成一段编码（非常非常长），这时将我们原背景图片地址替换成这段编码，即可显示在我们的小程序中。（但是我后来在用的时候发现有的时候没有弹窗也没有报错，实在是不推荐这种方式）

3. 设置多层次的页面背景

  有时，我们并不想页面呈现一个简单的图片，而是希望多种图片叠加在一起，形成组合样式，那么我们将要用到view这一工具来实现我们的想法，在.wxml文件中输入下述代码：

1
2
3
4
<view class = 'page'>
  <view class = 'image1'></view>
  <view class = 'image2'></view>
</view>

  这里我们只是简单构建了三个view，外层view和内层的两个view，内层的两个view用来装我们的图片，外层view用来控制内层view的分布。在.wxss文件中输入下述代码：

1
2
3
4
5
6
7
8
9
10
11
.image1 {
  width: 750rpx;
  height: 400rpx;
  background-color: blue;
}

.image2 {
  width: 750rpx;
  height: 400rpx;
  background-color: red;
}

  这时我们会看到背景中出现一蓝一红矩形框，两个矩形框大小相同，纵向分布。对于两个矩形的布局可参考前一章讲的弹性盒子布局，而如果我们想要实现下方的红色矩形框覆盖一部分上方的蓝色矩形框，可通过margin这一利器实现：

1
2
3
4
5
6
7
8
9
10
11
12
.image1 {
  width: 750rpx;
  height: 400rpx;
  background-color: blue;
}

.image2 {
  width: 750rpx;
  height: 400rpx;
  background-color: red;
  margin-top: -100rpx;
}

  我们将会看到红色矩形框向上移动了100rpx。对于参数的调节，我建议初学者多调多试，在不了解页面属性的时候，通过简单的改变数值来得到自己想要的效果。

这里需要特别强调的一点是，我们在页面布局时，如果是纵向布局，我们应采用横向开发，即调整好当前行的内容及样式后，再进行下一行的开发。我踩的一个大坑就是急于布局，将纵向框架搭好然后填充内容，结果填充的时候发现预留尺寸出现问题，当然如果前期界面原型设计准确的话，也可以采用先搭整体框架再开发的方法。

设置元素样式

1. 元素样式基本配置

  为什么这一章会单独提一下这个问题，是因为我在开发过程中总是会无意地漏掉一些元素的基本属性配置，导致出现不期的效果，而迟迟找不到原因，浪费了很多时间。对于内层view元素（即view中不再嵌套view），我们通常需要如下样式：

1
2
3
4
5
6
7
8
9
.image2 {
  width: 200rpx;
  height: 400rpx;
  background-color: red;
  margin-top: -100rpx;
  margin-left: 100rpx;
  display: block;
  border-radius: 20rpx;
}

  尤其需要注意我们要优先设置元素的宽和高，比如我前面举的红蓝矩形块的例子，如果不设置宽高，就会看不到颜色块。另外，对于文字以及图片独有的样式配置，不在此赘述，有需要的样式在网上查找资料就好了。而对于外层view元素（即view中嵌套view），我们通常需要如下样式：

1
2
3
4
5
6
7
8
.pageid {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  overflow: hidden;  // 设置图片样式时需注意
}

  尤其需要注意，这些属性的配置我虽然在上一章写过，但是整体大小（height）的配置仍然是很容易被忽略掉的。

2. 美化元素样式

  元素样式的美化通常是通过设置css属性，但对于初学者而言，对css属性设置了解较少，以及对多种属性搭配的效果把握不好，因此我建议很多看似需要多重view嵌套的部分可以直接用Ps封装代替。

  比如我们需要实现一个按钮，那么按钮大概有以下几种样式需要实现：未按按钮时按钮的文字样式和背景图片样式，按了按钮之后的文字样式和背景图片样式，文字样式和背景图片样式的布局。那么对于按钮这种固定样式，我们最好采用贴图的方式，在Ps中直接绘制未按和已按的两种按钮样式，并保留图片原格式以及导出.png文件，加载到小程序页面中。注意，小程序是支持image标签直接引用本地图片的，这一点要和背景图片区分。

  再比如我们要实现某种特殊字体，导入字体包固然是一种方式，但如果是仅改变标题或者一些固定出现的字的话，也可以考虑采用Ps贴图的方式快速实现。

3. 元素显示与隐藏

  元素的显示与隐藏是小程序前端开发的核心知识，对于初学者的开发很有用处。我们在实现页面跳转的时候，很多时候是当前页面跳到当前页面，也就是说，我们只希望当前页面的一些部分发生变化，而页面本身还是原来的页面。那此时我们需要搞明白变化的到底是什么，其实是view的替换。举前面红蓝矩形块的例子，我们希望点击红色矩形块，下方的蓝色矩形块变成一个绿色的圆。那么我们其实原本就有三个view元素，红色矩形块、蓝色矩形块、绿色的圆，只是我们未点击红色矩形块时，蓝色矩形块显示，绿色圆隐藏；点击之后，蓝色矩形块隐藏，绿色圆显示。关于这一块内容，我将在以后的章节中详细讲解，此处我只给出网上查找的实例代码，初学者可以通过模仿代码结构来实现自己想要的效果：

.wxml文件

1
2
3
4
<view class="switch-type">
    <view class="btn {{currentSelectTripType == 'pinche' ? 'active' : ''}}" bindtap='selectedPinche' data-id='pinche'>拼车</view>
    <view class="btn {{currentSelectTripType == 'baoche' ? 'active' : ''}}" bindtap='selectedBaoche' data-id='baoche'>包车</view>
</view>

.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page({
  data: {
    currentSelectTripType: 'pinche',
  },
  // 更新data 切换选中状态
  selectedPinche: function (e) {
    this.setData({
      currentSelectTripType: e.currentTarget.dataset.id
    })
  },
  selectedBaoche: function(e) {
    this.setData({
      currentSelectTripType: e.currentTarget.dataset.id
    })
  },
})

.wxss文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.switch-type {
  display: flex;
}
.switch-type .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.switch-type .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.switch-type .btn {
  background: #dfdfdf;
  padding: 10rpx 40rpx;
}
.switch-type .btn.active {
  border: 2rpx solid #007bff;
  background: #fff;
}

原文 https://www.shiqidu.com/d/469

转载地址 http://nandodu.cn