小程序基本概述

NewBoy
191 阅读5分钟

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

小程序简介

小程序与普通网页开发的区别

  • 运行环境不同

    • 网页运行在浏览器环境中
    • 小程序运行在微信环境中

  • API 不同

    由于运行环境不同，所以小程序中，无法调用 DOM 和 BOM 的API。但是，小程序可以调用微信环境提供的各种API，如扫码、支持、地理定位等等

  • 开发模式不同

    • 网页的开发模式：浏览器 + 代码编辑器
    • 小程序有自己的一套标准开发模式：
      • 申请小程序开发账号
      • 安装小程序开发工具
      • 创建和配置小程序项目

小程序体验

使用微信扫描官方提供的小程序码，可体验小程序（用的比较多的是组件和接口）

Snip20220118_2.png

小程序代码的构成

项目的基本组成结构

Snip20220118_9.png

  • pages :存放所有小程序的页面
  • utils :存放工具性质的模块（例如：格式化时间的自定义模块）
  • app.js :小程序项目的入口文件
  • app.json :小程序项目的全局配置文件
  • app.wxss :小程序项目的全局样式文件
  • project.config.json :项目的配置文件
  • sitemap.json :配置小程序及页面是否允许被微信索引

小程序页面的组成部分

小程序官方建议把所有小程序的页面都存放在 pages 目录中，以单独的文件夹存在。

Snip20220118_11.png

每个页面由 4 个基本文件组成

  • .js 文件: 页面的脚本文件，存放页面的数据，事件处理函数等
  • .json 文件: 当前页面的配置文件，配置窗口的外观、表现等
  • .wxml 文件:页面的模板结构文件
  • .wxss 文件:当前页面的样式表文件

小程序中有4种 json 配置文件

  • 项目根目录中的 app.json 配置文件

    app.json 是当前小程序的全局配置文件，包括了小程序所有的页面路径，窗口路径、界面路径、底部tab 等。

    Snip20220119_14.png

    • pages: 用来记录当前小程序所有页面的路径
    • window: 全局定义小程序所有页面的背景色、文字颜色等等
    • style: 全局定义小程序组件所使用的样式版本（v2目前是最新的样式）
    • sitemapLocation: 指明 sitemap.json 的位置

  • 项目根目录中的 project.config.json 配置文件

    project.config.json 是项目配置文件，用来记录我们对小程序开发工具的个性化配置

    • setting:保存了编译相关的配置

    • projectname:保存项目名称

    • appid:保存小程序的账号ID

  • 项目根目录中的 sitemap.json 配置文件

    微信现已开放小程序内搜索，效果类似于PC端网页的SEO。sitemap.json 文件用来配置小程序是否允许微信索引

    当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户搜索的关键字和页面的索引匹配超哥，小程序的页面将可能展示在搜索结果中

    Snip20220119_16.png

    action:表示允许搜索，不允许用 disallow 表示
    page: * 代码所有页面都允许被搜索

  • 项目根目录中的 index.json 配置文件

    小程序的每个页面，都使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中的相同配置项

小程序页面的新建和修改项目首页

  • 只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建页面文件

  • 修改项目首页。只需要调整 app.json -> pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染

小程序代码

  • 关于 WXML
    • WXML 是小程序框架设计的一套标签语言，用来构建小程序页面结构，类似网页开发中的 HTML
    • WXML 和 HTML 区别
      • 标签名称不同
        • HTML （div、span、img、a）
        • WXML（view、text、image、navigator）
      • 属性节点不同
        • < a href="#"> 超链接 < /a>
        • < navigator url="pages/list/list">< /navigator>
      • 提供类似于 Vue 中的模板语法
        • 数据绑定
        • 列表渲染
        • 条件渲染
  • 关于 WXSS
    • WXSS 是小程序框架设计的一套样式语言，用来描述WXML 的组件样式，类似网页开发中的 CSS
    • WXSS 和 CSS 区别

      • 新增了 rpx 尺寸单位

        • CSS 中需要手动进行像素单位换算，例如 rem
        • WXSS 在底层支持新的尺寸单位 rpx， 在不同大小的屏幕上小程序会自动进行换算

      • 提供了全局的样式和局部样式

        • 项目根目录中的 app.wxss 会作用于所有小程序页面
        • 局部页面的 .wxss 样式仅对当前页面生效

      • WXSS 仅支持部分 CSS 选择器

        • .class 和 #id
        • element
        • ::after 和 ::before 等伪类选择器
        • 并集选择器、后代选择器
  • 关于 js 文件
    • 在小程序中，通过 .js 文件处理用户的操作，例如：用户响应、获取用户的位置等等
    • 小程序中 .js 文件的分类

      • app.js的作用：整个小程序项目的入口，通过调用 APP() 函数来启动整个小程序

      • 页面的 .js 文件的作用：单独页面的入口文件，通过调用 Page() 函数来创建并运行页面

      • 普通的 .js 文件的作用：普通的功能模块文件，用来封装公共函数或属性提供页面使用

avatar
文章
阅读
粉丝