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

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

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 文件用来配置小程序及其页面是否允许被微信索引。微信已经开放了小程序的内搜索,可以通过这个文件去配置

 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": "*"
  }]
}
  • path/to/page?a=1&b=2 => 优先被索引
  • path/to/page?a=1&b=2&c=3 => 优先被索引
  • path/to/page => 不被索引
  • path/to/page?a=1 => 不被索引
  • 其他页面不会被索引

注:没有 sitemap.json 则默认所有页面都能被索引

注:{"action": "allow", "page": "*"} 是优先级最低的默认规则,未显式指明 "disallow" 的都默认被索引

猜你喜欢

转载自www.cnblogs.com/wrhbk/p/12084936.html