承接上篇博客。

通过点击按钮跳转到新的页面。

先创建新页面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" // 跳转页面的路径
})
}
)
}
})

保存后,点击按钮,效果如下:

结束!

微信小程序开发(四)页面跳转的更多相关文章

  1. 微信小程序开发之页面跳转并携带参数

    接口: wx.navigateTo({url:......})   保留当前页面,跳转到应用内指定URL页面,导航栏左上角有返回按钮 wx.redirecTo({url:.....})       关 ...

  2. 【微信小程序开发】页面配置

    app下的app.json文件是全局配置. app下的每一个page中,也可以配置.json文件. page中配置的内容是对应app中window配置项下的内容. page中的配置将覆盖window中 ...

  3. 微信小程序开发 [02] 页面注册和基本组件

    1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...

  4. 微信小程序插件内页面跳转和参数传递(转)

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  5. 微信小程序插件内页面跳转和参数传递

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  6. 微信小程序之----navigator页面跳转

    navigator navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面,另一种不带即在本页跳转,通过控制redirect属性 .js <view> <navi ...

  7. 【微信小程序】Page页面跳转(路由/返回)并传参

    页面跳转的方法参考官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html 问题:使用wx.na ...

  8. 微信小程序开发之页面wxml里面实现循环 wx:for

    js代码: Page({ data:{ upploadimagelist:{},    //上报图片列表 js数组 }}) 后台数据库保存的格式:{"imageList":[{&q ...

  9. 微信小程序开发之页面注册

    页面Page是object Page({  data:{    String1  },  onLoad:function(options){    // 生命周期函数--监听页面加载 一个页面只会调用 ...

  10. 记账本微信小程序开发四

    学习添加组件 集成日期组件 添加组件 需要在main.js文件中,声明一个data值date与wxml中的{{date}}绑定关联,然后在onLoad中初始化字符串格式的日期值, 处理日期组件点击确认 ...

随机推荐

  1. windows是下安装nvmw

    nvmw:Windows环境下的node多版本管理工具. 安装: 1.  git clone https://github.com/hakobera/nvmw.git 2.修改环境变量 计算机 -&g ...

  2. Python获取 东方财富 7x24小时全球快讯

    本文使用的IDE为PyCharm. 1.第三方库 (1)selenium selenium用来做浏览器自动化,因为这部分信息是动态加载的,不用这种方法读取不到相关数据. 安装: pip3 instal ...

  3. 简单深入Joomla!3.1.5模块_组件开发(一)

    简单深入Joomla!3.1.5模块_组件开发 主要内容: 1, 模块(访问数据库,链接到组件,数据基本流向) 2, 组件CRUD(MVC模式,访问数据库,表单提交,AJAX提交,数据基本流向) 3, ...

  4. Guava源码阅读-base-Charsets

    package com.google.common.base; 今天在找base包下的源码阅读时,看到了Charsets,肯定是定义字符集的类,本来就想简单的看一下.(部分内容摘抄自:http://b ...

  5. POJ 3229:The Best Travel Design

    Description Dou Nai ), and the end of the travel route hours on traveling every day. Input There are ...

  6. Spring Boot CommandLineRunner的使用

    1. 说明 程序在启动完成的时候需要去处理某些业务,因此Spring Boot程序中需要去实现CommandLineRunner接口. 2. CommandLineRunner方法执行顺序 程序启动后 ...

  7. Redis 数据结构 & 原理 & 持久化

    一 概述 redis是一种高级的key-value数据库,它跟memcached类似,不过数据可以持久化,而且支持的数据类型也很丰富. Redis支持五种数据类型:string(字符串),hash(哈 ...

  8. 关于JS原型以及原型链、instanceof的一些理解

    一.JS原型 首先要区分两个概念 1.构造函数 2.实例:由构造函数通过new方式创建出来的就是实例 <script> function Foo() { } var f = new Foo ...

  9. python学习-9 pycharm的安装

    1.python 开发IDE :  pycharm.eclipse等等 安装: 百度搜索pycharm 就可以了,去官网下载专业版.(百度有各种破解方法)                    #不要 ...

  10. python — lambda表达式与内置函数

    目录 1 lambda表达式 (匿名函数) 2 内置函数 1 lambda表达式 (匿名函数) 用于表示简单的函数 lambda表达式,为了解决简单函数的情况: def func(a1,a2): == ...