小程序开发如何跳转页面以及参数的传递与视图层显示

近在研究小程序开发，看了一些官网文档，我们今天就来学习一下如何跳转，顺便把跳转过程中的参数传递，以及接收赋值到模板中显示学习了。

首先我们创建一个小程序，填写项目名称，以及路径，这里AppID我用的测试账号。

我们进入到开发页面显示的默认代码中Pages目录中只有index和logs，小程序页面一般都包裹.js文件主要是逻辑层的一些内容，.json文件主要作用是页面的独立配置文件，wxml文件主要是我们直观显示的页面相当于html，wxss文件主要是用于页面的样式相当于css，不对赘述详细可以看官方文档，这里主要讲页面跳转以及传参。

我们首先增加一个新的页面test，创建的时候，系统会自动在app.json中创建一条路由，还有更简单的办法，直接在app.json中添加一条路由，系统就会帮你直接创建相对应的内容，这里要注意的是，如果删除页面，路由是不会自动删除的，需要手动删除一下，路由也是一样。

接下来我们改造一下首页的内容，index文件夹中的index.wxml，增加跳转，小程序中是没有a标签的，跳转的标签是<navigator>，这样就可以正常跳转到设置好的页面了。

除了这种类似于a标签的跳转，小程序还集成api按钮跳转，只需要在button中设置bindtap参数即可，bindtap这个是小程序的事件绑定，写法<button bindtap="ondemo">api跳转</button>，同样是在index.wxml中写，这里js中事件没有写报错，和回调等。关于跳转有多种api，根据官方文档，我们文中使用的是navigateTo会保留当前页面，跳转到应用内的某个页面，另外还有redirectTo是会关闭当前页面，跳转到应用内的某个页面，以及navigateBack关闭当前页面，返回上一页面或多级页面等，具体可以查询一下官网文档，或者在文章下方回复。

接下来我们讲怎么传递参数以及接收参数，传递很简单没什么可说的，直接上代码了

接下来我们说一下如何接收传递过来的参数，接收过来的数据是放在options中的，我们直接用console.log打印一下。

我们在onLoad中可以直接打印出来了，onLoad会在创建页面的时候执行，所以跳转之后会直接打印出来。

接下来我们讲怎么把传递过来的数据显示出来，需要对js以及wxml文件进行一定的改造，我先改造一下test.wxml

既然要获取数据就要在js文件中操作，这里要提到setData，这个函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步），看到网上有说用this.data的，官网文档特别说明了一下，是不行的，原文在这里：直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

最后上一张效果图：

个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。

但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。

所有示例的完整代码，都可以从 GitHub 的代码仓库^[1]下载。

一、总体样式

微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。

注意，小程序虽然使用 CSS 样式，但是样式文件的后缀名一律要写成.wxss。

打开上一篇教程的示例，在项目顶层新建一个app.wxss文件，内容如下。

page {
background-color: pink;
}

text {
font-size: 24pt;
color: blue;
}

上面代码将整个页面的背景色设为粉红，然后将<text>标签的字体大小设为 24 磅，字体颜色设为蓝色。

开发者工具导入代码之后，得到了下面的渲染结果。

可以看到，页面的背景色变成粉红，文本字体变大了，字体颜色变成了蓝色。

实际开发中，直接对<text>标签设置样式，会影响到所有的文本。一般不这样用，而是通过class属性区分不同类型的文本，然后再对每种class设置样式。

打开pages/home/home.wxml文件，把页面代码改成下面这样。

<view>
<text class="title">hello world</text>
</view>

上面代码中，我们为<text>标签加上了一个class属性，值为title。

然后，将顶层的app.wxss文件改掉，不再直接对<text>设置样式，改成对class设置样式。

page {
background-color: pink;
}

.title {
font-size: 24pt;
color: blue;
}

上面代码中，样式设置在 class 上面（.title），这样就可以让不同的class呈现不同的样式。修改之后，页面的渲染结果并不会有变化。

这个示例的完整代码，可以到代码仓库^[2]查看。

二、Flex 布局

各种页面元素的位置关系，称为布局（layout），小程序官方推荐使用 Flex 布局。不熟悉这种布局的同学，可以看看我写的《Flex 布局教程》^[3]。

