首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序 页面跳转 传递参数

微信小程序 页面跳转 传递参数

作者头像
王小婷
发布于 2018-12-26 09:24:01
发布于 2018-12-26 09:24:01
9.2K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看demo来的快和方便。 先看一下官方给出的文档:

https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html?search-key=wx.navigateTo()

index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <view class="btn-area">
 <navigator url="../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting" hover-class="navigator-hover">跳转到新页面</navigator>
 </view>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {

  },

  //事件处理函数

  onLoad: function () {
  },

})

要把参数传递给navigator界面

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view> {{title}} </view>

<view > {{what}} </view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

效果 传递的两个参数到了这个界面了

分割线:

通过js里面的绑定的函数事件来跳转 index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view bindtap="bindViewTap" class="up">
   我要绑定事件带着两个参数跳转界面
</view>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {

  },

  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting'
      //  url: '../logs/logs'
    })
  },

  //事件处理函数

  onLoad: function() {},

})

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view> {{title}} </view>
<view > {{what}} </view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

效果: http://recordit.co/rDhRuFEpYc

再来一个demo:便于理解和实践 index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
  <text>姓名:{{name}}</text>
</view>

<view>
  <text>年龄:{{age}}</text>
</view>

<button bindtap='buttonListener'>携参数跳转界面</button>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: '王小婷',
    age: '22'

  },

  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name + '&ageData=' + that.data.age
    })
  }
})

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
<text>我的姓名是:{{name}}</text>
</view>
<view>
<text>我的年龄是:{{age}}</text>
</view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: null,
    age: null

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
      age: options.ageData
    })

  }
})

只带一个参数跳转:

index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
  <text>姓名:{{name}}</text>
