2017-01-04 14:17:20 u010635353 阅读数 49101
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

功能点:页面跳转
本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100

这里记录一下小程序中页面跳转的方式。

从跳转的方式(或说成打开新页面的方式)来说大致可分为:请求转发请求重定向TAB页跳转(有过web经验的话,应该很清楚两种方式的区别),部分出自官方文档。

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

这里写图片描述

注意点:小程序中要求页面的层级最多只能有五层,因为这种方式保留当前页面,也就是说以这种方式跳转页面,最多只能打开5个页面。


wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

这里写图片描述


wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

这里写图片描述


wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

这里写图片描述

注意点:
1.这里需要强调一下小程序中以堆栈形式记录页面。每一个以wx.navigateTo(OBJECT) 方式跳转的页面都会被压入堆栈,但是以wx.redirectTo(OBJECT) 打开的页面则不会。借用一下官方的例子,很清晰明了。

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.redirectTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack()

**2.**wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

3. 跳转的url是页面的路径(非Tab页面),如需传递参数,要放在路径之后,以 分隔,参数键与参数值用=相连,不同参数用&分隔


从写的位置来说大致可分为两种,一种是在页面wxml文件中以标签的形式,另一种是代码的形式(这种上面已经列举出来了,此处不再赘述)。

组件navigator

页面链接。

这里写图片描述

通过open-type 可以指定跳转的方式是请求转发,请求重定向还是TAB页跳转。(效果同上面js代码的效果,此处不再赘述)


这里记录一个笔者遇到的坑,坑了我一晚上。。。也是很无语。虽然不是页面跳转的问题,但是也有一定联系,姑且记在这里。

本来我的项目首页有两个tab,需要在其中一个列表页中点击一个item进入详情,查看地图。然而,不管我怎么尝试,文档撸了N遍,都还是没解决。

先贴出异常

这里写图片描述

上面报错的aboutUs是首页的其中另一个tab,只是一个展示页,没有操作,所以虽然报错了,然而我并没有管。问题出在我跳转pages/map(详情的地图)的时候,提示我如上最后一行的错误。

Page[pages/map/map] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.

按照笔者以前android和后台的经验,一直把问题定位到map页的本身。撸了N久都没解决。后来心血来潮把aboutUs的异常解决了,发现问题奇迹般的解决了。

问题出在,aboutUs页,因为只是一个静态页,并没有操作,所以aboutUs.js是空的,问题就出在这。

在小程序中,即时不需要写js的代码,那js文件中也必须要加上Page({})

2019-04-17 16:16:07 shine_a 阅读数 434
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒
1、问题描述

在「添加基金页面pages/addfund/main」添加完基金后,点击取消,会需要跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金添加基金页面基金页面
现在的问题是:

  • 在微信开发者工具中操作时:添加完基金后,会跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金
  • 在真机调试、预览时:在手机上操作添加完基金后,会跳转到「基金页面pages/index/main」但是不会自动刷新出刚刚添加的基金
2、相关代码以及原因分析

我们通过wx.switchTab跳转到「基金页面pages/index/main」,跳转成功后,通过getCurrentPages().pop()方法获取当前页面栈中的最后一个页面(正常来说,这个页面就是「基金页面pages/index/main」),然后调用page.onPullDownRefresh()刷新这个页面

wx.switchTab({
  url: '/pages/index/main',
  success: function (e) { 
    console.log("that.$mp",that.$mp)
    var page = getCurrentPages().pop();
    console.log("page",page)
    if (page == undefined || page == null) return;
    page.onPullDownRefresh();
  } 
})

我们在代码中通过语句console.log("page",page)打印了一下当前的page。

  • 在微信开发者工具中打印结果如下:微信开发者工具

  • 在真机调试中打印结果如下真机调试
    从上面两张图可以看出,在微信开发者工具和真机调试中打印出的page里面的route是不一样的。

  • 微信开发者工具上能刷新是因为这里的route是「基金页面pages/index/main」

  • 真机调试中不能刷新是因为route是「添加基金页面pages/addfund/main」所有实际上刷新了「添加基金页面」,没刷新「基金页面」

3、问题分析以及解决

页面到「基金页面」并刷新是通过先从页面栈中获取到「基金页面pages/index/main」,再执行「基金页面」下的刷新页面方法。

要解决这个问题,我们需要先了解一下页面栈。

API 页面栈表现 备注
wx.switchTab 页面全面出栈,只留下新的Tab页面 只能打开 tabBar 页面
wx.reLaunch 页面全面出栈,只留下新的页面 可以打开任意页面

从【2、相关代码以及原因分析】展示的代码中,我们可以看到现在用的方法是wx.switchTab。那么正常的流程是跳转到「基金页面pages/index/main」页面成功后,页面栈会被清空,只留下「基金页面」这个Tab页。在微信开发者工具确实是这样的。但是在真机调试中,最后留下的页面是「添加基金页面pages/addfund/main」。应该是微信小程序的一个bug了吧。

我们的解决方案是将wx.switchTab换成wx.reLaunch。这样就正常了,像下面这样:

wx.reLaunch({
  url: '/pages/index/main',
  success: function (e) { 
    console.log("that.$mp",that.$mp)
    var page = getCurrentPages().pop();
    console.log("page",page)
    if (page == undefined || page == null) return;
    page.onPullDownRefresh();
  } 
})
2019-04-28 11:22:10 qq_20451879 阅读数 151
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

