0
点赞
收藏
分享

微信扫一扫

微信小程序学习笔记

芭芭蘑菇 2022-01-10 阅读 65

目录

项目结构

在这里插入图片描述

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

在这里插入图片描述

WXML 和 HTML 的区别

① 标签名称不同

  • HTML (div, span, img, a)
  • WXML(view, text, image, navigator)

② 属性节点不同

 <a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>

③ 提供了类似于 Vue 中的模板语法

  • 数据绑定
  • 列表渲染
  • 条件渲染

WXSS 和 CSS 的区别

① 新增了 rpx 尺寸单位

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

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

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

③ WXSS 仅支持部分 CSS 选择器

  • .class 和 #id
  • element
  • 并集选择器、后代选择器
  • ::after 和 ::before 等伪类选择器

在这里插入图片描述

小程序启动的过程

① 把小程序的代码包下载到本地
② 解析 app.json 全局配置文件
③ 执行 app.js 小程序入口文件,调用 App() 创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成

页面渲染的过程

① 加载解析页面的 .json 配置文件
② 加载页面的 .wxml 模板和 .wxss 样式
③ 执行页面的 .js 文件,调用 Page() 创建页面实例
④ 页面渲染完成

小程序中组件的分类

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问

常用的视图容器类组件

① view

  • 普通视图区域
  • 类似于 HTML 中的 div,是一个块级元素
  • 常用来实现页面的布局效果

② scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

③ swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图 item 组件
举报

相关推荐

0 条评论