绍兴网站制作建设,网络建设情况怎么填,d网站建设的目的,如何查看用wordpress建的站点WXS
WXS#xff08;WeiXin Script#xff09;是小程序的一套脚本语言#xff0c;结合 WXML#xff0c;可以构建出页面的结构。
可以在模版中内联少量处理脚本#xff0c;丰富模板的数据预处理能力。
wsx 在IOS设备上性能是JavaScript的2-20倍
内嵌式
viewWeiXin Script是小程序的一套脚本语言结合 WXML可以构建出页面的结构。
可以在模版中内联少量处理脚本丰富模板的数据预处理能力。
wsx 在IOS设备上性能是JavaScript的2-20倍
内嵌式
viewview{{m1.toUpper(message)}}/view
/view
wxs modulem1module.exports.toUpper function(str){return str.toUpperCase();}
/wxsmodule“属性值”
关联式
viewview{{m2.toLower(message)}}/view
/view
wxs src/utils/tools.wxs modulem2/在utils下创建文件tools.wxs
// wxs
function toLower(str){return str.toLowerCase();
}module.exports {toLower : toLower// 起别名 : 方法名
}在wxs文件中直接写方法最后通过module.exports暴露出来
组件Components
组件相当于是自定义标签
组件创建创建文件夹 – 右键文件夹创建component
局部
局部配置只能在配置的页面上使用单独在页面的JS文件中配置
在需要引用组件的页面的JSON文件中配置
{usingComponents: {my-com : /components/test1/test1}
}wxml文件中引用
viewmy-com/my-com
/view引用组件的页面会显示组件的wxml文件中的内容
全局
全局配置所有页面都可以用在App.js中配置
在windows同级下编写一下代码
usingComponents: {my-com : /components/test1/test1
}组件的样式隔离
app.wxss 中的全局样式 对组件无效的
只有class选择器会有样式的隔离效果 id选择器 属性选择器 标签选择器 不受样式隔离限制 方式一 在组件中的json文件下配置 {component: true,usingComponents: {},styleIsolation: isolated
}方式二 在组件的js文件中配置 options:{styleIsolation : isolated
}属性值
isolated 表示启用样式隔离在自定义组件内外使用 class 指定的样式将不会相互影响一般情况下的默认值apply-shared 表示页面 wxss 样式将影响到自定义组件但自定义组件 wxss 中指定的样式不会影响页面shared 表示页面 wxss 样式将影响到自定义组件自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。这个选项在插件中不可用。
组件传值
组件要接收调用者传来的值并显示到页面上实现步骤
在组件的js文件properties属性列表中定义参数名
properties: {max : {type : Number, // 定义参数类型value : 20 // 默认值若页面上没传参数默认值为20}
}组件的wxml文件
view classclassAview接收到的参数是{{max1}}/view
/view引用组件的页面组件的调用者
viewmy-com max10 /my-com // 传参的参数名参数值
/view调用页面上显示11如果没传则显示默认值 20 1 21
组件的properties
在小程序 properties 和 data 的数据用法相同 都是可以读写的 但是 data更倾向于私有数据 properties 更倾向于存储对外接收到的数据 本质上没有区别
组件方法
组件方法与页面方法不同在于组件方法都需要定义在methods中
组件数据监听器
数据的监听 用于监听和响应任何的属性和数据字段的变化 从而执行特定的操作
egsum a b sum随着a和b的变化而发生改变
组件的wxml文件
view{{a}} {{b}} {{sum}}
/view
button typedefault sizemini bind:tapaddA A/button
button typedefault sizemini bind:tapaddB B/button组件的js文件 /*** 组件的初始数据*/data: {sum : 0,a : 0,b : 0,},/*** 组件的方法列表*/methods: {addA(){this.setData({a : this.data.a 1});},addB(){this.setData({b : this.data.b 1});}},// 监听器observers:{a,b:function(a,b){this.setData({sum : a b})}}监听器使用observers定义与methods同级写需要监听的数据a,b函数中写需要执行的操作如果需要监听对象的属性写对象名.属性名
纯数据字段
不需要渲染到页面的data字段纯数据字段 有助于提升页面的更新性能
实现步骤 定义纯数据字段规则 options与data同级 options:{// 定义纯数据字段规则pureDataPattern : /^_/ , // 指定所有以_开头的为纯数据字段
},如果初始化数据以下划线开头就是纯数据字段 定义初始化数据 // js
data: {_n : true,m : false
}组件引用 组件的wxml文件 rich-text nodesh1{{_n}}/h1/
rich-text nodesh1{{m}}/h1/页面上会显示false不会显示纯数据字段true
组件的生命周期函数
组件的生命周期
生命周期参数描述最低版本created无在组件实例刚刚被创建时执行1.6.3attached无在组件实例进入页面节点树时执行1.6.3ready无在组件在视图层布局完成后执行1.6.3moved无在组件实例被移动到节点树另一个位置时执行1.6.3detached无在组件实例被从页面节点树移除时执行1.6.3errorObject Error每当组件方法抛出错误时执行2.4.1
组件所在页面的生命周期函数
生命周期参数描述最低版本show无组件所在的页面被展示时执行2.2.3hide无组件所在的页面被隐藏时执行2.2.3resizeObject Size组件所在的页面尺寸变化时执行2.4.0routeDone无组件所在页面路由动画完成时执行2.31.2
注意自定义 tabBar 的 pageLifetime 不会触发。
eg组件的js文件 lifetimes:{attached:function(){console.log(在组件实例进入页面节点树时执行);},detached : function(){console.log(在组件实例被从页面节点树移除时执行);}},pageLifetimes:{show: function() {// 页面被展示console.log(页面被展示);},hide: function() {// 页面被隐藏console.log(页面被隐藏);},resize: function(size) {// 页面尺寸变化console.log(页面尺寸变化);}}组件插槽
与Vue中的插槽相似
单插槽
实现步骤
在组建的wxml文件中定义插槽
viewslot/slot
/view调用组件的页面中
my-comcomponent-tag-nameview这是插槽的内容/view/component-tag-name
/my-com多插槽
实现步骤 在组件的配置文件中开启多插槽支持 组件的js文件 options:{multipleSlots: true // 在组件定义时的选项中启用多slot支持
}定义插槽 组件的wxml文件需要给slot/slot标签name属性 viewslot namebefore/slotview------分割线---------/viewslot nameafter/slot
/view调用页面 使用时需要使用slot说明是那个插槽 my-test2view slotafterafter/viewview slotbeforebefore/view
/my-test2弹窗
页面提示
icon的合法值
合法值说明success显示成功图标此时 title 文本最多显示 7 个汉字长度error显示失败图标此时 title 文本最多显示 7 个汉字长度loading显示加载图标此时 title 文本最多显示 7 个汉字长度none不显示图标此时 title 文本最多可显示两行1.9.0及以上版本支持
wx.showToast({title: 提示,icon: success,mask: true, // 不允许点击页面duration : 5000 // 持续时间
})模态对话框
带有取消和确定按钮的弹窗
wx.showModal({title: 提示,content: 确认要取消么,complete: (res) {if (res.cancel) {// 取消执行}if (res.confirm) {// 确认执行}}
})加载提示
属性类型默认值必填说明titlestring是提示的内容maskbooleanfalse否是否显示透明蒙层防止触摸穿透successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行
eg
wx.showLoading({title: 加载中,
})
setTimeout(function () {wx.hideLoading()
},2000)注意需要手动关闭
选项对话框
属性类型默认值必填说明alertTextstring否警示文案itemListArray.string是按钮的文字数组数组长度最大为 6itemColorstring#000000否按钮的文字颜色successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行
wx.showActionSheet({itemList: [A, B, C],success (res) {// 输出选择的下标console.log(res.tapIndex)},fail (res) {console.log(res.errMsg)}
})滚动条
onPageScroll页面滚动触发事件的处理函数
属性类型说明scrollTopNumber页面在垂直方向已滚动的距离单位px
wx.pageScrollTo将页面滚动到目标位置支持选择器和滚动距离两种方式定位
属性类型默认值必填说明scrollTopnumber否滚动到页面的目标位置单位 pxdurationnumber300否滚动动画的时长单位 msselectorstring否选择器offsetTopnumber否偏移距离需要和 selector 参数搭配使用可以滚动到 selector 加偏移距离的位置单位 pxsuccessfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行
案例回到顶部按钮的实现
js文件定义方法
data: {no_scroll: true
},
goTop() {if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})}
},onPageScroll(e){if(e.scrollTop 300){this.setData({no_scroll:false})}else{this.setData({no_scroll:true})}}wxml文件
view hidden{{no_scroll}} bind:tapgoTop classfix_bo↑
/viewwxss文件
.fix_bo{width: 77rpx;height: 77rpx;opacity: .4;border-radius: 100%;background-color: black;position: sticky;bottom: 80rpx;left: 87%;color: white;font-size: larger;text-align: center;line-height: 77rpx;
}
