微信小程序学习二微信小程序的项目结构

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

进来之后可以看到五个文件和两个文件夹，一般新建的小程序项目都是这种格式，但有些可能会不一样，不用担心，因为我们所要关注的文件是不会变的

pages

小程序的页面放置文件夹，每一个页面（page）包含四个文件

page.js

页面代码逻辑文件

page.wxml

页面结构文件

page.wxss

页面样式文件这里的局部配置会覆盖app.wxss中的配置

page.json

页面配置文件这里的局部配置会覆盖app.json中的配置

这四个文件都与page同名，并且只作用于当前page

utils

放置一些资源文件

app.js

小程序的入口文件

进去之后会发现有如下一堆东西

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

在这上面有很多小程序自动为你生成的一些东西，这些现在我们不需要太过关注，一步一步来。在这个文件中，我们现在需要了解的就是第一行代码中的APP({}) 这个函数就是表示创建一个小程序实例，一切的程序是在这里开始

app.json

这个就是小程序的全局配置文件，可配置的东西有小程序的全局配置请注意在app.json配置的全局属性

app.wxss

微信小程序的全局样式表，在这里定义的样式，会作用于每一个页面（page），而在page中定义的样式，会覆盖app.wxss的样式。

project.config.json

其实从字面量就可以看出，这个就是小程序的项目配置文件，具有能够配置那些东西呢，想什么es6转es5

{
    "description": "项目配置文件",  //描述
    "packOptions": {  //用以配置打包时对符合指定规则的文件或文件夹进行忽略
        "ignore": []
    },
    "setting": {  //项目设置
        "urlCheck": false,  //不检查安全域名和 TLS 版本
        "es6": true,  //启用 es6 转 es5
        "postcss": true,  //上传代码时样式自动补全
        "minified": true,  //上传代码时自动压缩
        "newFeature": true  //新特征，文档中未描述
    },
    "compileType": "miniprogram",  //编译类型，miniprogram为普通小程序项目
    "libVersion": "2.3.0",  //基础库版本
    "appid": "touristappid",  //AppID
    "projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO",  //项目名字，只在新建项目时读取,urlDecode解码(路径解码)
    "debugOptions": {
        "hidedInDevtools": []  //配置调试时于调试器 Sources 面板隐藏源代码的hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。
    },
    "scripts": {},  //自定义预处理的命令 beforeCompile编译前预处理命令、beforePreview预览前预处理命令、beforeUpload上传前预处理命令
    "condition": {  //编译模式，增加编译模式时，会添加到下面的对应数组
        "search": {   
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "plugin": {  //插件
            "current": -1,
            "list": []
        },
        "game": {  //小游戏
            "list": []
        },
        "miniprogram": {  //小程序
            "current": -1,
            "list": []
        }
    }
}

sitemap.json

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。微信已经开放了小程序的内搜索，可以通过这个文件去配置，更多配置请去小程序sitemap配置

1 例如小程序所有页面及其页面可以被搜索

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

2 例如小程序及指定页面(page/index/index页面)可以被搜索

{
  "rules":[{
    "action": "disallow",
    "page": "path/index/index",//页面地址可以再app.json下的pages中观察
  }]
}

3 例如小程序指定某些页面可以被搜索其余页面不可以被搜素

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page"
  }, {
    "action": "disallow",
    "page": "*"
  }]
}

4 例如小程序指定那些页面优先被收缩

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "inclusive"
  }, {
    "action": "allow",
    "page": "*"
  }]
}

包含 a 和 b 参数的 path/to/page 页面会被微信优先索引，其他页面都会被索引，

path/to/page?a=1&b=2 => 优先被索引
path/to/page?a=1&b=2&c=3 => 优先被索引
path/to/page => 被索引
path/to/page?a=1 => 被索引
其他页面都会被索引

5 例如

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "inclusive"
  }, {
    "action": "disallow",
    "page": "*"
  }, {
    "action": "allow",
    "page": "*"
  }]
}