微信小程序：3.页面开发

页面配置

注意

1.不需要添加window作为父级

窗口表现

"navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第二个页面",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,

组件配置

"usingComponents": {},

示例

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第二个页面",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "usingComponents": {},
    "style":"v2"
}          

WXSS概述

简介

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式

特性【相比于 css 】

1.新增了尺寸单位rpx：可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx

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

内联样式

1.class：静态样式，用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 <view class="normal_view" />

2.style：接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。 <view style="color:{{color}};" />

选择器

.class：选择所有拥有 class="intro" 的组件

#id：选择拥有 id="firstname" 的组件

element：选择所有 view 组件

element, element：如view, checkbox，选择所有文档的view组件和所有的checkbox组件

::after：如view::after，在 view 组件后边插入内容

::before：如view::before，在 view 组件前边插入内容

样式导入示例

 /** 1.common.wxss编写样式 **/
    .small-p {
    padding:5px;
}

/** 2.app.wxss导入样式 **/
@import "common.wxss";
.middle-p {
    padding:15px;
}

data

简介

data是页面第一次渲染使用的初始数据，data中的数据可以是字符串/数字/布尔值/对象/数组,

并且必须可以转成JSON格式，便于用setData进行修改

setData()修改数据

setData函数：将data中的数据进行修改并发送到视图层

1.仅支持JSON格式，一个setData的数据不能超过1024kB

2.不能改为undefined类型数据，因为可能遗留潜在的问题

3.直接修改this.data.xx而不调用this.setData()是无法改变页面的状态的，还会造成数据不一致

示例

<text>{{ hello }}</text>
<text>{{ num }}</text>
<text>{{ user.name }}</text>
<text>{{ names[1] }}</text>

Page({
    data:{
        message:"",//空字符串
        hello:"hello",//字符串
        num:10,//数字
        flag:true,//布尔值
        user:{name:"iwen",age:20},//对象
        names:["iwen","ime","frank"]//数组
    },
    onLoad(options) {
        console.log(this.data.hello)//调用data中的数据，用this.data.xx
        this.setData({//使用setData函数修改数据，里面的{}必须是JSON格式数据
            num:20,
            flag:false,
            'user.name':'小明',
            names:["name1","name2"]
        })
    }
})          

生命周期函数

onLoad(options) {//onLoad：监听页面加载
    console.log("页面加载");
},
onShow() {//监听页面显示
    console.log("页面显示");
},
onReady() {//监听页面初次渲染完成
    console.log("页面初次渲染完成");
},
onHide() {//监听页面隐藏
    console.log("页面隐藏");
},
onUnload() {//监听页面卸载
    console.log("页面卸载");
}

数据绑定

简介

数据绑定使用 Mustache 语法（双大括号）将变量包起来

文本绑定

<view> {{ message }} </view>
//js中data定义数据
message: 'Hello MINA!'

属性绑定

1.基本属性

<view id="item-{{id}}"></view>
//js中data定义数据
id: 0

2.控制属性

<view wx:if="{{condition}}"></view>
    //js中data定义数据
    condition: true

渲染控制

条件渲染

hidden

<view flag="{{ hidden }}">果子熟了</view>
Page({data: {flag:false} })

wx:if

<view wx:if="{{ flag }}">我是孙悟空</view>
Page({data: {flag:false} })

wx:else

<view wx:if="{{ flag }}">我是孙悟空</view>
<view wx:else="{{ flag }}">我是六耳猕猴</view>
Page({data: {flag:false} })

wx:elif

<view wx:if="{{length === 1}}"> 1 </view>
<view wx:elif="{{length === 2}}"> 2 </view>
<view wx:else>未知</view>
Page({data: {length:1} })

wx:if和hidden的区别

1.hidden组件始终会被渲染，只是简单的基于CSS控制显示与隐藏

2.wx:if的条件值切换时，有一个局部渲染的过程，如果在初始渲染条件为false则框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

建议：如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好

列表渲染

简介

1.默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

