微信小程序--笔记

1. 基础

1.1 数据绑定

<text></text> // 相当于<span></span> 行内元素，不会换行
<view></view> // 相当于<div></div> 块级元素，会换行
<checkbox></checkbox> // 复选框标签

checkbox checked="{{isChecked}}"></checkbox> // 字符串和花括号{}之间一定不要存在空格，否则会导致识别失败
// 错误写法：checkbox checked="   {{isChecked}}"></checkbox>

1.2 运算

 1 可以在花括号中 加入 表达式 --  “语句”
    2 表达式
      指的是一些简单 运算 数字运算 字符串 拼接  逻辑运算。。
      1 数字的加减。。
      2 字符串拼接
      3 三元表达式 
    3 语句
      1 复杂的代码段
        1 if else
        2 switch
        3 do while
        4 for

1.3 列表循环

1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
2 wx:key="唯一的值" 用来提高列表渲染的性能
	1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
    2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
    [1,2,3,44,5]
    ["1","222","adfdf"]
3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
	wx:for-item="item" wx:for-index="index"
4 默认情况下 我们 不写
	wx:for-item="item" wx:for-index="index"
    小程序也会把 循环项的名称 和 索引的名称 item 和 index 
    只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略

1.4 对象循环

1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
2 循环对象的时候 最好把 item和index的名称都修改一下
	wx:for-item="value"  wx:for-index="key"

1.5 block标签

1 占位符一样的标签
2 写代码的时候 可以看到这标签存在
3 页面渲染 小程序会把它移除掉

1.6 条件渲染

wx:if="{{true/false}}"

// if , else , if else
// wx:if  wx:elif
    <view wx:if="{{结果为true}}">1</view>
    <view wx:elif>2</view>
hidden
    1 在标签上直接加入属性hidden
	2 hidden="{{true}}"
什么场景下用哪个
    1 当标签不是频繁的切换显示 有限使用 wx:if
	2 当标签频繁的切换显示的时候 优先使用 hidden
	注意：hidden不能与display混用

2. 事件绑定

2.1 事件绑定 bindinput

绑定关键字与web的onClick不同 小程序是 bindinput

2.2 获取输入框的值

通过事件源对象来获取
e.detail.value

2.3 把输入框的值赋值到data中

不能直接 
	1. this.data.num = e.detail.value
	2. this.num = e.detail.value
正确写法
	this.setData({
		num:e.detail.value
	})

2.3 给button加入点击事件

button添加点击事件用的关键字 bindtap

无法在小程序当中的事件中直接传参
通过自定义属性的方式来传递参数
事件源中获取自定义属性

3 样式 wxss

3.1

rpx: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。无论屏幕多宽都为750rpx

3.2 样式导入

1 引入的代码时通过@import来导入

2 路径只能写相对路径

4 常见组件

4.1 view

代替原来的div

4.2 text

1.文本标签
2.只能嵌套text
3.长按文字可以复制(只有该标签有这个功能)
4.可以对空格回车进行编码

1 长按文字复制 selectable
2 对文本内容济宁解码 decode

4.3 image

1 src 要加载的图片路径
​	图片存在默认的宽度和高度 320 * 240
2 mode 决定图片内容如何和图片标签宽高做适配
​	1 scaleToFill 默认值不包吃纵横比缩放图片， 使图片的宽高拉伸至填满image元素
​	2 aspectFit 保持宽高比 确保图片的长边显示出来 // mode="aspectFit"
​	3 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来 // mode="aspectFill"
​	4 widthFix web的图片的宽度指定了之后，高度会自己按比例来调整
3 小程序当中的图片直接就支持懒加载	lazy-load
​	1 lazy-load 会自己判断当图片出现在视口上下三屏的高度之内的时候 自己开始懒加载

4.4 swiper

1 轮播图外层容器swiper
2 每一个轮播项 swiper-item
3 swiper标签 存在默认样式
	1 width 100%
	2 height 150px 	  image 存在默认宽度和高度 320*240
 4 先找出来原图的宽高 等比例给swiper定宽度和高度
	1 swiper宽度 / swiper高度 = 原图的宽度 / 原图的高度
 5 autoplay 自动轮播
 6 interval 修改轮播时间
 7 circular 循环轮播
 8 indicator-dots 显示指示器 分页器 索引器

4.5 navigator 导航组件

0 块级元素 默认会换行 可以直接加宽度和高度
1 url要跳转的路径 绝对路径 相对路径
2 target要跳转到当前的小程序还是其他的小程序的页面
​	se1f默认值 自己小程序的页面
​	miniProgram 其他的小程序页面
3 open-type 跳转的方式
​	1 navigate 默认值  保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar⻚⾯
​	2 redirect  关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar⻚⾯。
​	3 switchTab  跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
​	4 reLaunch  关闭所有⻚⾯，打开到应⽤内的某个⻚⾯

4.6 rich-text 富文本标签

1 nodes属性来实现
​	1 接收标签字符串
​	2 接收对象数组

4.7 button 按钮

4.7.1 button 标签

1 外观的属性
	1 size 控制按钮的大小
		1 default 默认大小
		2 mini 小尺寸
	2 type 用来控制按钮的颜色
		1 default 灰色
		2 primary 绿色
		3 warn 红色
	3 plain 按钮是否镂空，背景色透明

4.7.2 button 开发能力

open-type:
1 contact  直接打开 客服对话功能 需要在微信小程序的后台配置 只能够通过真机测试来打开
2 share  转发当前的小程序到微信朋友中 不能把小程序分享到朋友圈
3 getPhoneNumber  获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号没有权限获取用户的手机号
1 绑定一个事件 bindgetphonenumber
2 在事件的回调函数中通过参数获取信息
3 获取到的信息已经加密过了		需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了
4 getUserInfo  获取当前用户的个人信息
​	1 使用方法类似获取用户的手机号码
​	2 可以直接获取 不存在加密的字段
5 launchApp  在小程序当中 直接打开app
​	1 需要先在app中通过app的某个链接 打开小程序
​	2 在小程序中在通过这个功能重新打开app
​	3 找到京东的app和京东的小程序
6 openSetting  打开小程序内置的授权页面
​	1 授权页面中只会出现用户曾经点击过的权限
7 feedback  打开小程序的意见反馈
​	1 只能够通过真机测试来打开

4.8 icon 图标

 1 type 图标的类型success|success_no_circle|info|warn|waiting|cancel|download|search|clear
 2 size 图标的大小
 3 color 图标的颜色

4.9 radio 单选框

1 radio标签必须和父元素radio-group来使用
2 value 选中的单选框的值
3 需要给 radio-group 绑定 change事件
4 需要在页面中显示选中的值
5 可以通过color属性改变颜色

4.10 checkbox 复选框

1 与radio单选框相似
2 可以通过color属性改变颜色

5 自定义组件

5.1 标题激活选中

在js的data中设置好标题，view标签内利用wx:for显示到页面上
激活样式用判断语句设置是否添加样式

6 其他属性

7 生命周期

7.1 应用生命周期

// 在小程序入口文件app.js编辑
onLaunch		应用第一次启动就会触发的事件
onShow		应用被用户看到时触发
onHide		应用被隐藏时触发
onError		在应用发生代码报错时触发
onPageNotFound		页面找不到就会触发

7.2 页面生命周期

// 在小程序各个页面的js中编辑

屏幕旋转在json中加上

”pageOrientation“: "auto"

7.3 生命周期图解