微信小程序路由跳转,API调用,页面传值

article/2025/10/6 14:39:39

路由跳转

  1. wx.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

wx.switchTab({url: '/pages/tarbar/index'
})
  1. wx.reLaunch

关闭所有页面,打开到应用内的某个页面。

wx.reLaunch({url: '/pages/index/index'
})
  1. wx.redirectTo

关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。

wx.redirectTo({url: '/pages/index/index'
})
  1. wx.navigateTo

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序的页面栈最多只能存储10个页面。

wx.navigateTo({url: '/pages/index/index'
})
  1. wx.navigateBack

关闭当前页面,返回上一页面或多级页面。使用delta参数确定返回的页数,默认为1,若delta大于现有页面数,则返回至首页。

// 此处是A界面,前往B界面
wx.navigateTo({url: '/pages/B/B'
}// 此处是B界面,前往C界面
wx.navigateTo({url: '/pages/C/C'
})// 此处是C界面,返回到A界面
wx.navigateBack({delta: 2
})

API调用

微信小程序默认已经封装了相关的请求方法,在使用微信开发工具时,在微信开发工具右上角的详情,本地设置中设置不检验合法域名…即可使用开发工具进行调试调用。
** 注:在提交代码至微信小程序平台后,若要调用服务器接口,则需配置https,微信小程序不支持http请求**

请添加图片描述

微信小程序通过 wx.request() 方法调用服务器接口,通过指定 url 指定接口,通过 method 指定调用方法。

GET请求

GET请求一般使用头参法传递数据,GET请求相对POST请求速度较快,但是安全性不高,凡是设计用户隐私的数据,都不能使用GET请求。

bindTestGet() {// 为确保this指向不发生改变,可以固定下this指向// 使用this的时候用that代替即可var that = this;wx.request({// 注意,如果小程序开启校验合法域名时必须使用https协议// 在测试的情况下可以不开启域名校验url: 'http://127.0.0.1:4523/mock/370607/testGet?id=1',// 请求的方法// 常用方法'GET','POST','PUT','DELETE'method: 'GET', // 设置请求头,不能设置 Refererheader: {// 默认值'content-type': 'application/json' },// 请求成功时的处理success: function (res) {// 一般在这一打印下看看是否拿到数据console.log("testGet");console.log(res.data);if (res.statusCode == 200) {var array = res.data;that.setData({// 将res.data保存在listDate方便我们去循环遍历listDate: res.data// 统计所有数据});};},// 请求失败时的一些处理fail: function () {wx.showToast({icon: "none",mask: true,title: "接口调用失败,请稍后再试。",});}});
}

POST请求

POST请求一般使用Body传参法,Body请求速度相对GET请求相对较慢,但是POST请求胜在隐私性高,可传递数据量大。

bindTestPost() {var that = this;wx.request({url: 'http://127.0.0.1:4523/mock/370607/testPost',data: {param: '1',},method: 'POST', header: {'content-type': 'application/json'},success: function (res) {console.log("testPost");console.log(res.data);if (res.statusCode == 200) {var array = res.data;that.setData({listDate: res.data});}},fail: function () {wx.showToast({icon: "none",mask: true,title: "接口调用失败,请稍后再试。",});}});}

其他场景API调用方法如’PUT’,'DELETE’本质是’POST’请求的延伸,‘PUT’请求和’DELETE’请求使用方法同’POST’,只需修改method中的方法即可。


页面传参

  1. 通过微信小程序组件的公有属性data-[key]="value"的形式,可以从wxml文件中向js文件中传值;
  2. 在同一个标签中,需要向js文件中传递多个值的时候,可以使用多个data-[key]="value"的形式传值;
  3. 在js文件中,通过[res].currentTarget.dataset.key[res].currentTarget.dataset[key]的形式,获取从wxml中传递到js文件的值;
  4. 在页面跳转时,使用头参法向要跳转的页面进行传值;
  5. 在js的文件的onLoad生命周期函数中,通过[res].[key]的形式获取从父页面传递的参数。
  6. 在使用**data-[key]="value"**的形式传参时,[key]中不能出现大写字母,不然js文件中识别不到相关的key,这里建议使用下划线命名法进行key的命名

示例:
wxml文件中:

<view bindtap="goChild" data-id="{{item.id}}" data-key="1">

父js文件中获取wxml文件传递的值:


http://chatgpt.dhexx.cn/article/waWQLcDg.shtml

相关文章

微信小程序组件的封装与传值

1、新建component文件夹存放我们的组件&#xff0c;里边存放的就是我们所用的组件&#xff0c;我们今天要做的事弹出框&#xff0c;新建文件夹popup存放我们的组件模板&#xff0c;点击右键选择新建component&#xff0c;就会自动生成组件的模板wxss、wxml、json、js&#xff0…

小程序之父子组件传值详解

小程序之父子组件传值详解 父传子&#xff1a; 1.在pages的同级新建components文件夹&#xff0c;并在components文件夹下新建自定义组件名 2.在父组件的"组件名.json"中引入子组件组件&#xff08;图如下&#xff09; {"usingComponents": {"tab…

小程序页面传值、页面与组件通信方式总结

在小程序开发中&#xff0c;页面传值经常会用到&#xff0c;如果有调用组件和插件的话还会涉及到页面与组件的通信传值等&#xff0c;今天我是想来总结下微信小程序页面和组件传值。 一.页面与页面的传值 1.跳转的url带参传值 微信小程序页面直接传值我们经常用到的是页面UR…

使用搜狗接口对微信公众号爬虫

搜狗搜索因为有微信公众号搜索的接口&#xff0c;所以通过这个接口就可以实现公众号的爬虫 需要安装几个python的库&#xff1a;selenium,pyquery 还使用到phantomjs.exe,这个需要我们自己去下载&#xff0c;然后放在自己的python工程下即可 在输入框输入想要爬取的公众号…

爬取微信公众号文章

新增了GUI界面&#xff0c;效果如图 ************************************************************************************************试了多种方法&#xff0c;发现还是使用自己创建一个公众号再搜索的方式最有用。有三种方法&#xff0c;第一种&#xff1a;用搜狗微信公…

[python]微信公众号文章爬取

[python]微信公众号文章爬取 需求 爬取一些微信公众号的文章 数据来源 1.搜狗微信搜索&#xff0c;可以搜索微信公众号文章&#xff0c;但只能显示该公众号最近十篇的文章 2.通过个人微信公众号中的素材管理&#xff0c;查看其他微信公众号文章 步骤 1.手动从网站上获取co…

Python2.7爬虫——爬取微信公众号文章

今天跟着这篇博客抓取微信公众号文章练习了一下爬虫&#xff0c;运行成功。想和大家分享一下过程中出现的问题和解决方法。 运行环境 windows 7 Pycharm2018 Python 2.7 目录 目录 1.安装必要的Python包 1.1 关于下载selenium包1.2关于下载json包 2.运行之前的准备 代码中需…

基于搜狗搜索的微信公众号爬虫实现(C#版本)

为什么80%的码农都做不了架构师&#xff1f;>>> Author: Hoyho Luo Email: luohaihaogmail.com Source Url:http://here2say.me/11/ 转载请保留此出处 本文介绍基于搜狗的微信公众号定向爬虫&#xff0c;使用C#实现&#xff0c;故取名WeGouSharp。本文中的项目托管…

fiddle python抓取微信公众号文章

分析 1&#xff0c;先进行准备工作&#xff1a;使用fiddle抓包&#xff08;大家可以自行百度怎么使用哦&#xff09; 2&#xff0c;打开电脑端微信&#xff0c;找到需要爬取的公众号 点击进入公众号&#xff0c;再打开fiddle&#xff0c;微信停留在这一步 打开fiddle后再点击…

Java Selenium 爬取微信公众号文章图片.md

项目地址结尾 一、前期准备 1. 下载selenium的驱动 Chrome http://chromedriver.storage.googleapis.com/index.html Firefox https://github.com/mozilla/geckodriver/releases/ IE http://selenium-release.storage.googleapis.com/index.html 下载好驱动然后放到、对…

python爬虫(17)爬出新高度_抓取微信公众号文章(selenium+phantomjs)

个人博客请访问 http://www.x0100.top 一.思路分析 目前所知晓的能够抓取的方法有&#xff1a; 1、微信APP中微信公众号文章链接的直接抓取&#xff08;http://mp.weixin.qq.com/s?__bizMjM5MzU4ODk2MA&mid2735446906&idx1&snece37deaba0c8ebb9badf07e5a5a3bd…

获取微信公众号文章内视频真实地址

PHP获取微信公众号文章内视频与音频真实地址 微信公众号的文章的爬取可以看到这个项目&#xff1a;github 基于QueryList的微信公众号文章获取工具 有任何问题可以留言。 返回数据&#xff1a; 包含音频和视频包含多个视频 原有找到的文章 如何抓取微信公众号文章里面的视频…

Python爬取微信公众号文章、点赞数

代码还是热乎的&#xff0c;只要你细心一步步的慢慢调试&#xff0c;绝壁没问题 前期准备 订阅号&#xff1b;Python&#xff1b;Fiddler&#xff1b;微信账号&#xff1b; 流程 使用用微信公众号生成cookie使用Fiddler抓取微信公众号数据&#xff0c; 获取阅读数通过cooki…

如何爬取微信公众号文章(二)

在如何爬取微信公众号&#xff08;一&#xff09;中完成了将爬取公众号文章的元数据存入数据库&#xff0c;其中包括文章的连接、标题、发布时间、摘要和封面图片等信息。下面介绍如何根据文章链接来爬取文章内容。 开发环境 windows 7 x64python3.7 (Anaconda)vscode 编辑器…

如何爬取微信公众号文章(一)

微信公众号是目前最为流行的自媒体之一&#xff0c;上面有大量的内容&#xff0c;如何将自己感兴趣的公众号内容爬取下来&#xff0c;离线浏览&#xff0c;或者作进一步的分析呢&#xff1f; 下面我们讨论一下微信公众号文章的爬取。 环境搭建 windows 7 x64python3.7 (Anac…

Python 爬虫之微信公众号

Python 爬虫之微信公众号 源代码放在文末。 本次爬虫需要的工具如下: selenium 驱动器对应浏览器的 webdriver一个微信订阅号在 2017 年 6 月左右,微信官方发布一篇文章 https://mp.weixin.qq.com/s/67sk-uKz9Ct4niT-f4u1KA,大致意思就是以后发布文章的时候可以插入其他公…

公网访问局域网家用nas

提到外网访问不得不说说家里局域网的搭建结构了&#xff0c;就拿大众最常用的方式举例&#xff0c;网络运营商的光纤入户&#xff0c;通过运营商提供的光猫直接pppoe进行拨号&#xff0c;再连接自己的路由器&#xff0c;分配至各网口。 自从上次充当灵魂画手被嘲笑了以后就改用…

外网访问群晖NAS VMM搭建Openwrt的admin界面

偶然在网上看到很多的帖子使用群晖搭建openwrt搭建旁路由,心血来潮体验了一把,记录一下自己的搭建的整个过程,并最终实现外网访问Openwrt的admin界面。 本人使用的群晖nas DS220+,其他品牌未尝试。 一、前期配置 1、先在套件中心下载VMM(Virtaul Machine Manager) 2、下…

2022年10月 cpolar软件实现内网穿透连接群晖NAS

前言 1.cpolar简介 cpolar是一款拥有远程控制和内网穿透功能的软件。而且还可以监控端口的HTTP请求&#xff0c;利用实时的cpolar Web UI开发者工具&#xff0c;让您调试代码更容易。您可以监听所有隧道上的HTTP消息包&#xff0c;分析消息包的结构内容&#xff0c;找出问题点…

群晖内网穿透 实现外网快速访问 无需公网

有群晖的情况下&#xff0c;在内网我们可以通过ip正常访问我们的群晖/NAS;但是我们想要在外网访问的时候该怎么办&#xff0c;没有公网ip&#xff0c;扯专线太贵&#xff0c;自己搭建太麻烦。这无疑是个难题&#xff1b; 今天&#xff0c;小编找到了一款免费的内网穿透工具来实…