承接上篇博客。

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

先创建新页面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. python网络编程----requests模块

    python访问网站可以用标准模块--urllib模块(这里省略),和requests(安装-pip install requests)模块,requests模块是在urllib的基础上进行的封装,比 ...

  2. Egret入门学习日记 --- 第六篇(书中 3.6~3.9节 内容)

    第六篇(书中 3.6~3.9节 内容) 在本篇写之前,还是要为昨天写的日记道歉才行,差点就误人子弟了. 没想到在程序员界最低级的错误 “单词拼写错误” 还是会经常犯. childrenCreated ...

  3. 《Java语言程序设计》

    课堂测试:用户需求:英语的26 个字母的频率在一本小说中是如何分布的?某类型文章中常出现的单词是什么?某作家最常用的词汇是什么?<Harry Potter> 中最常用的短语是什么,等等. ...

  4. 启动Nginx 出现 nginx: [emerg] unknown directive "锘?user" 错误

    出现这种情况 一般是修改配置文件 nginx.conf 造成的 如果你修改文件后出现 那基本上就是这个原因 启动不了 重新打开 改为UTF-8 无BOM编码

  5. Java学习笔记-基础语法

    Java基础包含关键字,标识符,注释,常量和变量,运算符 关键字 关键字的定义和特点 定义:被Java语言赋予了特殊含义的单词 特点:关键字中所有字母都为小写 Java的关键字 用于定义数据类型的关键 ...

  6. MemCache服务安装配置及windows下修改端口号

    简述:memcached 开源的分布式缓存数据系统.高性能的NOSQL Linux 一.环境配置与安装 01.编译准备环境 yum install -y gcc make cmake autoconf ...

  7. Mysql批量插入返回Id错乱(原因分析)

    在项目中经常会有如下场景: 往数据库中批量插入一批数据后,需要知道哪些插入成功,哪些插入失败了. 这时候往往会有两种思路,一个是在插入之前判断相同的记录是否存在,过滤掉重复的数据:另外一种就是边插入边 ...

  8. 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...

  9. [转帖]curl网站开发指南

    curl网站开发指南 http://www.ruanyifeng.com/blog/2011/09/curl.html linux 里面有非常多很好的工具 比如这个 curl 之前 以为 wget 就 ...

  10. random、range和len函数的使用

    random.range和len函数的使用 一.random函数 1.random.random()和random.Random(): import random num = random.rando ...