下面演示如何通过 Flex 布局，将上面示例的文本放置到页面中央。

首先，在pages/home目录里面，新建一个home.wxss文件，这个文件设置的样式，只对 home 页面生效。这是因为每个页面通常有不一样的布局，所以页面布局一般不写在全局的app.wxss里面。

然后，home.wxss文件写入下面的内容。

page {
height: 100%;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}

开发者工具导入项目代码，页面渲染结果如下。

下面解释一下上面这段 WXSS 代码，还是很简单的。

（1）height: 100%;：页面高度为整个屏幕高度。

（2）width: 750rpx;：页面宽度为整个屏幕宽度。

注意，这里单位是rpx，而不是px。rpx是小程序为适应不同宽度的手机屏幕，而发明的一种长度单位。不管什么手机屏幕，宽度一律为750rpx。它的好处是换算简单，如果一个元素的宽度是页面的一半，只要写成width: 375rpx;即可。

（3）display: flex;：整个页面（page）采用 Flex 布局。

（4）justify-content: center;：页面的一级子元素（这个示例是<view>）水平居中。

（5）align-items: center;：页面的一级子元素（这个示例是<view>）垂直居中。一个元素同时水平居中和垂直中央，就相当于处在页面的中央了。

这个示例的完整代码，可以到代码仓库^[4]查看。

三、WeUI

如果页面的所有样式都自己写，还是挺麻烦的，也没有这个必要。腾讯封装了一套 UI 框架 WeUI^[5]，可以拿来用。

手机访问 weui.io^[6]，可以看到这套 UI 框架的效果。

这一节就来看看，怎么使用这个框架的小程序版本 WeUI-WXSS^[7]，为我们的页面加上官方的样式。

首先，进入它的 GitHub 仓库^[8]，在dist/style目录下面，找到`weui.wxss`^[9]这个文件，将源码^[10]全部复制到你的app.wxss文件的头部。

然后，将page/home/home.wxml文件改成下面这样。

<view>
<button class="weui-btn weui-btn_primary">
主操作
</button>
<button class="weui-btn weui-btn_primary weui-btn_loading">
<i class="weui-loading"></i>正在加载
</button>
<button class="weui-btn weui-btn_primary weui-btn_disabled">
禁止点击
</button>
</view>

开发者工具导入项目代码，页面渲染结果如下。

可以看到，加入 WeUI 框架以后，只要为按钮添加不同的 class，就能自动出现框架提供的样式。你可以根据需要，为页面选择不同的按钮。

这个示例中，<button>元素使用了下面的class。

“
weui-btn：按钮样式的基类
weui-btn_primary：主按钮的样式。如果是次要按钮，就使用weui-btn_default。
weui-btn_loading：按钮点击后，操作正在进行中的样式。该类内部需要用<i>元素，加上表示正在加载的图标。
weui-btn_disabled：按钮禁止点击的样式。
”

WeUI 提供了大量的元素样式，完整的清单可以查看这里^[11]。

这个示例的完整代码，可以到代码仓库^[12]查看。

四、加入图片

美观的页面不能光有文字，还必须有图片。小程序的<image>组件就用来加载图片。

打开home.wxml文件，将其改为如下代码。

<view>
<image src="https://picsum.photos/200"></image>
</view>

开发者工具加载项目代码，页面的渲染结果如下，可以显示图片了。

<image>组件有很多属性^[13]，比如可以通过style属性指定样式。

<view>
<image
src="https://picsum.photos/200"
style="height: 375rpx; width: 375rpx;"
></image>
</view>

默认情况下，图片会占满整个容器的宽度（这个例子是<view>的宽度），上面代码通过style属性指定图片的高度和宽度（占据页面宽度的一半），渲染结果如下。

当然，图片样式不一定写在<image>组件里面，也可以写在 WXSS 样式文件里面。

这个示例的完整代码，可以到代码仓库^[14]查看。

五、图片轮播