2.使用wx:for-item可以指定数组当前元素的变量名【不要有-】

3.使用wx:for-index可以指定数组当前下标的变量名

4.渲染动态数据时，需要带上wx:key

示例

<view wx:for="{{ newsList }}" wx:for-item="item" wx:for-index="id" wx:key="id">{{ id }}-{{ item.id }}-{{ item.name }}</view>
newsList: [{
"id": 1,
"name": "news1"
},
{
"id": 2,
"name": "news2"
}],

方法事件

简介

事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理

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

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

事件分类

1.冒泡事件(bind)：当一个组件上的事件被触发后，该事件会向父节点传递

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

事件类型

通过bind和catch与下面的类型组合产生不同类型的事件，如bindtap=bind+tap

tap 手指触摸后马上离开

touchstart 手指触摸动作开始

touchmove 手指触摸后移动

touchcancel 手指触摸动作被打断，如来电提醒，弹窗

touchend 手指触摸动作结束

longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0

longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart 会在一个 WXSS animation 动画开始时触发

animationiteration 会在一个 WXSS animation 一次迭代结束时触发

animationend 会在一个 WXSS animation 动画完成时触发

touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

携带参数

1.currentTarget携带参数

2.mark携带参数

基本使用

<button type="primary" bindtap="tapName"> Click me! </button>
<view bindtap="tapName"> Click me! </view>
// pages/event/event.js
Page({
tapName(){
console.log("点击");
}
})

Event对象

Event对象的属性介绍：

type【String】：事件类型

timeStamp【Integer】：事件生成时的时间戳

target【Object】：触发事件的组件的一些属性值集合

currentTarget【Object】：当前组件的一些属性值集合

mark【Object】：事件标记数据

detail【Object】：额外的信息

touches【Array】：触摸事件，当前停留在屏幕中的触摸点信息的数组

changedTouches【Array】：触摸事件，当前变化的触摸点信息的数组

<button type="primary" bindtap="tapName"> Click me! </button>
<view bindtap="tapName"> Click me! </view>
Page({
tapName(e){
console.log(e);
}
})

冒泡事件(bind)

<view bindtap="bindParentHandle">
    <button type="primary" bindtap="bindChildHandle">冒泡事件</button>
</view>
Page({//当一个组件上的事件被触发后，该事件会向父节点传递
bindParentHandle(){console.log("父级事件");},
bindChildHandle(){console.log("子级事件");}
})

非冒泡事件(catch)

<view catchtap="catchParentHandle">//当一个组件上的事件被触发后，该事件不会向父节点传递
    <button type="primary" catchtap="catchChildHandle">非冒泡事件</button>
</view>
Page({
catchParentHandle(){console.log("非冒泡父级事件");},
catchChildHandle(){console.log("非冒泡子级事件");}
})

currentTarget携带参数

在wxml中添加数据的时候，必须在自定义属性前添加data-*【data-后面的字符串不分大小写，一律识别为小写】

<view data-id="1001" bindtap="bindViewTap"> 携带参数</view>
Page({
bindViewTap(e){
console.log(e.currentTarget.dataset.id);
}
})

mark携带参数

可以使用mark来识别具体触发事件的 target 节点。此外，mark还可以用于承载一些自定义数据（类似于 dataset ）。

当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark 。）

<view mark:parentMark="父级" bindtap="bindMarkTap">
    <button type="primary" mark:childMark="子级" bindtap="bindButtonTap">按钮</button>
</view>
Page({
bindMarkTap(e){
console.log(e.mark);
},
bindButtonTap(e){
console.log(e.mark);
}
})

模块化

简介

我们可以使用module.exports导出，并且使用require导入

导出

 hello.js
const num = 10;
function hello(){return "hello"}
// module.exports.num = num;
// module.exports.hello = hello;
module.exports = {num,hello}

导入

// index.js
const { num,hello } = require("./modules/hello.js")
Page({
onLoad(options) {
console.log(num);
console.log(hello());
}
})