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脚本工作在逻辑层
通信模型
渲染层和逻辑层的通信由微信客户端进行转发
同时客户端负责与服务器之间的数据请求和数据响应
运行机制
小程序启动
- 下载代码包
- 解析app.json全局配置文件
- 执行app.js入口文件,调用app()创建小程序实例
- 渲染小程序首页
- 启动完成
页面渲染
- 加载页面的.json配置文件
- 加载.wxml和.wxss样式
- 执行页面的.js文件,调用page()创建页面
1. 常用的视图容器组件
- view: 类似div
- scroll-view: 可滚动的视图效果
- swiper: 轮播图外面盒子 swiper-item:每个轮播图项目
2. view组件
flex布局
效果
wxml
wxss文章来源：https://www.toymoban.com/news/detail-486898.html
3.flex布局
容器的6个属性文章来源地址https://www.toymoban.com/news/detail-486898.html
- flex-direction： 设置主轴方向
- row：从左到右
- row-reverse: 从右到左
- column:从上到下
- column-reverse:从下到上
- flex-wrap: 设置换行方式
- nowrap: 不换行
- wrap:正常换行
- wrap-reverse: 换行,第一行在下方
- flex-flow: 综合前面两个属性
- justify-content: 决定x轴排列方式
- flex-start: 顶着左边开始排列
- flex-end: 顶着右边开始排
- center: 居中
- space-between:顶着左右两边,间距一致
- space-around:与左右两边有间距,所有间距一致
- align-items: 决定在y轴上的排列方式 <
到了这里，关于微信小程序的基本操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
