iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序学习笔记之页面配置与路由方式
  • 592
分享到

微信小程序学习笔记之页面配置与路由方式

2024-04-02 19:04:59 592人浏览 安东尼
摘要

最近在学习回顾小程序的开发,将一些学习结果做个笔记。参考微信小程序官方文档:developers.weixin.qq.com/miniprogram… 一、小程序配置 1、全局配置

最近在学习回顾小程序开发,将一些学习结果做个笔记。参考微信小程序官方文档:developers.weixin.qq.com/miniprogram…

一、小程序配置

1、全局配置

小程序根目录下的 app.JSON 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。


// 示例
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

2、页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。


// 示例
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

3、sitemap配置

注:sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

关于是否被微信索引有两种配置方式:

1、页面收录设置:可对整个小程序的索引进行关闭,小程序管理后台-功能-页面内容接入-页面收录开关;

2、sitemap 配置:可对特定页面的索引进行关闭。


// 所有页面都会被微信索引(默认)
{
    "rules":[{
        "action":"allow",
        "page":"*"
    }]
}
// path/to/page 页面不被索引,其余的会被索引
{
    "rules":[{
        "action":"disallow",
        "page":"path/to/page"
    }]
}

二、小程序的五个路由

1、wx.navigateTo()

保留当前页面,跳转到应用内的某个页面。不能跳转到tabbar页面。小程序中页面栈最多十层,超过的可以使用wx.redirectTo来跳转。


wx.navigateTo({
    url:"list?id=2",
    events:{
        // 页面间通信接口,用于监听被打开页面发送到当前页面的数据。
        someEvent:function(data){
            console.log(data)
        }
    },
    success:function(res){
        // 通过eventChannel向被打开页面传送数据
        res.evnetChannel.emit('someEvent',{dta:'list'})
    }
})

2、wx.redirectTo()

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到tabbar页面。


// 示例
wx.redirectTo({
    url:'list?id=2',
    success:function(){},
    fail:function(){}
})

3、wx.switchTab()

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


wx.switchTab({
    url:'/index'
})

4、wx.navigateBack()

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


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

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

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
  delta: 2
})

5、wx.reLaunch()

关闭所有页面,打开到应用内的某个页面。


//示例
wx.reLaunch({
    url:'list?id=2'
})

注:另外和跳转相关的WEBview中的页面怎么跳转回小程序?


wx.miniPrograme.navigateTo({
    url:'pages/login/login'+'params'
})
// 跳转到小程序的导航页面
wx.miniPrograme.switchTab({
    url:"/pages/index/index"
})

总结

到此这篇关于微信小程序学习笔记之页面配置与路由方式的文章就介绍到这了,更多相关小程序页面配置与路由方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序学习笔记之页面配置与路由方式

