微信小程序开发官网-微信小程序开发官网网址 收藏 0

微信小程序开发极简入门（五）：WXML标签&页面跳转、传参

像我这样的老Java开发，尤其是写过JSP的开发，肯定用过JSTL，什么<c:forEach>、<c:if>，wxml的也有非常相像的实现。

上文做了很简单的展示。

js做数据准备：

• wx:for，绑定的数组。
• wx:for-index，当前元素的下标，默认为index。
• wx:for-item，当前元素的变量名，默认为item。
• wx:key，列表中项目的唯一标识。如果不配置此项，编译器会报warning。如果此列表是动态会改变的（排序、添加新元素等），则需要指定元素中唯一的属性（例如ID）为key。好处是数据发生变更，渲染层重新渲染此组件时，会在组件本身进行处理，而非重新创建一个新组件，从而提高渲染效率。

注意：block不是view、text这样的组件，它就是把一些组件包起来，类似group的概念，也不会渲染出来，就是搭配wx:for、wx:if使用。

用处主要是判断要不要渲染该组件。与hidden不同，wx:if是决定此组件要不要渲染出来，hidden是肯定会渲染出来，只是显示不显示而已。

查看此页面，会显示一个button，源代码，也只会出现1个button。如果是hidden，则源代码会有3个button，只显示1个而已。

其实就是WEB页面的`<a href=\”url\”>详情</a>`。

open-type有几种：

• navigate。默认的，当前页面保存，跳转到目标页面（不能跳转到tabBar页面），目标页面可以回退到当前页面。
• redirect。重定向，当前页面关闭，跳转到目标页面（不能跳转到tabBar页面），目标页面无法回退到当前页面。
• switchTab。顾名思义，跳转到某个tabBar页面，其他非tabBar页面全关闭。
• reLaunch。重启。除了打开目标页，关闭其他所有页面。
• navigateBack。就是浏览器的后退按钮。

页面跳转传参的方法很多，比如通过app.js里的globalData传递，也可以通过本地缓存的存取（wx.setStorage）。

不过不是太推荐这两种。它们都算是全局数据，俩页面的数据传递还是不要上升到全局的层面了。微信官方文档在数据缓存一节，就很明确地说了：

storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。

方法有3：

• wxml的url传参。
• js的方法传参。

这两者实际是一个东西的两种写法而已

源页面wxml：

源页面js：

目标页面js：

• EventChannel传参

页面间事件通信通道，稍微复杂一点，但是相比用url传参，可以传更复杂的数据。

源页面wxml：

源页面js：

目标页面js：

一般目标页面拿到源页面传过来的参数，要放在自己的data进行处理的，不过写法就不是this.setData了，上面加了that的变量，为什么是这么个的写法，在后面的文章会详细解释。

开发微信小程序详细步骤，无门槛教程

很多用户越来越喜欢在微信上使用在线小程序，因为它无需安装、触手可及、用完即退、无需卸载这些特点方便了用户使用，它还能满足需求。所以也注定小程序的市场会得到很多用户的喜爱，那么企业和创业者也开始着手开发自己的小程序，那么如何用乔拓云工具去开发小程序呢？下面小编就教大家如何使用搭建工具在线搭建小程序！

首先第一步：

打开在线搭建工具。完成用户注册后，进入到用户后台管理，找到【轻应用小程序】选项点击，进入小程序的管理中心。

进入小程序管理中心，找到【设计小程序】下方的（更改模板）点击，进入模板中心。

接着第二步：

在左侧的行业分类栏中，有上百种行业的模板分类能选择。

接下来操作演示是随机挑选其中一个模板制作，模板内的工具和操作步骤都一样。

选中其中的行业分类，在行业分类中选择一个自己需要的模板点击【马上替换】，进入模板的编辑界面。如图

然后第三步：

进入小程序的编辑界面，左侧有编辑小程序用的四个工具。点击文字或图片旁的小铅笔图标就能修改图文。根据模板内的提示操作帮助你更方便搭建小程序。

在【控件】工具内，可以选择添加控件功能到小程序中，例如小程序中的侧停客服控件和导航控件，如图。

最后第四步：

到了最后一步用【风格】工具调整了小程序后。就点击右上角的【保存并预览】进行小程序的设计保存和预览！

完成保存后，回到小程序后台，点击【前往授权】发布，如图。

这样一个小程序就搭建完成了，快实践起来搭建一个小程序吧！

如果在搭建或者按照笔记操作的过程中遇到难题，可以在文章下留言，小编看到后会第一时间回复。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com