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

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

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": {}
}
相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
56 1
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
84 6
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
952 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
38 0
|
3月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
4月前
|
移动开发 小程序 前端开发
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
678 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
740 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
144 7