承接上篇博客。

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

先创建新页面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. swift 第十四课 可视化view: @IBDesignable 、@IBInspectable

    以前应objctiew-c 写项目的时候,就知道有这两个关键字,现在用swift了.用法稍作改变,基本用法还是一致的 虽然使用这个之后,有时候会报错的非常的莫名其妙----(其实还是自己技术不够牛…… ...

  2. 洛谷 题解 P1196 【[NOI2002]银河英雄传说】

    并查集大难题. 看了题解之后才有思路,调了很久很久才AC,当然要写一篇题解来纪念一下. 先来分析一下这些指令的特点,很容易发现对于每个M指令,只可能一次移动整个队列,并且是把两个队列首尾相接合并成一个 ...

  3. JavaSE基础(六)--Java流程控制语句之条件语句

    Java 条件语句 - if...else 一个 if 语句包含一个布尔表达式和一条或多条语句. 语法 if 语句的语法如下: if(布尔表达式) { //如果布尔表达式为true将执行的语句 } 如 ...

  4. CentOS7下使用Sonatype Nexus3搭建Docker私有仓库

    相关资料: Sonatype Nexus3官方网站:https://www.sonatype.com/download-oss-sonatype Sonatype Nexus3 Docker Hub地 ...

  5. PostgreSQL练习

    学生表 Studentcreate table Student(Sid varchar(6), Sname varchar(10), Sage datetime, Ssex varchar(10)); ...

  6. phpstorm右侧边栏怎么打开?

    开启PHPstorm右侧边栏的方法: 一般phpstorm默认只能打开10个文件,超过就隐藏了,想要打开更多:

  7. Istio技术与实践02:源码解析之Istio on Kubernetes 统一服务发现

    前言 文章Istio技术与实践01: 源码解析之Pilot多云平台服务发现机制结合Pilot的代码实现介绍了Istio的抽象服务模型和基于该模型的数据结构定义,了解到Istio上只是定义的服务发现的接 ...

  8. Windows一键设置环境变量(以设置java环境变量为例)

    右击以管理员方式运行 JDKSetting.bat   @echo off color 0a echo.------------------------------------ echo.TODO:设 ...

  9. javascript 构建模块化开发

    在使用 sea.js .require.js . angular 的时候. 我们使用到  define . module(require) 的方式,定义模块,和依赖模块 下面给出 define 和 m ...

  10. Css文字在div中自动换行

    Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行