微信小程序

基本项目目录

1.基本语法： View 相当于div
2.组件属性： Page{ }
3.boolean类型： {{ true/false }}
4. 三元运算： {{flag？ true:false}}
5. 算数运算: {{ a+b }}
6.逻辑判断: wx: if=”{{ a> b }}”
7.字符串运算: {{“hello”+ word }}
8.列表渲染: item wx:for–item 可以指定数组当前元素的变量名

           index wx:for--index 可以指定数组当前下标的变量名
           wx:key ⽤来提⾼数组渲染的性能 wx:key 绑定的值

block ,渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

9.条件渲染: 在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

Hidden, 类似 wx:if 频繁切换 ⽤ hidden，不频繁切换使用wx:if

10.小程序的事件绑定: 通过bind关键字来实现。
特别注意：

绑定事件时不能带参数 不能带括号

事件传值 通过标签⾃定义属性的⽅式 和 value

事件触发时获取数据

11.小程序的样式（rpx）
Iphone6： 1rpx=0.5px 1px=2rpx

12.小程序的样式（导入样式）
wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。 使⽤ @import

13.小程序的样式（选择器 ）
.class
#id
Element

常见的组件

text ⽂本标签
Selectable Boolean类型 文本是否可选
Decode Boolean类型 是否解码

Img mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式

swiper:微信内置轮播图组件
swiper:滑块视图容器。

swiper-item:滑块

navigator: 导航组件 类似超链接标签

open-type 有效值：

rich-text:富文本标签
button:按钮
icon：

radio：
可以通过 color属性来修改颜色
需要搭配 radio-group ⼀起使⽤

checkbox

可以通过 color属性来修改颜色
需要搭配 checkbox-group ⼀起使⽤

自定义组件

组件之间的数据传递

组件间的基本通信方式有以下几种。

◼ WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON

◼ 事件：用于子组件向父组件传递数据，可以传递任意数据。

子组件向父组件传递数据

父组件向子组件传递数据

应用生命周期

页面生命周期

tabbar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及
tab 切换时显示的对应页面。

获取系统信息

wx.getSystemInfoAsync 异步获取系统信息

Object wx.getSystemInfoSync() 同步获取系统信息

路由

wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

◼ wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
◼ wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

获取个人信息

◼ wx.getUserProfile(Object object)

◼ 获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回
userInfo。

同步缓存

wx.setStorageSync(string key, any data) 同步设置缓存

◼ string key
◼ 本地缓存中指定的 key
◼ any data
◼ 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

wx.getStorageSync(string key) 同步获取缓存

异步设置缓存

异步获取缓存

wx.getStorage(Object object) 异步获取缓存

发送网络请求

wx.request(Object object) 发起 HTTPS 网络请求。

发送网络请求