小程序进阶学习02

一、小程序逻辑层

1.逻辑层的介绍

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：
    增加 App 和 Page 方法，进行程序注册和页面注册。
    增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
    提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
    提供模块化能力，每个页面有独立的作用域。
   
  
 注意事项：
 	小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

2.小程序注册

​ 注册小程序，使用App({}),必须在app.js文件中进行注册，而且只能注册一次，接收一个object参数，包括一些生命周期、自定义的数据等；

2.1.一些常见的生命周期函数

app.js:

App({
  // 小程序初始化，只能调用一次
  onLaunch(){
      console.log('onlaunch')
  },
  // 监听小程序显示,切前台
  onShow(){
    console.log('onshow')
  },
  // 退出小程序时，触发
  onHide(){
    console.log('onhide')
  },
  // 全局监听页面数据发生错误
  onError(){
    // 
    console.log("报错信息")
  },
  // 当访问的页面不存在时，进行触发
  onPageNotFound(){
      // console.log('页面不存在')
      // 跳转到404页面
      wx.redirectTo({
        url: '/pages/page404/page404',
      })

  }
})

2.2.any操作

App({
  userInfo:{
    username:"admin",
    password:"123456"
  },
  run(){
    return  this.userInfo.username+"正在跑步";
  },
  // 小程序初始化，只能调用一次
  onLaunch(){
      // console.log('onlaunch')

      console.log(this.userInfo)
      console.log(this.run())
  },
})

2.3 获取全局唯一的实例getApp

页面.js(index.js)

let app = getApp();// 获取全局的唯一的app实例
// console.log(app.userInfo)
let  {username,password} = app.userInfo;
Page({
 // 页面初始化数据
  data:{
    msg:"web",
    // userInfo:app.userInfo
    username,
    password
  },
})

3.注册页面page

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等

3.1生命周期

Page({
// 页面加载 ，只能加载一次,而且能够获取页面参数
  onLoad(option){
      console.log('onload',option)
  },
  // 当前页面显示
  onShow(){
      console.log('onshow')
      // wx.redirectTo({
      //   url: '../logs/logs',
      // })
  },
  // 页面隐藏
  onHide(){
    console.log('onhide')
  },
  // 页面卸载
  onUnload(){
      
      console.log('onunload')
  },
})

3.2事件监听

Page({
	// 监听页面下拉刷新操作
  onPullDownRefresh(){
    console.log('页面下拉刷新')
  },
  // 监听页面滚动触底事件
  onReachBottom(){
    console.log('上拉触底')
  },

  // 只要页面滚动就会触发
  onPageScroll(top){
    console.log(top)
  },
  onShareAppMessage(){
    
  }
})

index.json

{
  "usingComponents": {},
  //和下拉配合使用，这是设置是否可以进行下拉
  "enablePullDownRefresh":true,
  //距离底部多少时触发onReachBottom
  "onReachBottomDistance":200
}

3.3data操作

Page({
// 页面初始化数据
  data:{
    msg:"web"
  },
  // 页面加载 ，只能加载一次,而且能够获取页面参数
  onLoad(option){
      // console.log('onload',option)

      // 1.获取data中的值
      let   msg = this.data.msg;
      // 2.设置data中的值，不用
        // this.data.msg = "java"   第一种，只能更改js中的值，并不能重新渲染页面

        // 第二种，即能改变js的值，同时重新渲染页面，
        this.setData({
            msg:"python"
        },function(){
          console.log(this.data.msg)
        })
    
  },
})

二、视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

1.wxml语法

1.1 基本的数据绑定

 
 <view>{{ msg }}view>
 
 
 <view id="item-{{ uid }}">属性绑定view>
 

 
 
 <view hidden="{{true}}">关键字view>
 <view hidden="{{false}}">关键字view>

 
 
 
 <view>{{1+2+num}}view>
 
 
 
 <view>{{"3"+1+2+num}}view>

 
 
 <view>{{ true ? '真' : '假'   }}view>
 <view>{{ false ? '真' : '假'   }}view>

 
 <view>{{ arr[1] }}view>
 <view>{{ obj.name }}view>

1.2列表渲染

vue ： v-for=“（item,index） in /of arr” :key=“index”

小程序： wx:for 默认的下标变量是index，值item

改变默认值：

wx:for-index=""

wx:for-item = “”

wx：key的设置：

​ 值有2种，第一种是*this，第二种是 item里面的唯一的属性

 

















<view wx:for="{{ arr }}" wx:key="*this">
    {{ item }}
view>


