【微信小程序】小程序基本组成结构(中)

简介: 【微信小程序】小程序基本组成结构

app.json

基本配置内容

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


主要作用


app.json 是一个常见的配置文件,用于定义应用程序的元数据和配置信息。它通常用于在构建、部署或托管应用程序时提供关键设置和信息。


作用:


  1. 元数据定义:app.json 文件可以包含关于应用程序的元数据信息,例如应用名称、版本号、描述等。这些信息可以用于应用商店列表、应用程序管理和展示等场景。
  2. 环境配置:app.json 文件可以包含应用程序的环境相关配置。这些配置可能包括数据库连接字符串、API 地址、密钥等,使得应用程序能够根据不同环境进行配置。
  3. 构建和部署配置:app.json 文件可以指定构建和部署应用程序所需的一些配置,例如构建脚本、输出目录、依赖项等。这样可以简化构建和部署过程。


代码示例:


以下是一个简单的 app.json 文件示例:

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "A sample application",
  "environment": {
    "apiUrl": "https://api.example.com",
    "apiKey": "123456789"
  },
  "scripts": {
    "build": "npm run compile && npm run bundle",
    "compile": "babel src -d dist",
    "bundle": "webpack"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.2",
    "axios": "^0.24.0"
  }
}


在这个示例中,app.json 包含了一些关键的配置信息:

  • "name":应用程序的名称。
  • "version":应用程序的版本号。
  • "description":应用程序的描述。
  • "environment":包含环境相关的配置信息,如 API 地址和密钥。
  • "scripts":定义了一些脚本命令,例如构建、编译和打包命令。
  • "dependencies":列出了应用程序依赖的库和版本。


实际的 app.json 文件可以根据不同项目和需求进行自定义。它允许你提供应用程序的元数据和配置信息,以便于构建、部署和管理应用程序。


app.wxss

基本配置内容


/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}


主要作用


app.wxss 是一个用于定义小程序全局样式的文件。它是微信小程序中的一种样式文件,用于设置应用程序的整体样式和布局。


作用:


  1. 全局样式:app.wxss 文件可以设置小程序的全局样式,包括页面的背景色、字体样式、字体大小等。这些样式会应用到整个小程序的所有页面和组件上。
  2. 样式重置:通过 app.wxss 文件,你可以重置默认样式,并定义全局的样式规则,以确保应用程序在不同设备上的一致性。
  3. 主题切换:通过修改 app.wxss 文件中的样式,你可以实现应用程序的主题切换功能,例如暗黑模式和日间模式。


代码示例:


以下是一个简单的 app.wxss 文件示例:

/* app.wxss */
/* 全局样式 */
body {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
}
/* 页面标题样式 */
.page-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333333;
}
/* 按钮样式 */
.button {
  width: 120rpx;
  height: 40rpx;
  background-color: #007bff;
  color: #ffffff;
  border-radius: 4rpx;
}


在这个示例中,我们使用了 CSS 语法来定义全局样式和特定元素的样式。

  • body 选择器定义了整个小程序的页面背景色和字体样式。
  • .page-title 类选择器定义了页面标题的样式,包括字体大小、粗细和颜色。
  • .button 类选择器定义了按钮的样式,包括宽度、高度、背景色、文字颜色和边框圆角。


以上只是一个简单的示例,实际的 app.wxss 文件可以根据你的需求来定义更多样式规则,以满足应用程序的设计和展示要求。


project.config.json

基本配置内容


{
  "appid": "touristappid",
  "compileType": "miniprogram",
  "libVersion": "2.33.0",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}


主要作用


project.config.json 是一个用于配置小程序项目的文件。它是微信小程序开发中的一个重要配置文件,用于定义项目的基本信息、编译选项和插件配置等。


作用:


  1. 项目配置:project.config.json 文件包含了项目的基本信息,例如项目名称、开发者信息、项目描述等。这些信息在小程序开发工具中显示,并提供给开发者和团队成员参考。
  2. 编译选项:通过 project.config.json 文件,你可以设置小程序项目的编译选项,例如编译模式、压缩代码、生成 Source Map 等。这些选项可以影响构建和发布过程。
  3. 插件配置:如果你在小程序项目中使用了插件,project.config.json 允许你配置插件相关的信息,例如插件列表、插件版本等。


代码示例:


以下是一个简单的 project.config.json 文件示例:

{
  "miniprogramRoot": "./dist",
  "appid": "wx1234567890abcdef",
  "projectname": "My Mini Program",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
  },
  "compileType": "miniprogram",
  "plugins": {},
  "useExtendedLib": {}
}
相关文章
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
10天前
|
小程序 前端开发 JavaScript
微信外卖小程序
微信外卖小程序
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|springboot“口腔助手”小程序的设计与实现
微信小程序|springboot“口腔助手”小程序的设计与实现
|
3天前
|
小程序 前端开发 Android开发
Android企业微信分享到小程序
Android企业微信分享到小程序
9 0
|
4天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|智慧物流小程序的设计与实现
微信小程序|智慧物流小程序的设计与实现
|
30天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
46 5
|
18天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
35 8

热门文章

最新文章