微信小程序学习

1.全局配置

pages字段

在这里插入图片描述
用于描述当前小程序所有页面路径

window字段

用于定义小程序所有页面的顶部背景颜色,文字颜色定义等

tabbar字段

用于定义客户端页面底部或顶部的菜单栏

networkTimeout字段

各类网络请求的超时时间,单位均为毫秒。

2. 页面配置

3. sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;

4.数据绑定

每一个小程序页面都有三个文件:index.wxml、index.wxss、index.js。
在index.js中的page字段的data属性里我们可以定义变量,然后在index.wxml中进行引用。
微信小程序学习_第1张图片

5.wx:for循环渲染

wx:for不仅可以渲染数组,还可以渲染对象
数组渲染

wx:for="{{数组}}"
wx:for-item="循环项的名称"
wx:for-index="循环项的索引"
wx:key="唯一的值" 用来提高列表渲染的性能

对象渲染

wx:for="{{对象}}"
wx:for-item="对象的属性的值"
wx:for-index="对象的属性"
wx:key="唯一的值" 用来提高列表渲染的性能

6.条件渲染

  1. wx:if
    和vue中的条件渲染用法一样
    分别是 wx:if (v-if) 、 wx:elif (v-else-if) 、 wx:else (v-else)
  2. hidden
    1. 直接在标签中添加hidden属性
    2. hidden="{{表达式}}"
      在这里插入图片描述
  3. 根据使用场景选择
    1. 频繁切换显示的时候使用hidden 因为它是通过更改样式的方式来切换显示
    2. 不频繁的切换显示的使用使用wx:if 因为它是通过直接把标签从页面结构中移除来切换显示的
    3. 就相当于vue 中的v-if和v-show一样

7.事件绑定

绑定关键字是 bind
例如输入框绑定输入事件

<input type="text" bindinput="handleInput"/>

改变:

  1. click事件改成了tap事件
  2. 给index.js中page字段的data数据赋值
Page({
	data:{
		num:0
	},
	handleInput(e){
		this.setData({
			num:e.detail.value
		})
	}
})
不能像vue中直接通过this赋值:this.num=e.detail.value
获取值的方法也改为:this.data.num 相比于vue多了个data

  1. 不能在事件中直接传值,需要通过自定义属性的方式来传递参数,然后在事件中获取自定义属性

8.尺寸单位

rpx,可以根据屏幕宽度自适应。规定所有的屏幕宽度为750rpx。然后在根据屏幕实际宽度有多少px,换算1rpx等于多少px。
例如:iphone6的屏幕宽度为375px,共有750个物理像素,那么1rpx=0.5px=1物理像素

9.wxss选择器不支持*通配符

10.小程序标签

  1. view 代替 div
  2. text
    1. 文本标签
    2. 只能嵌套text
    3. 长按文字可以复制 selectable属性
    4. 可以对空格 回车 进行编码
  3. image
    1. 默认宽度320px,高度240px
    2. 常用属性:
      1. lazy-load:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
      2. mode:图片的裁减、缩放模式
      3. show-menu-by-longpress:开启长按图片显示识别小程序码菜单
  4. swiper 轮播图组件
  5. navigator(是块级元素) 类似超链接标签
    1. url:要跳转的页面路径 绝对路径 相对路径
    2. target: 默认值self 跳转自己小程序的页面 , miniProgram其他小程序的页面
    3. open-type:跳转方式
  6. rich-text 富文本标签,类似v-html
  7. button
    1. size:按钮尺寸
    2. type:样式
    3. open-type:
      1. contact:直接打开 客服对话功能 需要在微信小程序的后台配置
      2. share:转发当前的小程序 到微信朋友中
      3. getPhoneNumber:获取当前用户的手机号码信息
      4. getUserInfo 获取当前用户的个人信息
      5. launchApp:打开APP
      6. openSetting:打开授权设置页
      7. feedback:打开“意见反馈”页面
  8. radio
    1. 可以通过color属性修改选中颜色
    2. 绑定事件需要结合radio-group使用
  9. checkbox

11.自定义组件

  1. 父组件向子组件传递数据
    1. 在父组件使用子组件时绑定数据
      在这里插入图片描述
    2. 在组件的js文件中定义绑定数据的数据类型和值
      微信小程序学习_第2张图片
  2. 子组件向父组件传递数据
    1. this.triggerEvent(“父组件事件”,要传递的参数);
    2. 在父组件中为子组件绑定事件:
      在这里插入图片描述
  3. slot插槽

12.应用生命周期

  1. onLaunch:应用第一次启动就会触发的事件
  2. onShow: 当应用被用户看到时(切手机页面如何再回来)
  3. onHide:当应用被隐藏时(切手机页面)
  4. onError:应用代码发生报错了就会触发
  5. onPageNotFound:应用第一次启动的时候,找不到第一个入口页面的时候就会触发

13.页面生命周期

  1. data:页面的初始数据
  2. onLoad:监听页面加载
  3. onShow:监听页面显示
  4. onReady:监听页面初次渲染完成
  5. onHide:监听页面隐藏
  6. onUnload:监听页面卸载
  7. onPullDownRefresh:监听用户下拉动作
  8. onReachBottom:页面上啦触底事件的处理函数
  9. onShareAppMessage:用户点击右上角转发
  10. onPageScroll:页面滚动触发事件的处理函数
  11. onResize:页面尺寸改变时触发
  12. onTabItemTap:当前是tab页时,点击tab时触发

你可能感兴趣的:(微信小程序学习)