小程序原生的`^[15]可以提供图片轮播效果。

上面页面的图片上面，有三个提示点，表示一共有三张图片，可以切换显示。

它的代码很简单，只需要改一下home.wxml文件即可。

<view>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
style="width: 750rpx;">
<swiper-item>
<image src="https://picsum.photos/200"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/250"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/300"></image>
</swiper-item>
</swiper>
</view>

上面代码中，<swiper>组件就是轮播组件，里面放置了三个`^[16]，表示有三个轮播项目，每个项目就是一个<image>组件。

<swiper>组件的indicator-dots属性设置是否显示轮播点，autoplay属性设置是否自动播放轮播。它们的属性值都是一个布尔值，这里要写成{{true}}。这种{{...}}的语法，表示里面放置的是 JavaScript 代码，这个放在下一次讲解。

这个示例的完整代码，可以到代码仓库^[17]查看。

页面样式就讲到这里，下一篇教程讲解怎么在微信小程序里面加入 JavaScript 脚本，跟用户互动。

注意，由于脚本代码比较多，这个系列的后两篇教程将不在微信公号上连载了，大家可以去我的个人网站阅读。

（完）

参考资料

[1]

代码仓库: https://github.com/ruanyf/wechat-miniprogram-demos

[2]

代码仓库: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/03.css

[3]

《Flex 布局教程》: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[4]

代码仓库: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/04.flex

[5]

WeUI: https://github.com/Tencent/weui

[6]

weui.io: https://weui.io/

[7]

WeUI-WXSS: https://github.com/Tencent/weui-wxss/

[8]

GitHub 仓库: https://github.com/Tencent/weui-wxss/

[9]

weui.wxss:https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss

[10]

源码: https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/style/weui.wxss

[11]

这里: https://github.com/Tencent/weui-wxss

[12]

代码仓库: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/05.weui

[13]

很多属性: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

[14]

代码仓库: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/06.image

[15]

<swiper>组件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

[16]

<swiper-item>组件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html

[17]

代码仓库: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/07.swiper

在面试，都会问，你会不会小程序呀，你做没做过小程序呀，其实小程序很简单，只要严格按照小程序的官网来开发就行，一些常用api呀，组件呀，小程序都帮你做好了，你只需要负责用就行了。今天我们来说一下小程序面试中可能遇到的问题。

一、简述一下小程序的文件类型

我们可以看到在项目的根目录有一个 app.json、app.js 和 project.config.json 我们依次来说明一下它们的用途。

首先我们看一下小程序的目录结构，下面是小程序目录结构的截图；

1、小程序配置 app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信小程序把这个作为配置文件入口，是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、跳转到其他小程序配置、开启定位权限、是否开启调试模式、指定sitemap文件、分包的配置、网络超时时间、底部 tab 等。

2、全局app.js

必须要有这个文件，没有也会报错！这个文件创建一下就行，可以什么都不写，以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

3、工具配置 project.config.json

小程序工具的个性化配置，例如界面颜色、编译配置等等。

4、pages里面的文件，分为四种类型，下面来简单介绍一下这四程类型

WXML模板：和HTML非常像，WXML由标签属性等构成，但是和HTML也有很多不一样的地方，例如：

标签名字不一样，写 HTML 的时候，经常会用到的标签是 div, p, span，而小程序的 WXML 用的标签是 view, button, text 等等
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

WXSS 样式：WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位rpx。1rpx=0.5px=1物理像素
提供了全局的样式和局部样式。你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器

JS 交互逻辑：一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS脚本文件来处理用户的操作。

页面配置page.json：独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

二、小程序的事件

1、事件分类

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

2、事件的绑定

事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

3、如何实现下拉刷新

监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

三、小程序更新页面的值

函数用于将数据从逻辑层发送到视图层（异步）

this.setData(Object data, Function callback)
复制代码

参数说明：

data：传一个object，是这次要改变的数据

callback：传一个function，是setData引起的界面更新渲染完毕后的回调函数

四、小程序的路由方式

打开新页面：调用 API wx.navigateTo 或使用组件 < navigator open-type="navigateTo"/>

页面重定向：调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

页面返回：调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

Tab 切换：调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

重启动：调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

五、常用的小程序请求接口的方式

HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）

在线咨询

上一篇：精选15个顶尖Web设计与开发博客
下一篇：大家都看得懂的设计规范-输入框篇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商