2017-11-04微信小程序开发个人笔记——代码基本结构分析

您现在的位置是: 首页 > WEB前端 > 微信小程序开发个人笔记——代码基本结构分析

417次阅读

相关文档链接  
   小程序简易教程: https://mp.weixin.qq.com/debug/wxadoc/dev/  
   微信小程序设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html

一、代码基本结构分析


app.json

项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)

{
  // 当前程序是由哪些页面组成的(第一项默认为初始页面)
  // 所有使用到的组件或页面都必须在此体现
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 应用程序窗口设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 应用导航栏设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 网络超时设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制台输出调试信息
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}


app.js

项目主入口文件(用于创建应用程序对象)

// App函数是一个全局函数,用于创建应用程序对象

App({
  // ========== 全局数据对象(整个应用程序共享) ==========
  globalData: { ... },
  // ========== 应用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },
  // ========== 生命周期方法 ==========
  // 应用程序启动时触发一次
  onLaunch () { ... },
  // 当应用程序进入前台显示状态时触发
  onShow () { ... },
  // 当应用程序进入后台状态时触发
  onHide () { ... }
})


app.wxss

[可选]项目全局的样式文件,所有样式全局生效,内容遵循CSS标准语法


二、pages目录

存放程序中存在的页面
每个页面组件也分为四个文件组成:

page­name.js
页面逻辑文件,用于处理页面生命周期控制和数据处理

page­name.json
设置当前页面工作时的一些配置
此处可以覆盖app.json中的window设置
也就是说只可以设置window中设置的熟悉

page­name.wxml
wxml指的是  Wei Xin Markup Language
用于定义页面中元素结构的
语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法

page­name.wxss
wxss指的是  Wei Xin Style Sheet
用于定义页面样式的
语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)


三、utils目录

存放一些功能型脚本


四、小程序中的配置文件

小程序中的配置文件分为两种:

1. 全局配置文件,根目录下的  app.json
2. 页面配置文件,每个页面目录下的  [pagename].json


五、tabBar底部选项卡配置

{
  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#35495e",
    "borderStyle": "white",
    "backgroundColor": "#f9f9f9",
    "list": [
      {
        "text": "榜单",
        "pagePath": "pages/board/board",
        "iconPath": "images/board.png",
        "selectedIconPath": "images/board‐actived.png"
      },
      {
        "text": "搜索",
        "pagePath": "pages/search/search",
        "iconPath": "images/search.png",
        "selectedIconPath": "images/search‐actived.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "images/profile.png",
        "selectedIconPath": "images/profile‐actived.png"
      }
    ]
  }
}


六、页面结构

每个页面都分为四个文件组成:

1. [page­name].wxml -- 用于编写页面结构,注意不是HTML
2. [page­name].wxss -- 用于编写页面样式
3. [page­name].js -- 页面业务脚本
4. [page­name].json -- 页面配置文件