小程序基础知识1

项目基本组成结构

名称	作用
pages	存放所有小程序页面
app.js	项目入口文件
app.json	全局配置文件
app.wxss	全局样式文件
app.json	全局配置文件

基本组成结构 - pages

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

名称	作用
.js	脚本文件、页面数据、事件处理函数
.json	当前页面配置文件、外观、表现
.wxml	模板结构
.wxss	样式表

代码构成 - json

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

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

app.json

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

名称	作用
pages	页面路径
window	背景色、文字颜色
style	样式版本

project.config.json

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

名称	作用
setting	编译相关配置（详情-本地设置）
projectname	项目名称（不是程序名称）
appid	账号id

sitemap.json

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

页面的.json

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

新建小程序页面

在 app.json 中的 pages 添加路径

默认首页在第一行 （index）

代码构成 - wxml

标签语言 类似html

代码构成 - wxss

样式语言 类似css

代码构成 - js逻辑交互

处理用户操作

名称	作用
app.js	整个项目入口文件，用App()函数启动
页面.js	页面入口文件，用page()创建、调动
普通.js	功能模块文件，封装公共函数或属性

宿主环境

小程序宿主环境：

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

通信模型

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

常用组件

组件-视图容器类

名称	作用
view	普通视图
scroll-view	滚动视图
swiper/swiper-item	轮播图

wxml写结果 wxss写样式

scroll-view 滚动视图

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

swiper/swiper-item 轮播图

swiper常用属性

加在class后面

组件-基础内容类

text

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

名称	作用
selectable	长按选中

rich-text

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

组件-其他常用

button

按钮组件

名称	作用
type	指定按钮类型
size	小尺寸按钮
plain	镂空按钮

image

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

mode属性

navigator

页面导航组件

API

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

事件监听API

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

同步API

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

异步API

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