本文链接: https://www.lsjlt.com/news/129502.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序学习笔记之页面配置与路由方式
    最近在学习回顾小程序的开发,将一些学习结果做个笔记。参考微信小程序官方文档:developers.weixin.qq.com/miniprogram… 一、小程序配置 1、全局配置...
    99+
    2024-04-02
  • 微信小程序如何配置页面与路由
    这篇文章将为大家详细讲解有关微信小程序如何配置页面与路由,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、小程序配置1、全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页...
    99+
    2023-06-20
  • PHP学习笔记:微信小程序与公众号开发
    随着移动互联网的快速发展,微信成为了人们使用最广泛的社交媒体平台之一。为了满足用户的需求,微信提供了两种开发方式:小程序和公众号。本文将介绍如何使用PHP语言开发微信小程序和公众号,并提供一些具体的代码示例。一、微信小程序开发准备工作首先,...
    99+
    2023-10-21
    微信小程序 PHP学习 公众号开发
  • 微信小程序怎么实现页面路由
    本文小编为大家详细介绍“微信小程序怎么实现页面路由”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现页面路由”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是路由?路由(routing)是指分组...
    99+
    2023-06-30
  • 微信小程序开发之全局配置与页面配置实现
    目录一、全局配置(1)小程序窗口的组成部分(2)导航栏  navigationBar(3)下拉刷新页面(4)上拉触底的距离(5)底部导航栏 tabBar(6)图标的获取二、...
    99+
    2024-04-02
  • 微信小程序页面路由的示例分析
    这篇文章将为大家详细讲解有关微信小程序页面路由的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。页面路由在小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。当发生路...
    99+
    2023-06-26
  • 微信小程序页面怎么配置
    这篇“微信小程序页面怎么配置”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序页面怎么配置”文章吧。一、小程序配置1、...
    99+
    2023-06-08
  • Android开发微信小程序路由跳转方式
    目录官方文档路由跳转的两种形式标签形式js形式快速总结小程序路由跳转1.1 wx.switchTab(Object object)1.2 wx.reLaunch(Object obj...
    99+
    2024-04-02
  • 微信小程序页面跳转方式+跳转小程序
    一. 跳转页面方法 1.跳转到 tabBar 页面 wx.switchTab({ url: '/index'}) 2.跳转到其他页面(非tabBar页) //redirectTo方法(会关闭当前页面...
    99+
    2023-09-28
    小程序 微信小程序
  • 获取微信小程序页面路径的方法
    1. 打开你的微信公众号管理平台 2. 新建图文 3. 插入小程序 4. 根据appid搜索你要获取页面路径的小程序 appid可以点击右上角“...”,再在弹出框中点击小程序名称,在小程序更多资料里面可以找到 5. 点击获取更多页面路径,...
    99+
    2023-09-01
    微信小程序 小程序
  • 微信小程序全局配置以及页面配置详解
    目录全局配置全局配置文件及常用配置项全局配置—window小程序窗口组成部分了解window节点常用的配置项设置导航栏的标题设置导航栏的背景色设置导航栏的标题颜色全局开启...
    99+
    2024-04-02
  • 微信小程序之五种页面跳转方法小结
    目录第一种:<navigator></navigator>标签.第二种:wx.navigateTo.第三种:wx.redirectTo.第四种:wx.swit...
    99+
    2024-04-02
  • 微信小程序页面渲染方式有哪些
    微信小程序页面渲染方式有条件渲染和列表渲染。条件渲染:wx:if, wx:else,hiddenwx:if条件渲染,条件为true渲染标签,为false不渲染,将它添加到一个标签上,代码:<view wx:if="...
    99+
    2024-04-02
  • 微信小程序功能配置页面什么意思
    在微信小程序功能配置页面可以进行全局配置、配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等,也可以为小程序添加索引,以帮助用户分类检索小程序的相应服务页面。...
    99+
    2024-04-02
  • 10分钟彻底搞懂微信小程序单页面应用路由
    单页面应用特征 「假设:」 在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面。 「多页面应用:」 点击按钮,会从新加载一个html资源,刷新整个页面; 「单页面应用:」...
    99+
    2024-04-02
  • 微信小程序路由跳转的两种方式是什么
    本篇内容介绍了“微信小程序路由跳转的两种方式是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!路由跳转的两种形式标签形式 <...
    99+
    2023-06-30
  • 微信小程序路由跳转两种方式示例解析
    目录官方文档路由跳转的两种形式标签形式js形式快速总结小程序路由跳转1.1 wx.switchTab(Object object)1.2 wx.reLaunch(Object obj...
    99+
    2024-04-02
  • Android开发微信小程序路由跳转方式是什么
    这篇文章主要讲解了“Android开发微信小程序路由跳转方式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android开发微信小程序路由跳转方式是什么”吧!路由跳转的两种形式标签形式...
    99+
    2023-06-30
  • 微信小程序页面与组件之间信息传递与函数调用
     这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如...
    99+
    2024-04-02
  • 【原力计划小程序】1、一篇文章深入了解小程序的学习路线(以项目驱动的方式带你学习微信小程序)
    文章目录 一、我的微信小程序开发历程(1) 我的代码经历(2) 我的微信小程序项目 二、微信小程序开发的学习路线三、认识小程序(1) 小程序分类(2) 小程序是啥?① 小程序大概② uni...
    99+
    2023-09-06
    微信小程序 小程序 学习
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作