微信小程序：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: 02.控制属性
<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）！