小程序知识

1、小程序特点

  • 没有 DOM
  • 组件化开发: 具备特定功能效果的代码集合
  • 体积小,单个压缩包体积不能大于 2M,否则无法上线
  • 小程序的四个重要的文件
    a) *.js
    b) *.wxml —> view 结构 ----> html
    c) *.wxss —> view 样式 -----> css
    d) *. json ----> view 数据 -----> json 文件
  • 小程序适配方案: rpx (responsive pixel 响应式像素单位)
    a) 小程序适配单位: rpx
    b) 规定任何屏幕下宽度为 750rpx
    c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小
    d) Iphone6 下: 1rpx = 1 物理像素 = 0.5px

2、小程序配置

  • 全局配置: app.json,作用: 用于为整个应用进行选项设置
  • 页面配置: 页面名称.json 作用:作用: 用于为指定的页面进行配置
  • sitemap 配置: sitemap.json 作用:作用:用于被微信搜索爬取页面

2.1、 App

  1. 全局 app.js 中执行 App(),App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
  2. 生成当前应用的实例对象
  3. getApp()获取全局应用实例

2.2、Page

  1. 页面.js 中执行 Page()
  2. 生成当前页面的实例
  3. 通过 getCurrentPages 获取页面实例

3、数据绑定

3.1、初始化数据

页面.js 的 data 选项中

Page({
data:{
msg:"msg:"初始化数据""
}
})

3.2、使用数据

  1. 模板结构中使用双大括号 {{message}}
  2. 注意事项: 小程序中为单项数据流 model —> view
<view>{{msg}}</view>

3.3、 修改数据

this代表当前页面的实例对象

  • this.setData({message: ‘修改之后的数据’}, callback),修改数据的行为始终是同步的
  • 特点:
    a) 同步修改: this.data 值被同步修改
    b) 异步更新: 异步将 setData 函数用于将数据从逻辑层发送到视图层(异步)

3.4、数据绑定对比

  • 小程序
  • data中初始化数据
  • 修改数据: this.setData()
    1. 修改数据的行为始终是同步的
  • 数据流:
    1. 单项: Model —> View
  • Vue
  • data中初始化数据
  • 修改数据: this.key = value
  • 数据流:
    1. Vue是单项数据流: Model —> View
    2. Vue中实现了双向数据绑定: v-model
  • React
  • state中初始化状态数据
  • 修改数据: this.setState()
    1. 自身钩子函数中(componentDidMount)异步的
    2. 非自身的钩子函数中(定时器的回调)同步的
  • 数据流:
    1. 单项: Model —> View

4、 事件

4.1、事件分类

  • 冒泡事件
    a) 定义:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  • 非冒泡事件
    a) 定义:当一个组件上的事件被触发后,该事件不会向父节点传递。
    b) 非冒泡事件:表单事件和自定义事件通常是非冒泡事件

事件流的三个阶段

  1. 捕获: 从外向内
  2. 执行目标阶段
  3. 冒泡: 从内向外

4.2、绑定事件

  1. bind 绑定:事件绑定不会阻止冒泡事件向上冒泡
    触发子元素的绑定事件,父元素相同事件也会触发
  2. catch 绑定: 事件绑定阻止冒泡事件向上冒泡
    触发子元素的绑定事件,父元素相同事件不会触发

5、生命周期

  1. onLoad(Object query)
    a) 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开
  2. onShow()
    a) 页面显示/切入前台时触发
    b) 会执行多次
  3. onReady()
    a) 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,
    可以和视图层进行交互。
  4. onHide()
    a) 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面,小
    程序切入后台等。
  5. onUnload()
    a) 页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。

6、获取用户信息

//wxml
<view>
<button bindgetuserinfo="handleUerinfo" open-type="getUserInfo">授权信息</button>
</view>
//js
 handleUerinfo(res){
console.log(res);
  }

在这里插入图片描述

handleUerinfo(res){
console.log(res);
if(res.detail.userInfo){//是否获取到了用户信息
this.setData({
  userInfo:res.detail.userInfo;//更新数据
})
}
  }

在这里插入图片描述
在这里插入图片描述
上面用于首次登录,如果下次登录还是需要授权,于是用 wx.getUserInfo(Object object)

 onLoad: function (options) {
    wx.getUserInfo({
      success:(res)=>{
        console.log(res);
        this.setData({userInfo:res.userInfo})
      },
       fail:(err)=>{console.log(err)}
      })
  }
  1. 用户未授权(首次登陆)
    1. button open-type=‘getUserInfo’
  2. 用户已经授权(再次登陆)
    1. wx.getUserInfo

7、条件渲染

  1. wx:if=’条件’
<view wx:if="{{condition}}"> True </view>
  1. wx:elif=’条件’
  2. wx:else
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

length>5只显示1;length<=5且>2只显示2;length<=5且<=2只显示3

wx:if VS hidden

  1. hidden 用法:
  2. wx:if 等同于 v-if, 条件为 false 的时候不加载,条件切换的时候决定元素销毁或者
    重新加载渲染
  3. hidden 等同于 v-show, 始终加载元素, 条件切换的时候决定元素的显示和隐藏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值