对小程序的初了解
WXML和HTML的区别
标签名称不同
HTML:div、a、span、img
WXML:view、text、image、navigator
属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
提供了类似vue的模板语法
数据绑定
列表渲染
条件渲染
WXSS 和 CSS 的区别
新增了 rpx 尺寸单位
提供了全局的样式和局部样式
根目录 app.wxss 会作用于所有小程序
局部页面的 .wxss 样式仅对当前页面生效
wxss仅支持部分css选择器
.class 和 #id
element
并集选择器 和 后代选择器
::after 和 ::before 等伪类选择器
小程序的 .js 文件
app.js
整个小程序项目的入口文件,通过APP函数来启动整个小程序
页面的 .js
页面的入口文件通过 Page() 函数来创建并运行页面
普通的 .js文件
是普通功能模块文件,用于封装公共的函数或属性供页面使用
小程序的组件
视图组件
view:普通视图区域
类似于HTML 中的div,块级元素
常用来实现页面的布局效果
scroll-view:可滚动的视图区域
常用来实现滚动列表效果
swiper 和 swiper-item:轮播图组件和轮播图item组件
常用的基础内容组件
text:文本组件 类似于span ,行内元素
手机号支持长按选中效果:<text selectable>110</text>
rich-text:富文本组件,支持把HTML字符串渲染成 WXML 结构
<rich-text nodes="<h1 style="color:red;">标题</h1>"></rich-text>
把HTML字符串渲染成对应的UI结构
其他常用组件
button:按钮组件(type="",size="",plain 镂空)
通过open-type 属性可以调用 微信提供的各种功能(客服、转发、获取用户授权)
image:图片组件
image组件默认宽度 300px,高度约240px
navigator:导航组件
小程序API的3大分类
事件监听API
特点:
- 以on开头,用来监听某些事件的触发。
- wx.onWindowResize 监听窗口尺寸变化的事件
同步API
特点:
- 以sync结尾的API都是同步API
- 同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- wx.setStorageSync('key','value') 向本地存储中写入内容
异步API
特点:
- 类似于jquery中$.ajax(options) 函数需通过success、fail、complete接收调用的结果
- wx.request()发起网络数据请求,通过success回调函数接收数据