入门微信小程序

4

简介

  • 它是什么
    一套用来开发在微信中运行的手机app框架
  • 组成结构
    视图层wxml、样式文件wxss、逻辑层js、配置文件json

    clipboard.png

全局配置

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

  • 示例

      {
        "pages": [
          "pages/index/index",
          "pages/logs/logs",
          "pages/klass/klass",
        ],
        "window": {
          "backgroundTextStyle": "light",
          "navigationBarBackgroundColor": "#1aad16",
          "navigationBarTextStyle": "black"
        },
        "tabBar": {
          "color": "black",
          "selectedColor": "#129763",
          "list": [
            {
              "text": "首页",
              "pagePath": "pages/index/index"
            },
            {
              "text": "修改班级",
              "pagePath": "pages/klass/klass"
            }
          ]
        }
        "debug": true
      }

    pages页面路径
    window 页面的窗口表现
    tabBar 底部菜单栏
    debug 是否开启debug模式,debug模式下控制台会打印出详细调试信息

  • 效果

    clipboard.png

更多关于app.json,详细见官方文档

路由

1. navigator

open-type的属性值

   navigate 跳转到 (默认属性)
   switchTab 以tab(菜单栏)方式切换页面
   reLaunch 重新加载url页面,顶部不会出现回退按钮
   
  • 示例

            <!-- open-type的默认值为navigate -->
            <navigator url='/pages/personal/personal'>跳转到修改个人信息界面</navigator>
            <!-- open-type设置属性值为reLaunch -->
            <navigator url='/pages/password/password' open-type='reLaunch' >跳转到修改密码界面</navigator>
            <!-- open-type的默认值为switchTab -->
            <navigator url='/pages/klass/klass' open-type='switchTab'>跳转到修改班级界面</navigator>

    open-type默认属性,顶部会出现回退样式:
    clipboard.png

    open-type设置属性值为reLaunch,顶部不会出现回退样式:
    clipboard.png

    open-type设置属性值为switchTab(*要实现以tab方式切换页面,在app.json中要配合写上tab的配置项):
    clipboard.png

2.使用API进行导航跳转(实现按钮点击跳转)

navigate对应wx.navigateTo(OBJECT) 跳转到
switchTab对应 wx.switchTab(OBJECT) 跳转到某个tab
reLaunch对应 wx.reLaunch(OBJECT) 重新加载

  • 示例

    index.js

    clipboard.png

    index.wxml

    clipboard.png

clipboard.png

关于navigator 的更多属性值可在官方文档查阅

你可能感兴趣的

载入中...