承接上篇博客。

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

先创建新页面home:

代码如下:

  1. // home.js
  2. Page({}) // 注册页面
  3.  
  4. // home.json
  5. {}
  6.  
  7. // home.wxml
  8. <text>home页面</text>

home页面创建好后,去app.json里面配置路径:

  1. // app.json
  2. {
  3. "pages": [
  4. "qrcode/index/index",
  5. "qrcode/home/home"
  6. ]
  7. }

接下来,去index.js里面写跳转的函数:

  1. // index.js
  2. Page({
  3. but: function(){
  4. console.log("你好");
  5. this.setData( // 一定要调用this.setData方法
  6. {}, // 注意这个要保留,原因以后再讲
  7. function(){
  8. wx.navigateTo({ // wx是全局的
  9. "url": "/qrcode/home/home" // 跳转页面的路径
  10. })
  11. }
  12. )
  13. }
  14. })

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

结束!

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

  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. Nginx使用默认配置启动异常处理

    Ps1:错误问题:nginx: [error] OpenEvent("Global\ngx_reload_5988") failed (2: The system cannot f ...

  2. 在UPW中使用VLC解码媒体

    VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...

  3. C语言--分支结构

    一.PTA实验作业 题目1:7-1 计算分段函数[2] 1.实验代码 float x, y; printf("Enter x:\n"); scanf("%f", ...

  4. #论文阅读# Universial language model fine-tuing for text classification

    论文链接:https://aclweb.org/anthology/P18-1031 对文章内容的总结 文章研究了一些在general corous上pretrain LM,然后把得到的model t ...

  5. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  6. Oracle的查询-分组查询

    --查询出每个部门的平均工资 select e.deptno,avg(e.sal) from emp e group by e.deptno; 分组查询中,出现在 group by 后面的原始列,才能 ...

  7. CodeBlocks 配置

    CodeBlocks 配置 Code::Blocks 17.12 时间:2019.6 下载网址 http://www.codeblocks.org/downloads/26 ,这里选择的是 mingw ...

  8. Python学习2——使用字符串(完整版)

    """ 在C语言入门的时候字符串没有好好学习,导致后期语言根本没有入门, 更导致之后大量的codeing时间浪费,效率低下. 因此,借助这次Python入门,好好地将字符 ...

  9. Cactus CodeForces - 231E (无向图缩环)

    大意: 给定无向图, 每个点最多属于一个简单环, 多组询问, 求给定起点终点, 有多少条简单路径. 先缩环, 然后假设两点树上路径经过$cnt$个环, 那么答案就为$2^{cnt}$. 要注意缩环建树 ...

  10. Java语言中:float、double数据类型在内存中是如何存储的

    引用参考 https://www.cnblogs.com/chenmingjun/p/8415464.html#4291528 https://blog.csdn.net/yansmile1/arti ...