微信小程序开发(四)页面跳转
承接上篇博客。
通过点击按钮跳转到新的页面。
先创建新页面home:

代码如下:
// home.js
Page({}) // 注册页面 // home.json
{} // home.wxml
<text>home页面</text>
home页面创建好后,去app.json里面配置路径:
// app.json
{
"pages": [
"qrcode/index/index",
"qrcode/home/home"
]
}
接下来,去index.js里面写跳转的函数:
// index.js
Page({
but: function(){
console.log("你好");
this.setData( // 一定要调用this.setData方法
{}, // 注意这个要保留,原因以后再讲
function(){
wx.navigateTo({ // wx是全局的
"url": "/qrcode/home/home" // 跳转页面的路径
})
}
)
}
})
保存后,点击按钮,效果如下:


结束!
微信小程序开发(四)页面跳转的更多相关文章
- 微信小程序开发之页面跳转并携带参数
接口: wx.navigateTo({url:......}) 保留当前页面,跳转到应用内指定URL页面,导航栏左上角有返回按钮 wx.redirecTo({url:.....}) 关 ...
- 【微信小程序开发】页面配置
app下的app.json文件是全局配置. app下的每一个page中,也可以配置.json文件. page中配置的内容是对应app中window配置项下的内容. page中的配置将覆盖window中 ...
- 微信小程序开发 [02] 页面注册和基本组件
1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...
- 微信小程序插件内页面跳转和参数传递(转)
在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...
- 微信小程序插件内页面跳转和参数传递
在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...
- 微信小程序之----navigator页面跳转
navigator navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面,另一种不带即在本页跳转,通过控制redirect属性 .js <view> <navi ...
- 【微信小程序】Page页面跳转(路由/返回)并传参
页面跳转的方法参考官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html 问题:使用wx.na ...
- 微信小程序开发之页面wxml里面实现循环 wx:for
js代码: Page({ data:{ upploadimagelist:{}, //上报图片列表 js数组 }}) 后台数据库保存的格式:{"imageList":[{&q ...
- 微信小程序开发之页面注册
页面Page是object Page({ data:{ String1 }, onLoad:function(options){ // 生命周期函数--监听页面加载 一个页面只会调用 ...
- 记账本微信小程序开发四
学习添加组件 集成日期组件 添加组件 需要在main.js文件中,声明一个data值date与wxml中的{{date}}绑定关联,然后在onLoad中初始化字符串格式的日期值, 处理日期组件点击确认 ...
随机推荐
- Cocos Creator Android打包 apk
这一篇讲的是用 Cocos Creator 编译器打包 Android APP 的时候遇到的一些问题,虽然说打包的过程不是很复杂,但是在其中还是会遇到各式各样的坑. 我们将项目用CCC(Cocos C ...
- 洛谷 题解 P1133 【教主的花园】
$n<=10^5 $ O(n)算法 状态 dp[i][j][k]表示在第i个位置,种j*10的高度的树,且这棵树是否比相邻两棵树高 转移 dp[i][1][0]=max(dp[i-1][2][1 ...
- The Maze II
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- 正式发布! .NET开发控件集ComponentOne 新版本加入Blazor UI
近期,由葡萄城推出的ComponentOne .NET开发控件集正式发布最新版本! ComponentOne 是一套专注于企业 .NET开发.支持 .NET Core 平台,并完美集成于 Visual ...
- [转]mac升级Nodejs和Npm到最新版
第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安装 n 工具,这个工具是专门用来管理node ...
- SQL SERVER MONTH函数
定义: MONTH函数返回指定日期的月的部分 语法: MONTH(date) 参数: ①date参数是合法的日期表达式. 返回值: int型数据 例: 声明:本文是本人查阅网上及书籍等各种资料,再加 ...
- 小菜鸟之java基础
1. javac 命令的作用: javac 编译器解析 Java 源代码,并生成字节码文件的过程 2. java为什么可以跨平台: ava有虚拟机(JVM),JAVA程序不是直接在电脑上运行的,是在虚 ...
- Git初始化配置以及配置github
1,配置用户名和邮箱(这里是我github中配置的用户名和邮箱),执行下面命令后,在C:\Users\yaosq盘下会出现一个全局文件.gitconfig. git config --global u ...
- python--关于正则表达式的学习小结
python中提供了re这个模块提供对正则表达式的支持. 一.正则表达式常用到的一些语法(并非全部): . 匹配任意单个字符 [...] 匹配单个字符集 \w 匹配单词字符,即[a-zA-Z0-9] ...
- Pygame小游戏练习二
@Python编程从入门到实践 Python项目练习 四.创建Ship类 建立ship.py,创建Ship类,管理飞船行为. # ship.py import pygame class Ship(): ...