</view>
<button bindtap='buttonListener'>携参数跳转界面</button>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
    name: '王小婷'
  },
  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name 
    })
  }
})

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
<text>我的姓名是:{{name}}</text>
</view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
    name: null
  },
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
    })
  }
})

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
塑性辊压成型的有限元仿真
塑性辊压成型又称冷弯成型,是工业中常用的金属制造与成型方式。是通过顺序配置的多道次成形轧辊,把金属工件不断进行变形,以制成特定形状。这种成型方式生产效率高,节约材料,增加产品强度,广泛应用于如汽车生产等工业部门。
WelSim的小仿真
2025/06/25
1010
塑性辊压成型的有限元仿真
结构工程师:请避开有限元分析中6个常见的“坑”
导读:近年来,随着有限元分析软件应用的普及,很多在过去仅仅局限于科研人员论文中的问题,逐步开始成为设计工程师的分析任务。但是另一方面,设计人员未必具备分析人员的知识储备,很多人对于结构分析缺乏有效的思路,甚至有的分析人员完全没有材料力学等相关的基本概念,在结构分析中往往会陷入各种误区,导致分析的效果大打折扣,甚至得出错误的结果。本文针对设计人员结构分析中常见的一些误区进行分析和讨论,希望引起结构分析人员的重视。本文讨论的问题仅限于建模思路和静力计算部分。 误区一:缺乏体系化的概念 很多人做结构分析,就连什么
fem178
2022/10/11
1.2K0
结构工程师:请避开有限元分析中6个常见的“坑”
有限元法(FEM)
空间和时间相关问题的物理定律通常用偏微分方程(PDE)来描述。对于绝大多数的几何结构和所面对的问题来说,可能无法求出这些偏微分方程的解析解。不过,在通常的情况下,可以根据不同的离散化 类型来构造出近似的方程,得出与这些偏微分方程近似的数值模型方程,并可以用数值方法求解。如此,这些数值模型方程的解就是相应的偏微分方程真实解的近似解。有限元法(FEM)就是用来计算出这些近似解的。
技术客
2022/05/19
2.1K0
哪些因素会影响 Abaqus 结构有限元分析的计算结果准确性?
在工程设计与分析领域,有限元分析(Finite Element Analysis,FEA)早已成为不可或缺的技术手段。作为行业内顶尖的有限元分析软件,Abaqus 凭借其强大的结构分析能力,被广泛应用于各类工程项目。但许多工程师在使用 Abaqus 时难免疑惑:为何相同的模型,计算结果却存在差异?实际上,计算结果的准确性会受到诸多因素的影响。本文将针对这些影响因素展开详细探讨,助力用户获取更可靠的分析结果。
思茂信息
2025/05/15
1710
哪些因素会影响 Abaqus 结构有限元分析的计算结果准确性?
​LiToSim壳与膜单元在CAE仿真中的应用
壳体结构被广泛应用于工程实际中,例如航空航天工程中的飞机、火箭,机械、石化、电力等部门的各类容器,以及航海和海洋工程的船舰、潜艇,土木、水利工程中的穹顶、拱坝等。其特点是结构一个方向的尺度(厚度)远小于其它方向的尺度,且变形以弯曲为主,此时可以采用壳单元模拟该结构。壳单元可以承受面内拉伸应力和弯曲应力,采用板壳单元模拟这种结构可以大大节省计算时间,并且增加求解精度。
学识家
2022/06/08
1.3K0
ProCAST有限元铸造模拟仿真软件CAE
ProCAST作为铸造模拟方案的先锋,是全球首屈一指的材料物理学数值模拟原型和制造流程供应商。PROCAST成功的关键在于使用真实材料物理特性,能够进行更真实的模拟,来代替耗时的物理样机尝试和纠错过程。
用户10047369
2022/09/16
2.5K0
ProCAST有限元铸造模拟仿真软件CAE
有限元分析必学的 5 大核心定义,新手入门必备知识
在工程技术与科学研究领域,有限元分析(Finite Element Analysis,简称 FEA)已成为不可或缺的强大工具,广泛应用于结构力学、流体力学、传热学等多个学科。若想深入掌握这一技术,需先清晰认知其核心定义。下面梳理有限元分析中几个至关重要的必学定义,看看你是否都已熟知。
思茂信息
2025/06/10
1200
有限元分析必学的 5 大核心定义,新手入门必备知识
HyperMesh 在 CFD 网格划分中的专业运用:技巧、难点与突破
对于熟悉 CAE(计算机辅助工程)分析技术的专业人士而言,网格划分无疑是整个分析流程中最为耗时且至关重要的环节。它不仅要求高度的精确性,还直接影响到后续分析结果的准确性和可靠性。为应对这一挑战,业界开发了 HyperMesh 等功能强大的前处理软件,其专为优化网格划分流程而设计。
智造AI-CAE
2025/05/26
2600
HyperMesh 在 CFD 网格划分中的专业运用:技巧、难点与突破
仿真小白必须知道的!有限元法-它是什么?FEM和FEA解释
有限元方法(FEM)是一种数值技术,用于对任何给定的物理现象进行有限元分析(FEA)。
开物小编
2021/04/27
7.3K0
定义有限元分析中复合材料的多铺层结构
现代结构分析中,常常会遇到多铺层复合材料。这些复合材料常常以板壳的整体结构形式出现,内部由多层铺层叠加而成。铺层的角度,厚度,材料都有可能不同。对于这种符合材料的分析,仿真软件需要提供相关的功能,由用户根据实际材料输入数据。
WelSim的小仿真
2025/03/11
870
定义有限元分析中复合材料的多铺层结构
关于计算流体力学,你知道多少?
流体力学,是研究流体(液体和气体)的力学运动规律及其应用的学科。主要研究在各种力的作用下,流体本身的状态,以及流体和固体壁面、流体和流体间、流体与其他运动形态之间的相互作用的力学分支。流体力学是力学的一个重要分支,它主要研究流体本身的静止状态和运动状态,以及流体和固体界壁间有相对运动时的相互作用和流动的规律。在生活、环保、科学技术及工程中具有重要的应用价值。
用户学习笔记
2022/05/13
1.3K0
解决有限元分析慢的难题,仿真软件提速攻略
有限元分析(FEA)作为工程与科学领域不可或缺的数值方法,凭借其强大的模拟与分析能力,在结构性能研究中占据着核心地位。然而,随着工程模型日趋复杂,计算需求不断攀升,仿真速度慢的问题逐渐凸显,成为制约分析效率的一大瓶颈。正因如此,本文将深入剖析并分享多种实用方法,助力提升有限元仿真软件的运行速度,让计算效率得到实质性提高。
思茂信息
2025/07/03
700
解决有限元分析慢的难题,仿真软件提速攻略
有限元分析软件具备哪些功能?
有限元分析软件是一种用于工程领域的计算机辅助设计工具,它能够对复杂的结构进行力学分析和模拟,帮助工程师和设计师在设计阶段就能够预测结构的性能和行为。有限元分析软件的功能非常丰富,主要包括以下几个方面:
思茂信息
2025/04/11
940
有限元分析软件具备哪些功能?
所有工程师在FEA之前应了解的6件事
每个行业的工程师都将有限元分析(FEA)集成到设计周期中,以确保其产品安全,具有成本效益并且可以快速推向市场。 但是,分析并不像将CAD模型放入任何FEA包中那样简单。
开物小编
2021/04/26
4650
所有工程师在FEA之前应了解的6件事
一文读懂,有限元分析网格划分的意义
有限元分析中网格划分的核心目的是什么?熟悉有限元技术的工程人员都知道,在数值模拟流程中,网格划分是承上启下的关键环节。这一过程通过将复杂几何结构或实体拆解为若干小而简单的单元(如四面体、六面体等),实质是为物理场的数学建模提供离散化载体 —— 每个单元内建立的微分方程近似解,通过节点自由度的耦合,最终拼接成整个系统的完整解域。这种分解不仅能将复杂边界条件和材料特性的描述转化为单元级的参数赋值,更通过控制网格密度、类型和质量,直接影响计算精度与效率的平衡。简言之,科学合理的网格划分是实现有限元分析准确性与可靠性的基础,其本质是通过空间离散化架起实际物理系统与数值求解之间的桥梁。
思茂信息
2025/05/29
2250
一文读懂,有限元分析网格划分的意义
线性有限元分析输入文件指南
当完成有限元建模阶段 —— 即通过 CAD 几何模型完成网格划分(采用有限单元进行几何近似)后,需将材料与属性信息和单元完成关联,并完成载荷与约束条件的定义。至此,有限元模型可从前处理软件中导出为特定求解器支持的 ASCII 格式输入文件。
思茂信息
2025/06/06
1050
线性有限元分析输入文件指南
【AIGC】数理工科研究:深入解析有限元仿真法
ANSYS 是一款功能强大的工程仿真软件,涵盖结构、流体、电磁、声学等多种物理场仿真。
CSDN-Z
2024/10/17
1.3K0
【AIGC】数理工科研究:深入解析有限元仿真法
有限元分析完整步骤解析:基于 Abaqus 的仿真全流程指南
有限元分析(FEA)作为工程领域的核心数值分析手段,凭借其对复杂物理现象的精准模拟能力,已深度融入结构力学、热学、流体动力学等多学科设计流程。从航空航天的机翼强度验证,到汽车工业的碰撞模拟,FEA 不仅能帮助工程师提前预判系统性能,规避设计缺陷,还能通过参数优化显著提升产品可靠性与效率。本文将系统拆解有限元分析的标准流程,并结合 Abaqus 软件的实操案例,带您深入理解这项技术的应用精髓。
思茂信息
2025/05/30
4340
有限元分析完整步骤解析:基于 Abaqus 的仿真全流程指南
轻松搞定ANSYS仿真参数化
在ANSYS应用程序中,可以将关键的仿真特性定义为参数(Parameters)。然后在Workbench中参数管理(Parameter Set)界面下管理参数,通过参数化驱动,实现快速更改仿真模型几何及拓扑参数、材料参数、网格参数、边界条件等设置,用来研究和优化不同设计方案下产品性能。
CAE学习笔记
2022/06/10
3.7K0
有限元分析软件Abaqus有哪些功能模块?
Abaqus 是适用于解决从简单(线性)到高度复杂工程问题(多物理场非线性)的一套具有全面仿真计算能力的有限元软件。Abaqus 前处理模块包括丰富的单元、材料模型类型,可以高精度地实现包括金属、橡胶、高分子材料、复合材料、钢筋混凝土、可压缩超弹性泡沫材料以及土壤和岩石等地质材料的工程仿真计算。在多物理场计算方面,Abaqus 不仅能求解结构(应力/位移)问题,还可以高精度求解热传导、质量扩散、热电耦合分析、声学分析、电磁分析、岩土力学分析及压电介质分析。
思茂信息
2025/05/23
1140
有限元分析软件Abaqus有哪些功能模块?
推荐阅读
相关推荐
塑性辊压成型的有限元仿真
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档