小程序知识

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>

2. wx:elif=’条件’
3. 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, 始终加载元素, 条件切换的时候决定元素的显示和隐藏