Cao Note

外观

逻辑层 ​

逻辑层概述 ​

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

  • 增加 App 和 Page 方法，进行程序注册和页面注册。
  • 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
  • 提供模块化能力，每个页面有独立的作用域。

小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

小程序注册 ​

在 app.js 中使用 App 这个函数注册小程序,指定小程序的生命周期回调

小程序的生命周期

js
 onLaunch: function () {
  this._readPhone();
  this._readPhoto()
  this._login()
 },
当小程序启动，或从后台进入前台显示，会触发 onShow
 onShow: function (options) {
  console.log("app show")
 },
当小程序从前台进入后台，会触发 onHide
 onHide: function () {
  console.log("app hide")
 },
当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
 onError: function (msg) {
  //调用错误日志接口
 },
 onPageNotFound:function(){
  //重定向到首页或者404页面
 },
 onLaunch: function () {
  this._readPhone();
  this._readPhoto()
  this._login()
 },
当小程序启动，或从后台进入前台显示，会触发 onShow
 onShow: function (options) {
  console.log("app show")
 },
当小程序从前台进入后台，会触发 onHide
 onHide: function () {
  console.log("app hide")
 },
当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
 onError: function (msg) {
  //调用错误日志接口
 },
 onPageNotFound:function(){
  //重定向到首页或者404页面
 },

其他

js
 globalData:{
  token:"",
  name:""
 },
 _login:function(){
  this.globalData.token="abcdefg"
 },
 _readPhoto:function(){
  console.log("读取你的相册")
 },
 _readPhone:function(){
  console.log("读取联系人")
 }
 globalData:{
  token:"",
  name:""
 },
 _login:function(){
  this.globalData.token="abcdefg"
 },
 _readPhoto:function(){
  console.log("读取你的相册")
 },
 _readPhone:function(){
  console.log("读取联系人")
 }

getApp 的讲解 ​

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
  • 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。
  • 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

页面注册 Page() ​

页面的生命周期。 ​

js
Page({
  // 页面的初始数据
  data: {
    goods: []
  },
  _change: function () {
    this.setData({
      age: this.data.age + 1
    })
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log("index load")
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    console.log("index ready")
  },
  // 生命周期函数--监听页面显示
  onShow: function () {},
  // 生命周期函数--监听页面隐藏
  onHide: function () {
    console.log("index hide")
  },
  // 生命周期函数--监听页面卸载
  onUnload: function () {},
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
    console.log("下拉刷新")
  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
    console.log("加载更多")
  },
  // 用户点击右上角分享
  onShareAppMessage: function () {
    console.log("+1")
  }
})
Page({
  // 页面的初始数据
  data: {
    goods: []
  },
  _change: function () {
    this.setData({
      age: this.data.age + 1
    })
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log("index load")
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    console.log("index ready")
  },
  // 生命周期函数--监听页面显示
  onShow: function () {},
  // 生命周期函数--监听页面隐藏
  onHide: function () {
    console.log("index hide")
  },
  // 生命周期函数--监听页面卸载
  onUnload: function () {},
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
    console.log("下拉刷新")
  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
    console.log("加载更多")
  },
  // 用户点击右上角分享
  onShareAppMessage: function () {
    console.log("+1")
  }
})

关于 data ​

可以使用 this.data.属性 获取 data 中的值，使用 this.setData({属性: 值}) 进行赋值并重新渲染页面。也可以使用 this.data.属性 = 值 直接赋值（但不会重新渲染页面）。

事件系统 ​

概念 ​

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息，如 id, dataset, touches

事件绑定 ​

使用 bind+事件=“函数名” 或者使用 catch+事件=“函数名”，来绑定事件，

jsx
<view bindtap="_fn1">点击1</view>
<view catchtap="_fn2">点击2</view>
<view bindtap="_fn1">点击1</view>
<view catchtap="_fn2">点击2</view>

事件处理函数

jsx
  _fn1: function () {
    console.log("fn1")
  },
  _fn2: function () {
    console.log("fn2")
  },
  _fn1: function () {
    console.log("fn1")
  },
  _fn2: function () {
    console.log("fn2")
  },

