文章目录

• 项目基本组成结构
• • 基本组成结构 - pages
  • 代码构成 - json
  • • app.json
    • project.config.json
    • sitemap.json
    • 页面的.json
• 新建小程序页面
• • 代码构成 - wxml
  • 代码构成 - wxss
  • 代码构成 - js逻辑交互
• 宿主环境
• • 通信模型
  • 常用组件
  • • 组件-视图容器类
    • • scroll-view 滚动视图
      • swiper/swiper-item 轮播图
      • • swiper常用属性
    • 组件-基础内容类
    • • text
      • rich-text
    • 组件-其他常用
    • • button
      • image
      • navigator
  • API
  • • 事件监听API
    • 同步API
    • 异步API

项目基本组成结构

基本组成结构 - pages

小程序所有页面存放入pages，以单独文件夹存在

代码构成 - json

json是一种数据格式，以 配置文件 的形式出现，小程序有四种（前三个是根目录的）：

1. app.json
2. project.config.json
3. sitemap.json
4. 页面文件夹的.json

app.json

小程序 全局配置 ，包括 页面路径、窗口外观、界面表现、底部tab

project.config.json

项目配置文件，对开发工具做个性化配置

sitemap.json

配置小程序页面是否允许 微信索引
不允许：
“action”：“disallow” –
project.config.json中setting “checkSitMap”：false

页面的.json

配置本页面窗口外观，会覆盖 app.json 的window中相同的配置项

新建小程序页面

在 app.json 中的 pages 添加路径

默认首页在第一行 （index）

代码构成 - wxml

标签语言 类似html

代码构成 - wxss

样式语言 类似css

代码构成 - js逻辑交互

处理用户操作

宿主环境

小程序宿主环境：

1. 通信模型
2. 运行机制
3. 组件
4. API

通信模型

主体：渲染层（wxml、wxss）、逻辑层（js脚本）

常用组件

组件-视图容器类

wxml写结果 wxss写样式

scroll-view 滚动视图

滚动效果
wxml加 scroll-view
wxss给scroll-view加固定高度/宽度

swiper/swiper-item 轮播图

swiper常用属性

加在class后面

组件-基础内容类

text

文本组件，类似于span，是行内元素

rich-text

富文本组件，把HTML字符串渲染为wxml结构

组件-其他常用

button

按钮组件

image

图片组件，默认宽300px，高200px

mode属性

navigator

页面导航组件

API

1. 事件监听API
2. 同步API
3. 异步API

事件监听API

以 on 开头，用来监听事件触发

同步API

以 Sync 结尾，执行结果通过函数返回值直接获取。异常报错

异步API

需要 success、fail、complete 接收调用结果