对小程序的初了解

WXML和HTML的区别

标签名称不同

HTML:div、a、span、img

WXML:view、text、image、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组件

对小程序的初了解_第1张图片

常用的基础内容组件

text:文本组件  类似于span ,行内元素

手机号支持长按选中效果:110

rich-text:富文本组件,支持把HTML字符串渲染成 WXML 结构

标题">
把HTML字符串渲染成对应的UI结构

其他常用组件

button:按钮组件(type="",size="",plain 镂空)

              通过open-type 属性可以调用 微信提供的各种功能(客服、转发、获取用户授权)

image:图片组件

              image组件默认宽度 300px,高度约240px对小程序的初了解_第2张图片

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回调函数接收数据

你可能感兴趣的:(小程序,小程序)