微信小程序

项目结构

  1. Pages
    用来存放所有小程序的页面
    每个页面都以单独的文件夹存在，其中每个页面都由4个页面组成

    • .js文件：页面的脚本文件存放页面的数据，事件处理函数等
    • .json文件： 当前页面的配置文件，配置窗口的外观，表现，同时这里的配置项会覆盖app.json的window中相同的配置项
    • .wxml文件： 页面的模板结构文件
    • .wxss文件： 当前页面的样式文件

  2. utils
    用来存放工具性质的模块
    存放普通的功能模块文件，用来封装公共的函数或属性供页面使用

  3. app.js
    整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

  4. app.json
    小程序项目的全局配置文件
    包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
     "pages":[
      "pages/index/index",
      "pages/logs/logs"
     ],
     "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "Weixin",
      "navigationBarTextStyle":"black"
     },
     "style": "v2",
     "sitemapLocation": "sitemap.json"
    }
    • pages: 用来记录当前小程序的所有页面
    • window: 全局定义小程序所有页面的背景色，文字颜色
    • style: 全局定义定义小程序组件所使用的样式版本（默认为V2）
    • sitemapLocation: 用来指明sitemap.json的位置

  5. app.wxss
    小程序项目的全局样式文件

  6. project.config.json
    项目的配置文件
    用来记录我们对小程序开发工具所做的个性化配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    {
        "description": "项目配置文件",
        "packOptions": {
        "ignore": [],
        "include": []
        },
        "setting": {
        "bundle": false,
        "userConfirmedBundleSwitch": false,
        "urlCheck": true,
        "scopeDataCheck": false,
        "coverView": true,
        "es6": true,
        "postcss": true,
        "compileHotReLoad": false,
        "lazyloadPlaceholderEnable": false,
        "preloadBackgroundData": false,
        "minified": true,
        "autoAudits": false,
        "newFeature": false,
        "uglifyFileName": false,
        "uploadWithSourceMap": true,
        "useIsolateContext": true,
        "nodeModules": false,
        "enhance": true,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": true,
        "showShadowRootInWxmlPanel": true,
        "packNpmManually": false,
        "enableEngineNative": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "showES6CompileOption": false,
        "minifyWXML": true,
        "babelSetting": {
        "ignore": [],
        "disablePlugins": [],
        "outputPath": ""
        }
        },
        "compileType": "miniprogram",
        "libVersion": "2.19.4",
        "appid": "wxcb0e38c42bc1d98f",
        "projectname": "miniprogram-92",
        "condition": {},
        "editorSetting": {
        "tabIndent": "insertSpaces",
        "tabSize": 2
        }
    }
    • setting: 保存了编译相关的配置
    • projectname: 保存的是项目名称
    • appid: 保存的是小程序的账号ID

  7. sitemap.json
    用来配置小程序及其页面是否允许被微信索引

项目操作

新建小程序页面

在app.json -> pages 中新增页面的存放路径(如：”pages/页面名称/页面名称”)，小程序开发工具会自动创建新页面

1
2
3
4
5
"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/personal/presonal"
],

修改项目首页

调整app.json -> pages 数组中页面路径的前后顺序，小程序会把排在第一位的页面路径，当做首页进行渲染

项目构成

WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构

  1. 标签名称不同
    • HTML: div,span,img,a
    • WXML: view,text,image,navigator
  2. 属性节点不同
  3. 提供了类似于Vue中的模板语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

WXSS

  1. 新增rpx尺寸单位
    • CSS: 需手动进行像素单位的换算，例如: rem
    • WXSS: 在底层支持新的尺寸单位rpx，在不同大小屏幕上小程序会自动进行换算
  2. 提供了全局的样式和局部的样式
    • 项目根目录中的app.wxss会作用于所有小程序页面
    • 局部页面的.wxss仅对当前页面生效
  3. 仅支持部分CSS选择器
    • .calss 和 #id
    • element
    • 并集选择器，后代选择器
    • ::after 和 ::before等伪类选择器