微信小程序四(全局配置和页面配置页面跳转)

news2025/1/16 3:02:11

全局配置:

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

         tabBar设置:最少两个最多5个

"tabBar": {
    "list":[{
      "pagePath": "pages/04/04",
      "text": "04页面"
    },{
      "pagePath": "pages/03/03",
      "text": "03页面"
    },{
      "pagePath": "pages/02/02",
      "text": "02页面"
    },{
      "pagePath": "pages/01/01",
      "text": "01页面"
    }]
  }

 

           改变头部样式

              开始的样式:

        

             将背景颜色改成黑色,字体颜色改成白色,标题改成微信

 "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "微信",
    "navigationBarBackgroundColor": "#000"
  },

navigationBarTextStyle:标题字体颜色,只支持两种颜色,黑色(black)和白色(white),默认为黑色

navigationBarTitleText:标题,任意修改

navigationBarBackgroundColor:背景颜色,只支持16进制设置颜色

       修改后:

       常用的属性:

enablePullDownRefresh:是否开启全局下拉,默认为false不下拉,true为下拉

 页面配置:在页面的json文件中配置样式

       将背景颜色改成#AA0000这种颜色,字体颜色改成白色,标题改成当前其他

       开始样式:

     

      改变后样式:

"navigationBarBackgroundColor": "#AA0000",
  "navigationBarTitleText": "页面配置"

      当全局配置和页面配置中有相同的配置,以页面配置为主,也就是页面配置优先级大于全局配置

     跳转页面:

        第一种方式:wxml页面使用navigator标签

      

<navigator url="/pages/index/index" open-type="navigate">标签普通页面跳转</navigator>

url:当前小程序内的跳转链接

open-type:设置跳转普通页面还是tabBar页面,默认值为navigate,跳转普通页面,值为switchTab,跳转tabBar页面

    第二种方式:js页面书写代码

          普通页面跳转:定义一个方法

 

putong(){
    wx.navigateTo({
      url:"/pages/index/index"
    })
  }

        wxml页面点击跳转

<button bindtap="putong">页面跳转</button>

        tabBar页面跳转:也是定义一个方法

 

 tarBar(){
    wx.switchTab({
       url:"/pages/01/01"
    })
  }

      wxml页面点击跳转

<button bindtap="tarBar">tarBar页面跳转</button>

        

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1608894.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【机器学习300问】76、早停法(Early Stopping)是如何防止过拟合的?

本文带大家介绍一个非常简单的防止过拟合的方法——早停&#xff08;Early Stopping&#xff09;&#xff0c;首先给出概念&#xff0c;然后通过损失图像来加深对它的理解。 一、早停是什么呀&#xff1f; 早停&#xff08;Early Stopping&#xff09;是一种常用的深度学习模型…

STM32F401RCT6电子元器件芯片LQFP64 32位微控制器MCU单片机

STM32F401RCT6微控制器具有丰富的外设接口和较高的处理能力&#xff0c;适用于多种嵌入式应用。以下是一些典型的STM32F401RCT6应用案例&#xff1a; 1. 机器人控制&#xff1a;STM32F401RCT6可以用于制作自动导航机器人、遥控机器人等&#xff0c;负责处理传感器数据、控制电…

【学习】自动化测试有哪些优势和不足

在当今这个数字化时代&#xff0c;软件测试已经成为了任何一款产品成功的关键因素之一。而在诸多的测试方法中&#xff0c;自动化测试凭借着其独特的魅力吸引着越来越多的企业。今天就让我们一起走进自动化测试的世界&#xff0c;探讨它的优势与不足。 一、自动化测试优势 1.…

YoutobeDNN

目录 1. 挑战 2. 系统整体结构 3.召回 4. 排序 5. 训练和测试样本的处理 1. 挑战 &#xff08;1&#xff09;规模。很多现有的推荐算法在小规模上效果好&#xff0c;但Youtobe规模很大。 &#xff08;2&#xff09;新颖度。Youtobe语料库是动态的&#xff0c;每秒都会有…

【NLP练习】使用Word2Vec实现文本分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、数据预处理 1. 任务说明 本次加入Word2Vec使用PyTorch实现中文文本分类&#xff0c;Word2Vec则是其中的一种词嵌入方法&#xff0c;是一种用于生成词向量…

vscode微博发布案例

样例: CSS代码: * {margin: 0;padding: 0; }ul{list-style: none; }.w {width: 900px;margin: 0 auto; }.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline: none;padding-left: 20px;padding-top: 10px;font-size: 18px; }.controls…

ADOP带您了解什么是光纤跳线

光纤跳线&#xff08;也称为光纤连接器&#xff09;是指光缆两端都装有连接器插头&#xff0c;用来实现光路活动连接。一端装有插头则称为光纤尾纤。光纤跳线用于从设备到光纤布线链路的跳接线&#xff0c;具有较厚的保护层。它在光纤通信系统、光纤接入网、光纤数据传输以及局…

【RAG 论文】面向知识库检索进行大模型增强的框架 —— KnowledGPT

