微信小程序开发工程目录

Posted 2021-12-07 Jessica巨人

小程序的文件类型

.wxml （结构，类似于html）
标签名字：由html（< div>、< p>、< span>…）------- 微信小程序的WXML ()
wx:if 、wx:for、{{}}

<view id="overlay-bottom">
        <image id="experience" class="primary-button" src="/images/[e-mail]" bind:tap="experience"></image>
        <image id="scan" class="primary-button" src="/images/[e-mail]" bind:tap="scan"></image>
        <view id="download" class="primary-button" bind:tap="download">保存识别图</view>
        <view id="email" class="secondary-button">[e-mail]</view>
    </view>

.wxss (表现，类似于css)
1.具备CSS的大部分属性
2.新增尺寸单位
3.全局样式和局部样式

#select {
    position: absolute;
    bottom: 210rpx;
    right: 0;
    z-index: 20;
}
.selected {
    color: black;

    background: linear-gradient(90deg, #ABABAB 0%, #D6D6D6 50%, #ABABAB 100%);
}

.js (行为)
原生js语言

//界面：

    back: function () {
        this.runningCrs = false;
        this.setData({
            showOverlay: true,
            showContent: false,
            selectType: SELECT_TYPE.NONE,
        });
        this.hideLoading();
    },

.json (配置)
工具配置—project.config.json

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": false,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true
    },
    "condition": {
    "search": {
      "list": []
    },
    "conversation": {
      "list": []
    },
    "game": {
      "list": []
    },
    "plugin": {
      "list": []
    },
    "gamePlugin": {
      "list": []
    },
    "miniprogram": {
      "list": []
    }
  }
 }

项目配置—app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "标梵",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

页面配置—< page name>.json logs.json/package.json

{
  "name": "crsdemo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "miniprogram-api-typings": "^3.2.0"
  }
}

目录解释

pages目录—页面相关的代码 （新建小程序项目，自动生成默认有的）
utils目录—工具相关代码（网络请求、文件操作等） （新建小程序项目，自动生成默认有的）
其他文件—thirdparty(第三方代码)、conponents(小程序组件代码)、resources(存放小程序资源，图标图片等等)

小程序的全局入口、配置与样式

全局入口—app.js
全局配置—app.json
全局样式—app.wxss