自学内容网 自学内容网

微信小程序: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());
}
})


原文地址:https://blog.csdn.net/m0_63040701/article/details/140534947

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!