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

全局配置:

         小程序根目录下的 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>

        

 

相关推荐

  1. 程序页面

    2024-04-22 18:44:01       43 阅读
  2. 程序页面配置

    2024-04-22 18:44:01       5 阅读
  3. 程序页面方法

    2024-04-22 18:44:01       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-22 18:44:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-22 18:44:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-22 18:44:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-22 18:44:01       20 阅读

热门阅读

  1. NumPy:深度学习领域的强大工具

    2024-04-22 18:44:01       14 阅读
  2. Android去除折叠屏两边的黑边,默认全屏显示

    2024-04-22 18:44:01       31 阅读
  3. 【Docker】安装Redis、Nginx、MongoDb、Jenkins

    2024-04-22 18:44:01       13 阅读
  4. Copula(2)

    Copula(2)

    2024-04-22 18:44:01      11 阅读
  5. 3d世界坐标转换到某个二维平面。

    2024-04-22 18:44:01       12 阅读
  6. 百钱买百鸡

    2024-04-22 18:44:01       14 阅读
  7. MAC: 使用技巧

    2024-04-22 18:44:01       14 阅读
  8. C#面:使用 IEnumerable 实现斐波那契数列生成

    2024-04-22 18:44:01       15 阅读
  9. 自学新标日第十二课(完结)

    2024-04-22 18:44:01       16 阅读
  10. redis分布式锁到底怎么用

    2024-04-22 18:44:01       17 阅读
  11. python创建sqlite,并使用flask-sqlalchemy连接

    2024-04-22 18:44:01       13 阅读