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" 的都默认被索引

  • 相关阅读:
    ReLU激活函数:简单之美
    逻辑回归(Logistic Regression)推导
    机器学习之视频推荐
    TensorFlow OOM when allocating tensor with shape[5000,384707]
    工银亚洲账户激活
    微信小程序之多行文本省略号
    关于微信小程序:scroll-view,backgroundTextStyle
    css之box-sizing属性(css3中的新属性)
    css之max-width属性
    css中的display属性之li元素
  • 原文地址:https://www.cnblogs.com/wrhbk/p/12084936.html
Copyright © 2011-2022 走看看