入门微信小程序

简介

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

  

全局配置

小程序根目录下的 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模式下控制台会打印出详细调试信息

• 效果

  

更多关于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默认属性，顶部会出现回退样式：
  

  open-type设置属性值为reLaunch，顶部不会出现回退样式：
  

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

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

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

• 示例

  index.js

  

  index.wxml

  

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