微信小程序开发笔记(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 渲染模式是新的渲染模式,目前还不成熟

    • 操作:

      json 复制代码
      **//去掉以下配置项**
        "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

    json 复制代码
    "useCompilerPlugins": [
      "sass"
    ]

    之后将 .wxss 文件改为 .scss

sitemap.json配置

  • 没有sitemap.json则默认所有页面都能被索引。
  • {"action": "allow", "page": "*"}是优先级最低的默认规则,未显式指明"disallow"的都默认被索引。
相关推荐
我命由我123451 小时前
Photoshop - Photoshop 工具从工具栏消失
笔记·学习·ui·职场和发展·职场发展·photoshop·ps
zhangrelay8 小时前
操作系统全解析:Windows、macOS与Linux的深度对比与选择指南(AI)
linux·笔记·学习
灰太狼大王灬8 小时前
Node.js 本地服务部署、常驻及调用完整笔记
笔记·node.js
聪明的笨猪猪8 小时前
Java SE “面向对象”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
聪明的笨猪猪9 小时前
Java 集合 “List + Set”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
岑梓铭10 小时前
《考研408数据结构》第三章(3.1 栈)复习笔记
数据结构·笔记·考研·408
丶Darling.10 小时前
26考研 | 王道 | 计算机组成原理 | 二、数据的表示和运算
笔记·学习·计算机组成原理
丰锋ff10 小时前
2017 年真题配套词汇单词笔记(考研真相)
笔记
丰锋ff10 小时前
2009 年真题配套词汇单词笔记(考研真相)
笔记·学习·考研
聪明的笨猪猪12 小时前
Java SE “泛型 + 注解 + 反射”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试