微信小程序的基本操作

1. 搭建编辑环境

第一步：注册账号，安装微信小程序开发者工具

第二步：新建项目，不使用云服务，选择JavaScript语言

2. 认识小程序项目的基本组成结构

pages：用来存放小程序所有的页面

utils：用来存放工具性质的模块（例如：格式化时间的自定义模块）

app.js: 小程序项目的入口文件

app.json： 小程序项目的全局配置文件

app.wxss： 小程序项目的全局样式文件

3. 小程序文件

页面中json文件

.json: 当前页面的配置文件，配置窗口的外观，表现等 会覆盖app.json中的配置

app.json 内容

pages： 用来记录当前小程序所有页面的路径

window： 全局定义小程序所有页面的背景色，文字颜色

style：全局定义小程序组件所使用的样式版本

sitemaplocation： 用来指明sitemap.json 的位置

project.config.json

是项目配置文件，用来记录对微信开发者工具所做的个性化配置

4. 认识小程序页面

新建小程序页面:app.json中加入路径

修改小程序首页:修改app.json中pages的存放路径

wxml和html区别

1. 标签名称不同

• div,span,img,a
• view,text,image,navigator

2. 属性节点不同

• a-href
• navigator-url

3. 提供了类似vue的模板语法

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

什么是wxss

类似css

• 新增了rpx尺寸单位
• 提供了全局的样式和局部样式
• 仅仅支持部分css选择器

5. 小程序的宿主环境

通信的主体

渲染层 wxml和wxss工作在渲染层

逻辑层 js脚本工作在逻辑层

通信模型

渲染层和逻辑层的通信由微信客户端进行转发

同时客户端负责与服务器之间的数据请求和数据响应

运行机制

小程序启动

1. 下载代码包
2. 解析app.json全局配置文件
3. 执行app.js入口文件,调用app()创建小程序实例
4. 渲染小程序首页
5. 启动完成

页面渲染

1. 加载页面的.json配置文件
2. 加载.wxml和.wxss样式
3. 执行页面的.js文件,调用page()创建页面

1. 常用的视图容器组件

• view: 类似div
• scroll-view: 可滚动的视图效果
• swiper: 轮播图外面盒子 swiper-item:每个轮播图项目

2. view组件

flex布局

效果

wxml

wxss

3.flex布局

容器的6个属性

1. flex-direction： 设置主轴方向

• row：从左到右
• row-reverse: 从右到左
• column:从上到下
• column-reverse:从下到上

1. flex-wrap: 设置换行方式

• nowrap: 不换行
• wrap:正常换行
• wrap-reverse: 换行,第一行在下方

1. flex-flow: 综合前面两个属性
2. justify-content: 决定x轴排列方式

• flex-start: 顶着左边开始排列
• flex-end: 顶着右边开始排
• center: 居中
• space-between:顶着左右两边,间距一致
• space-around:与左右两边有间距,所有间距一致

1. align-items: 决定在y轴上的排列