目录

  • 常规页面跳转
  • 携带参数进行页面跳转
常规页面跳转的三种方式

1.wx.navigateTo(OBJECT) → 保留当前页面,跳转到应用内的某个页面

// goto:事件    ../mine/jump:跳转类名
 goto: function() {
    wx.navigateTo({
      url: '../mine/jump'
    })
  }

2.wx.redirectTo(OBJECT) → 左上角没有返回箭头,不能返回上一个页面

// jump:事件    ../mine/Thrned:跳转类名
 jump: function() {
    wx.redirectTo({
      url: '../mine/Thrned'
    })
  }

3.wx.switchTab(OBJECT) → 跳转到一级界面,一般为首页、个人中心等

// jumpTab:function:事件   ../index/index:跳转类名
 jumpTab:function(){
    wx.switchTab(
      {
        url:'../index/index'
      }
    )
 }

4.返回方式

  • 如左上角有返回箭头,可通过此处返回上一个页面
  • 通用方法 - - ~ 通过 wx.navigateBack 方法,返回上级页面

携带参数进行页面跳转

A页面

 /**
    参数介绍:
	1. ../help/helpcenter 我们要跳转的页面
	2. search=' + webUrl + 'fxioshelp' 这里为一个键值对 search 对应的webUrl + 'fxioshelp'是一个H5链接
	3. '&source=' + 1 多参数传递 使用 & 进行链接 
	*/
 wx.navigateTo({
        url: '../help/helpcenter?search=' + webUrl + 'fxioshelp' + '&source=' + 1,
      })

B页面

/**
  * 生命周期函数--监听页面加载
  * 接收介绍:
  * 1.在onLoad生命周期内进行数据接收
  * 2.通过options用于键内取值,这里我们取的search与source就是我们上级页面传的键名
  */
onLoad: function(options) {
    var that = this.data;
    if (options.search) {
      that.destinationurl = options.search;
      //这里是赋值传过来的H5链接
      this.setData({
        destinationurl: options.search
      })
    } 
    
    if (options.source == 1) {
      wx.setNavigationBarTitle({
        title: '帮助中心'
      })
     }
  },
2019-02-13 11:13:17 yanmuchen 阅读数 130
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

作为一名程序员当然要想尽办法提高效率,解放鼠标!(如果遇到了新的快捷键再继续添加,网上快捷键实在太多了,我只收藏一些自己常用的,当然,有可能会遇到有些快捷键在你那不灵验,可以看看是不是和输入法快捷键冲突了)


微信开发者工具:

  • ctrl+p:快速打开文件
  • ctrl+b:编译 
  • ctrl+e:最近打开过的文件
  • ctrl+g:跳转到某一行代码,比如输入20,就跳转到第20行代码了 
  • ctrl+h:替换  
  • ctrl+shift+k:删除行  
  • ctrl+shift+o:跳转到某个方法
  • shift+alt+f:格式化文件,前提是选中文本
  • shift+alt+↑:向上复制行
  • shift+alt+↓:向下复制行
  • alt+↑:向上移动一行
  • alt+↓:向下移动一行

 

android stuio(我将keymap设置为eclipse):

  • ctrl+o:查找本类的方法
  • ctrl+shift+t:查找类
  • ctrl+alt+s:快速打开settings
  • ctrl+d:删除行
  • ctrl+h:全局搜索
  • alt+shitf+r:重命名  

 

计算机:

  • ctrl+r:刷新
  • ctrl+f:当前文件或网页查找想要的内容
  • end:将光标定位到行末尾
  • ctrl+end:将光标定位在整个文本末尾
  • ctrl+w:关闭当前窗口
  • window:打开开始菜单
  • window+m:最小化所有窗口
  • window+shift+m:打开所有最小化窗口
  • window+r:打开命令窗口
  • window+e:快速打开我的电脑
  • window+shift+s:截图,这样就不用登录QQ也能截图了
  • ctrl+shift+n:创建一个文件夹

vscode:

 

关闭窗口

Ctrl+Shift+W

打开集成终端

Ctrl+`

搜索文件

Ctrl+p

代码格式化

Shift+Alt+F

打开一个新窗口

Ctrl+Shift+N

代码行缩进

Ctrl+]

在当前行下边插入一行

Ctrl+Enter

在当前行上方插入一行

Ctrl+Shift+Enter

向上向下复制一行

Shift+Alt+Up 或 Shift+Alt+Down

移动到文件开头

Ctrl+Home

移动到文件结尾

Ctrl+End

选择从光标到行尾

Shift+End

选择从行首到光标处

Shift+Home

同时选中所有匹配,方便批量修改

Ctrl+Shift+L

删除光标右侧的所有字

Ctrl+Delete

查找

Ctrl+F

查找替换

Ctrl+H

整个文件夹中查找

Ctrl+Shift+F

全屏

F11

侧边栏显/隐

Ctrl+B

2018-02-28 10:47:45 Cream_Cicilian 阅读数 2517
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27840 人正在学习 去看看 秦子恒

两种方法
①wx.navigateTo(普通跳转)

wx.navigateTo({
      url: '../card/card',
    })

②wx.redirectTo(把当前页面变成首页)

 wx.redirectTo({
     url: '../card/card',
   })
没有更多推荐了,返回首页