<view wx:for="{{ info }}"  wx:key="unique">
  {{ item.name }}
view>

1.3条件渲染

​ wx:if wx:elif wx:else

​ hidden

<view wx:if="{{ age>=0 && age <14 }}">未成年view>
<view wx:elif="{{ age >=14 && age<18 }}">青少年view>
<view wx:else>
  成年
view>






 
 <view wx:if="{{ false }}">wxifview>
 <view hidden="{{ true }}">hiddenview>

1.4模板

模块： 针对的单独的js文件，暴露与导入

模板：wxml文件

公共样式： wxss样式文件

组件： wxml js wxss

模板的基本使用：


 
<template name="myTem">
  
  第二种传参
  
  <view>
    第三种传参
    name:{{ name }}--age:{{ age }}

  view>
template>









<template is="myTem" data="{{ ...obj }}">template>

1.5引用

公共模板

common.wxml文件

<template name="menu">
  <view>
      <view wx:for="{{ arr }}">
        {{ item }}
      view>
  view>
template>

import 引入的是模板

模板.wxml文件

<import src="/common/common.wxml" />

<template is="menu" data="{{ arr }}">template>

include 引入，引入的是除模板之外的内容

<include src="/common/common.wxml">include>

总结：

​ import 是用来引入模板内容

​ include是引入除了模板template以及wxs之外的所有的普通的文件内容

2.wxss样式操作

wxss是具备了css大部分的特性，又新添了2个自己独特的特性：

2.1 rxp单位

针对的是宽度

设计稿元素的大小/750设计稿 = 实际布局的大小/ 750rpx

/* pages/wxss01/wxss01.wxss */
.box{
  /* width: 320px; */
  width: 750rpx;
  height: 50rpx;
  background-color: brown;
}

2.2样式导入

​ 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

在页面的wxss文件中：
/* 样式导入 */
@import  "../../common/wxss/common.wxss";

2.3动态样式/静态样式

 
 <view class="{{ box }}">

 view>

 
 <view style="width:200rpx;height:200rpx;background-color:{{ bgcolor }}">

 view>

.container{
  width: 100rpx;
  height: 100rpx;
  background-color: chocolate;
}

.container1{
  width: 200rpx;
  height: 200rpx;
  background-color: chocolate;
}

// pages/wxss01/wxss01.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      box:"container",
      bgcolor:"rgb(255,0,0)"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      setInterval(()=>{
      //  console.log(this.rand())
      let r = this.rand();
      let g =  this.rand();
      let b = this.rand();
      this.setData({
        bgcolor:`rgb(${r},${g},${b})`
      })
      },500)
  },

  // 生成0-255的随机数
  rand(){
    //  random    【0-1）小数
    return  Math.floor(Math.random()*256);
  }
})

3.事件系统

3.1事件介绍

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

3.2绑定事件

value就是事件方法 如tab 触摸事件
1.bind  + value = "事件函数"


2.catch + value = ”事件函数

3.3事件函数写法

 // 自定义函数
  // fun(){
  //   console.log('fun-bind',this)
  // },
  // fun:function(){
  //   console.log('fun-bind',this)
  // },
  // 事件函数中，不建议使用箭头函数，因为this指向问题
  fun:()=>{
    console.log('fun-bind',this)
  },

3.4传参与接参

（1）传递参数

1. 直接在组件上使用id进行传递即可

2. data-进行绑定参数

   id传参
   <button id="1000" type="warn"  bindtap="fun2">传递参数button>
    data-传参
   <button type="warn" data-goodsname="商品1" data-price="99" bindtap="fun2">传递参数button>
   

（2）接收参数

1. 接id：

在对应的事件函数中，事件对象currentTarget/target中的id进行获取

2.接data-参数；

​ 在当前e对象中的 currentTarget/target的dataset属性中进行获取

 fun2(e){
      console.log(e)
      // let id = e.currentTarget.id;
      // let ids = e.target.id;

      // console.log(id,ids)
      // let goodsname = e.currentTarget.dataset.goodsname;
      // let price = e.currentTarget.dataset.price;

      let { goodsname,price } = e.target.dataset;
      console.log(goodsname,price)
  }

3.5事件分类

冒泡事件

非冒泡事件

问题：

​ 1.bind和catch的区别是什么？

​ bind是允许事件冒泡

​ catch是阻止事件冒泡

​ 2.currentTarget与Target的区别？

​ target ： 事件源，点击XXX触发的事件，获取的就是XXX值

​ currentTarget： 事件绑定的组件上的值