小程序进阶学习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）传递参数
-
直接在组件上使用id进行传递即可
-
data-进行绑定参数
id传参 <button id="1000" type="warn" bindtap="fun2">传递参数button> data-传参 <button type="warn" data-goodsname="商品1" data-price="99" bindtap="fun2">传递参数button>
（2）接收参数
- 接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： 事件绑定的组件上的值