微信小程序开发笔记（01_小程序基础与配置文件）

@ZZHow(ZZHow1024)

参考课程:

【尚硅谷微信小程序开发教程】

[https://www.bilibili.com/video/BV1LF4m1E7kB]

009_文件和目录结构介绍+新建页面与调试基础库

• 一个完整的小程序项目分为两个部分：主体文件、页面文件

• 主体文件又称全局文件，能够作用于整个小程序，影响到小程序的每个页面，主体文件必须放到项目的根目录下

  • 主体文件由三部分组成：
    1. app.js：小程序入口文件
    2. app.json：小程序的全局配置文件
    3. app.wxss：小程序的全局样式
  • 注意：主体文件的名字必须是app，app.js 和 app.json 文件是必须的

• 页面文件 是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹

  • 每个页面通常由四个文件组成，每个文件只对当前页面有效：
    1. .js：页面逻辑
    2. .wxml：页面结构
    3. …wxss：页面样式
    4. .json：小页面配置
  • 注意：.js文件 和 .wxml 文件是必须的

• 将 Skyline 渲染模式切换为 Webview 渲染模式

  • 原因：Skyline 渲染模式是新的渲染模式，目前还不成熟

  • 操作：

    **//去掉以下配置项**"renderer": "skyline","rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}},"componentFramework": "glass-easel",
    

• 快速新建页面：

  • 在 app.json 中找到 pages 配置项，添加一个页面即可。

010_如何调试小程序项目

• 预览、真机调试：手机扫码调试
• 模拟器调试：开发者工具右侧
  • 若出现不符合预期的情况：
    • 清缓存
    • 项目 - 重新打开此项目

011_配置文件介绍

• 常见的四个配置文件
  1. app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
  2. 页面json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等。
  3. project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置。
  4. sitemap.json：配置小程序及其页面是否允许被微信索引l，提高小程序在搜索引擎搜索到的概率。

全局配置

• pages 配置：

  • 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理。
  • 小程序中新增/减少页面，都需要对pages数组进行修改。
  • 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

• window 配置：

  • “navigationBarTitleText”：顶部标题

  • "navigationBarBackgroundColor”：顶部标题颜色

  • “enablePullDownRefresh”：是否允许下拉

  • "backgroundColor”：窗口的背景色

  • 官方文档：

    全局配置 | 微信开放文档

• tabBar配置：

  • “color”：tab 上的文字默认颜色，仅支持十六进制颜色

  • “selectedColor”：tab 上的文字选中时的颜色，仅支持十六进制颜色

  • 官方文档：

    全局配置 | 微信开放文档

页面配置

• 会覆盖全局配置中的内容

项目配置

• project.private.config.json 写到 .gitignore 避免版本管理的冲突。

• 与最终编译结果有关的设置必须设置到 project.config.json 中。

• 如何配置sass

  "useCompilerPlugins": ["sass"
  ]
  

  之后将 .wxss 文件改为 .scss

sitemap.json配置

• 没有sitemap.json则默认所有页面都能被索引。
• {“action”: “allow”, “page”: “*”}是优先级最低的默认规则，未显式指明"disallow"的都默认被索引。