微信小程序开发系列——4.小程序视图页面基础知识

Posted 2022-11-21 童凌

摘要：本文介绍了小程序的使用的前端语言，以及小程序开发过程中需要知道的页面基础知识。

1. 介绍

搭建后端服务器完毕以后，我们接下来准备小程序前端页面的基础知识。

由于微信前后端是分离的，我们开发时一般可以使用分块开发的模式，即前端和后端代码分离，使用javascript编写数据绑定和相关通信代码。由于微信整个框架只有两层：视图层和逻辑层。因此很明显可以看出，视图层的大部分内容为前端页面展示代码，而逻辑层处理前后端的交互。因此，大部分的功能属于比较简单的功能，可以先在前端页面上预留好相应的接口，在完成视图开发以后，继续编写与后端服务器通信的代码。简而言之，表示如下：

编号	运行位置	框架	使用的主要语言	功能
1	手机客户端	视图层	WXML, WXSS 框架专用语言	微信前端页面展示
2	手机客户端	逻辑层	运行在 JsCore 内核中的 JavaScript	业务逻辑处理
3	后端服务器	后端服务	Java, Python, php, Node.js 等后端语言	提供数据、服务、事件响应等

只要把这三个层级的所有代码编写好，就能完成一个完整的小程序应用，当然，每一块框架的内容想要掌握核心还是很难的。不过没关系，我们要求不高，凭借以前的开发经验，我想还是能完成这个任务的！

千里之行，始于足下，我们今天来搞定第一块视图层的基础知识。

2.文件结构

通常来说，一个完整的微信小程序文件结构目录是这样的：

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件类型	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序的css样式表

每个单独的小程序页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

除此以外，utils.js为自行定义的function, 自行编写的公共函数可以放在这个文件中，然后在每个单独页面的.js文件中，使用require()引用。如果不需要这些一些函数的功能，可以把util.js这个文件删除。

以上就是小程序运行所必须的所有组件。具体的内容，根据详细的开发框架，完成需要制作的程序即可。为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。

3. 深入理解视图层的功能

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层，也就是说：

视图层元素	必填	作用
wxml	是	是视图层的基本语言
组件	是	由wxml编写成，实现的基本视图元素
wxss	否	与css类似，控制每个组件的样式

4. wxml 功能

数据绑定

首先，在每个页面单独的js文件中Page( data: )中，在data的中括号内定义变量名，在wxml中，用双大括号引用该变量，可以完成视图层和特定数据绑定的功能。

//test.js
Page(

  data: 
      message: 'MINA!'
    
  )

//test.wxml
<view> hello world message! </view>

更多知识请看官方文档wxml的介绍。

5. wxss功能

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者， WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。

在这里要介绍一个rpx的概念，rpx（responsive pixel）是为了应对不同手机长宽比不同而提出的响应式布局的解决方案，使用rpx作为组件长度和宽度的单位，可以根据手机屏幕宽度进行自适应。无论手机尺寸为多少，总是规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

更多wxss的知识，请看关于wxss官方文档的介绍。

5.组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件？

组件是视图层的基本组成单元。
组件自带一些功能与微信风格的相似的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

简单来说，组件就是写在wxml中的一系列标签，原来html中使用的 <div> <script type="math/tex" id="MathJax-Element-1">

</script> <p> <script type="math/tex" id="MathJax-Element-2">

</script>等标签，用另外的名字来替代，以适应微信小程序中的开发风格。

基础组件分为以下七大类：

1. 视图容器

组件名	说明
view	视图容器
scroll-view	滚动视图容器
swiper	滑块视图容器

2. 基础内容

组件名	说明
icon	图标
text	文字
progress	进度条

3. 表单

组件名	说明
button	按钮
form	表单
input	输入框
checkbox	多项选择器
radio	单项选择器
picker	列表选择器
picker-view	内嵌列表选择器
slider	滚动选择器
switch	开关选择器
label	标签

4. 导航

组件名	说明
navigator	导航

5. 多媒体

组件名	说明
audio	音频
image	图片
video	视频

6.地图

组件名	说明
map	地图

7. 画布

组件名	说明
canvas	画布

8. 客服会话

组件名	说明
contact-button	进入客服会话按钮

更多关于组件的知识，点这里看官方文档的介绍。

好啦，说了这么多，关于小程序视图页面的基础知识想必也学得差不多了。如果有前端基础的话，只要找几个现有的例子稍作练习，这方面的知识很快就会掌握的。