Open Main menu

part1

by lcm 11 月 21, 2024 0 comment

part1

part1

概识:

​1715331211260​
项目的基本组成结构

  1. pages:用来存放所有小程序的页面
  2. utils:用来存放工具模块.格式化时间的自定义模块
  3. app.js:小程序项目的入口文件
  4. app.json:小程序项目的全局配置文件
  5. app.wxss 小程序项目的全局样式文件
  6. project.config.json :项目的配置文件
  7. sitemap.json :用来配置小程序是否允许被微信索引
  • pages(文件夹)
    • index页面(文件夹)
    • .js文件:页面的脚本文件
    • .json文件:当前页面的配置文件,配置窗口外观,表现等:会覆盖app.json文件的配置项
    • .wxml文件:页面的模版结构文件
    • .wxss文件:当前页面的样式表文件
  • utils(文件夹)
  • app.js
  • app.json
    • pages:用来记录当前小程序所有页面的路径
    • window:全局定义小程序所有页面的背景色,文字颜色等
    • style:全局定义小程序组件所使用的样式版本
    • sitemapLocation:用来指明sitemap.json的位置
  • app.wxss
  • project.config.json:项目配置文件,用于记录对小程序开发所做的个性化配置
  • sitemap.json

app.json页面

  • 在pages数组中添加新页面的路径即可快速创建新页面
  • pages数组中第一个页面为项目的首页

WXML和HTML页面的区别

  • 标签名称不同
    • HTML(div,span,img,a)
    • WXML(view,text,image,navigator)
  • 属性节点不同
  • 提供了类似于Vue中的模版语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

WXSS和CSS的区别

  • 新增了rpx尺寸单位
  • 提供了全局的样式和局部的样式
    • 根目录的app.wxss作用于所有页面
    • 局部.wxss样式仅对当前页面生效
  • 仅支持部分的CSS选择器
    • .class和#id
    • element
    • 并集选择器,后代选择器
    • ::after和::before等伪类选择器

小程序中的.js文件

  1. app.js
    • 页面的js文件,通过调用App()函数来启动小程序
  2. 页面的.js文件
    • 页面的入口文件,调用page()函数来创建并运行页面
  3. 普通的.js文件
    • 功能模块文件,用于封装公共的函数或属性供页面使用

宿主环境

  • 概念:程序运行时所必须的宿主环境

通信模型:

通信的主体:
  • 渲染层
  • 逻辑层

组件(宿主环境提供)

  • 视图容器
    • view
    • 普通视图区域
    • 类似html的div是一个块级元素
    • 实现页面布局效果
    • scroll-view
    • 可滚动试图区域
    • 实现列表滚动效果
    • swiper和swipei-item
    • 轮播图容器组件和轮播图item组件
  • 基础内容
  • 表单组件
  • 导航组件
  • 媒体组件
  • map地图组件
  • canvas画布组件
  • 开放能力
  • 无障碍访问
视图容器:
view
<view>这是内容</view>
scroll-view(滚动效果)
<scroll-view scroll-y>
    <view>内容块A</view>
    <view>内容块B</view>
    <view>内容块C</view>
    <view>内容块D</view>
    <view>内容块E</view>
</scroll-view>
swiper和swiper-item(轮播图)
<swiper>
    <swiper-item>第一个轮播图</swiper-item>
    <swiper-item>第二个轮播图</swiper-item>
    <swiper-item>第三个轮播图</swiper-item>
    <swiper-item>第四个轮播图</swiper-item>
</swiper>
swiper常用的属性:
属性 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,3) 指示点颜色
indicator-active-color color #000000# 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换的时间间隔
circular boolean false 是否采用衔接滑动
基础内容组件
text
  • 文本组件
  • 类似于\标签,是一个行内元素
rich-text
  • 富文本文件
  • 支持把HTML字符串渲染为WXML
其他常用组件:
  1. button按钮组件
    • type—按钮种类
    • size—按钮大小
    • plain—镂空按钮
  2. image图片组件
    • 默认宽度约300px，高度约为240px
    • scaletofill:填充
    • aspectfit:保持纵横比完整显示图片
    • widthfill:保持纵横比缩放图片,只保证完全显示短边
    • widthfix:宽度不变,高度自动变化,同时保持纵横比
    • heightfix:高度不变,宽度自动变化,保持原图宽高比不变
  3. navigator
    • 页面导航组件
    • 类似于HTML中的A链接

API

  1. 事件监听API
    • 以on开头,用来监听某些事件的触发
    • e:wx.onwindowresize()
  2. 同步API
    • 以sync结尾
    • 执行结果通过函数值返回可直接获取
  3. 异步API

‍

Post Views: 2
WXML

Write your comment Here