zoukankan      html  css  js  c++  java
  • 微信小程序学习二 微信小程序的项目结构

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

    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": "*"
      }]
    }
    • 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" 的都默认被索引

  • 相关阅读:
    系统维护相关问题
    Python环境维护
    哈希表解决字符串问题
    论文笔记二:《A Tutoral on Spectral Clustering》
    论文笔记之哈希学习比较--《Supervised Hashing with Kernels》《Towards Optimal Binary Code Learning via Ordinal Embedding》《Top Rank Supervised Binary Coding for Visual Search》
    Java中String、StringBuffer、StringBuilder的比较与源 代码分析
    浙大pat1040 Longest Symmetric String(25 分)
    浙大pat1039 Course List for Student(25 分)
    浙大pat---1036 Boys vs Girls (25)
    百炼oj-4151:电影节
  • 原文地址:https://www.cnblogs.com/wrhbk/p/12084936.html
Copyright © 2011-2022 走看看