事件分类 ​

  1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件

非冒泡事件

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件

使用 bind 绑定的事件不会阻止冒泡，使用 catch 绑定的事件会阻止冒泡

传参接参（重点） ​

可以在绑定元素的组件上使用 data-属性名=值，来进行传参，在对应的事件对象中 e.currentTarget.dataset 或者 e.target.dataset 中获取对应的传递的参数。可以传递对象

jsp
<view data-name="zhangsan" data-user-age="18" data-user="{{user}}" class="father" bindtap="_fn1">
  <view class="son" catchtap="_fn2"></view>
</view>
<view data-name="zhangsan" data-user-age="18" data-user="{{user}}" class="father" bindtap="_fn1">
  <view class="son" catchtap="_fn2"></view>
</view>

总结：

e.target 代表的是事件触发的元素

e.currentTarget:代表是事件绑定的元素。

在哪个元素上绑定，参数就写在哪个元素上，获取参数使用 currentTarget 获取

导航 ​

跳转到别的小程序 ​

jsx
<navigator app-id="wx6acf0caf71cb5860" target="miniProgram">星座运势</navigator>
```js
wx.navigateToMiniProgram({
  appId: 'wx6acf0caf71cb5860',
})
<navigator app-id="wx6acf0caf71cb5860" target="miniProgram">星座运势</navigator>
```js
wx.navigateToMiniProgram({
  appId: 'wx6acf0caf71cb5860',
})

### 导航组件（声明式导航）

open-type:

​ navigate:新的页面会入栈。如果还想原路返回就是用这种跳转方式 wx.navigateTo()

​ redirect:当前的页面会出栈，新的页面会入栈。登录成功或者注册成功的跳转。wx.redirectTo

​ reLaunch:之前的页面栈都会删除，新的页面会入栈。支付成功跳转。wx.reLaunch

​ switchTab:之前的页面栈都会删除，新的页面会入栈。跳转 tabBar 页面必须用它

​ navigateBack：页面不断的出栈，用来返回的。

```jsx
<navigator open-type="navigate" url="../c/c">
  跳转c页面
</navigator>

### 导航组件（声明式导航）

open-type:

​ navigate:新的页面会入栈。如果还想原路返回就是用这种跳转方式 wx.navigateTo()

​ redirect:当前的页面会出栈，新的页面会入栈。登录成功或者注册成功的跳转。wx.redirectTo

​ reLaunch:之前的页面栈都会删除，新的页面会入栈。支付成功跳转。wx.reLaunch

​ switchTab:之前的页面栈都会删除，新的页面会入栈。跳转 tabBar 页面必须用它

​ navigateBack：页面不断的出栈，用来返回的。

```jsx
<navigator open-type="navigate" url="../c/c">
  跳转c页面
</navigator>

路由 API（编程式导航） ​

jsx
wx.navigateTo({
  url: '../b/b',
})
wx.redirectTo({
  url: '../b/b',
})
wx.reLaunch({
  url: 'url',
})
wx.navigateTo({
  url: '../b/b',
})
wx.redirectTo({
  url: '../b/b',
})
wx.reLaunch({
  url: 'url',
})

导航传参 ​

jsx
;<navigator open-type="navigate" url="../detail/detail?id=1&name=xiaomi">
  跳转detail页面
</navigator>

wx.navigateTo({
  url: '../detail/detail?id=2&name=华为',
})
;<navigator open-type="navigate" url="../detail/detail?id=1&name=xiaomi">
  跳转detail页面
</navigator>

wx.navigateTo({
  url: '../detail/detail?id=2&name=华为',
})

接收导航传参 ​

在跳转之后的 onload 生命周期中的形参中接受参数

jsx
onLoad: function (options) {
        console.log(options)
 },
onLoad: function (options) {
        console.log(options)
 },

tabbar 页面不能传参

说明：可以在微信开发者工具选择普通编译--继续选择添加编译模式--选择启动页面--添加启动参数即可，然后即可在当前目标页面的 onLoad 中获取参数

Copyright © 2024-present xiaocao