1200字范文 > 【微信小程序】wxml模板的使用

【微信小程序】wxml模板的使用

时间：2020-08-02 20:57:50

相关推荐

【微信小程序】wxml模板的使用

目录
一，wxml模板
1.什么是 WXML
2. 什么是 WXSS
3.WXSS 和 CSS 的区别
4 .JS 逻辑交互
二，小程序的宿主环境
1.宿主环境简介
1.什么是宿主环境
2. 小程序的宿主环境
3.宿主环境包含内容
2 通信模型
3 运行机制
4.组件
1.组件分为了 9 大类
2. 常用的视图容器类组件
3. view 组件的基本使用
4. scroll-view 组件的基本使用
5. swiper 和 swiper-item 组件的基本使用
6.常用的基础内容组件
7. 其它常用组件
8.button 按钮的基本使用
作者简介：一名C站萌新，前来进行小程序的前进之路博主主页：大熊李子的主页🐻

一，wxml模板

1.什么是 WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

WXML 和 HTML 的区别

标签名称不同

HTML （div, span, img, a） WXML（view, text, image, navigator）

属性节点不同

<a href="#">超链接

提供了类似于 Vue 中的模板语法数据绑定，列表渲染，条件渲染

2. 什么是 WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML的组件样式，类似于网页开发中的 CSS。

3.WXSS 和 CSS 的区别

1.新增了rpx尺寸单位CSS 中需要手动进行像素单位换算，例如 rem WXSS 在底层支持新的尺寸单位 rpx ，在不同大小的屏幕上小程序会自动进行换算

2.提供了全局的样式和局部样式项目根目录中的 app.wxss会作用于所有小程序页面局部页面的 .wxss样式仅对当前页面生效

3.WXSS 仅支持部分CSS选择器.class和 #id element 并集选择器、后代选择器 ::after 和 ::before 等伪类选择器

4 .JS 逻辑交互

1. 小程序中的 .js 文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过.js文件来处理用户的操作

2. 小程序中.js 文件的分类

小程序中的JS 文件分为三大类，分别是：

app.js是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

页面的 .js 文件是页面的入口文件，通过调用 Page() 函数来创建并运行页面

普通的 .js 文件是普通的功能模块文件，用来封装公共的函数或属性供页面使用

二，小程序的宿主环境

1.宿主环境简介

1.什么是宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：Android系统和iOS系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

2. 小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位等....

3.宿主环境包含内容

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

2 通信模型

1. 通信的主体

小程序中通信的主体是渲染层和逻辑层，其中：

WXML 模板和 WXSS 样式工作在渲染层

JS 脚本工作在逻辑层

2. 小程序的通信模型

小程序中的通信模型分为两部分：

1. 渲染层和逻辑层之间的通信

由微信客户端进行转发

2. 逻辑层和第三方服务器之间的通信

由微信客户端进行转发

3 运行机制

1. 把小程序的代码包下载到本地

2. 解析 app.json 全局配置文件

3. 执行 app.js 小程序入口文件，调用 App() 创建小程序实例

4. 渲染小程序首页

5. 小程序启动完成

2. 页面渲染的过程

1. 加载解析页面的 .json 配置文件

2. 加载页面的 .wxml 模板和 .wxss 样式

3. 执行页面的 .js 文件，调用 Page() 创建

4. 页面实例页面渲染完成

4.组件

1.组件分为了 9 大类

①视图容器②基础内容③表单组件④导航组件⑤媒体组件⑥map 地图组件 ⑦canvas 画布组件 ⑧开放能力 ⑨无障碍访问

2. 常用的视图容器类组件

1. view普通视图区域类似于 HTML 中的 div，是一个块级元素常用来实现页面的布局效果

2. scroll-view可滚动的视图区域常用来实现滚动列表效果

3. swiper 和 swiper-item轮播图容器组件和轮播图 item 组件

3. view 组件的基本使用

4. scroll-view 组件的基本使用

实现如图的纵向滚动效果

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 是否采用衔接滑动scroll-view的内层view元素需要：display: inline-block;scroll-view的外层元素需要：white-space:nowrap;