论文&#xff1a;KnowledGPT: Enhancing Large Language Models with Retrieval and Storage Access on Knowledge Bases ⭐⭐⭐⭐ 复旦肖仰华团队工作 论文速读 KnowledGPT 提出了一个通过检索知识库来增强大模型生成的 RAG 框架。 在知识库中&#xff0c;存储着三类形式的知…

Nginx第3篇-使用ngx_http_proxy_connect_module配置https正向代理

场景 我使用python爬虫&#xff0c;然后需要个代理&#xff0c;所以就用Nginx搭了一个代理服务器。对Nginx也不太熟&#xff0c;慢慢摸索&#xff0c;搭建完之后发现只能代理http的请求&#xff0c;无法穿透https。几经折腾和摸索发现一个强大的HTTP代理模块&#xff1a;ngx_h…

ceph osd分组

一、前言 使用分组可以更好的管理osd&#xff0c;将不同类型的磁盘&#xff0c;分到不同的组中&#xff0c;例如hhd类型的osd分配到hhd组&#xff0c;ssd类型的osd分配到ssd组&#xff0c;将io要求不高的分配到hhd组做存储&#xff0c;io要求高的分配到ssd组做存储 二、配置 查…

李沐-16 PyTorch 神经网络基础【动手学深度学习v2】

注&#xff1a;1. 沐神对应章节视频出处 2.代码使用Jupyter Notebook运行更方便 3.文章笔记出处 一、层和块 层&#xff1a;层&#xff08;1&#xff09;接受一组输入&#xff0c; &#xff08;2&#xff09;生成相应的输出&#xff0c; &#xff08;3&#xff09;由一组可调整…

JVM知识点总结二

参考文章&#xff1a;【Java面试题汇总】JVM篇&#xff08;2023版&#xff09;_jvm面试题2023-CSDN博客 1、说说你了解的JVM内存模型&#xff1a; JVM由三部分组成&#xff1a;类加载子系统、运行时数据区、执行引擎 JVM内存模型&#xff1a; 内存模型里的运行时数据区&#…

短信登录session-redis

1.流程 1.1 发送验证码 模拟路径 http://127.0.0.1:8080/api/user/code?phone1335566 Request Method:POSTcontroller层 /*** 发送手机验证码*/PostMapping("code")public Result sendCode(RequestParam("phone") String phone, HttpSession session) {…

GitHub/R3D3项目环境配置踩坑记录

1、前言 项目链接地址&#xff1a;SysCV/r3d3 (github.com) 按照安装步骤容易出现的问题&#xff0c;environment.yaml文件中安装相关包&#xff0c;其中还有两个pip install githttps://github.com/..........这两个建议注释掉&#xff0c;后面再来安装这两个。 2、问题及解…

电脑本地搭建privateGPT流程

文章目录 前言效果所需文件流程1,python版本2,工程文件安装2.1服务端搭建2.2客户端搭建 3,模型下载 前言 当我的电脑主机在本地运行privateGPT的时候我听到了cpu风扇在呼啸, 至于privateGPT是干什么的, 其实就相当于一个文档分析软件,只不过内置了一个gpt,你把文件丟给他,你可…

鸿蒙OpenHarmony【搭建Ubuntu环境】

搭建Ubuntu环境 在嵌入式开发中&#xff0c;很多开发者习惯于使用Windows进行代码的编辑&#xff0c;比如使用Windows的Visual Studio Code进行OpenHarmony代码的开发。但当前阶段&#xff0c;大部分的开发板源码还不支持在Windows环境下进行编译&#xff0c;如Hi3861、Hi3516…

【论文源码实战】轻量化MobileSAM,分割一切大模型出现,模型缩小60倍,速度提高40倍

前言 MobileSAM模型是在2023年发布的&#xff0c;其对之前的SAM分割一切大模型进行了轻量化的优化处理&#xff0c;模型整体体积缩小了60倍&#xff0c;运行速度提高40倍&#xff0c;但分割效果却依旧很好。 MobileSAM在使用方法上沿用了SAM模型的接口&#xff0c;因此可以与…

matlab学习003-绘制由差分方程表示的离散系统图像

目录 1&#xff0c;题目 2&#xff0c;使用函数求解差分方程 1&#xff09;基础知识 ①filter函数和impz函数 ②zeros函数 ☀ 2&#xff09;绘制图像 ​☀ 3&#xff09;对应代码 如果连简单的信号都不会的&#xff0c;建议先看如下文章&#x1f447;&#xff0c;之…

UE4 相机围绕某点旋转

关卡&#xff08;一个相机CameraActor&#xff0c;一个Cube(名叫Target)&#xff09;&#xff1a; 关卡蓝图里的逻辑(为了大家看得清楚&#xff0c;特意连得很紧凑&#xff0c;也比较乱&#xff0c;不然一张截图放不下)&#xff1a; 只对Yaw 只Pitch: 同样对Roll: 围绕任…

Java maven项目打包自动测试并集成jacoco生成代码测试覆盖度报告

引入Junit 引入 junit5 单元测试依赖 <properties><junit.version>5.10.2</junit.version><jacoco.version>0.8.12</jacoco.version></properties><dependencies><!-- 单元测试 --><dependency><groupId>org.jun…