小程序基础语言

1.WXS脚本WXS是小程序独有的一套脚本语言结合WXML可以构建出页面的结构。内嵌WXS脚本wxml文件中的每个wxs/wxs标签必须提供module属性用来指定当前wxs的模块名称方便在wxml中访问模块中的成员button bindtapaddCount1/button view{{ml.toUpper(username)}}/view wxs moduleml module.exports.exports.toUpperfunction(str) { return str.toUpperCase() } /wxs定义外联的wxs脚本//tools.wxs function tolower(str) return str.tolowerCase() } module.exports{ tolower:tolower }使用外联的WXS脚本在wxml中引入外联的wxs脚本必须为wxs标签添加module和src属性其中module用来指定模块的名称src用来指定要引入的脚本的路径必须是相对路径2.列表页面如果下面公式成立则证明没有下一页数据页码值* 每页显示多少条数据 总数据条数page*pageSize totalfunction splitPhone(str) { if(str.length ! 11)return str var arrstr.split() arr.splice(3,0,~) arr.splice(9,0,~) return arr.join() } module.exports{ splitPhone:splitPhone }完成后显示xxx~xxxx~xxxx总结3.组件的创建和应用在项目的根目录中鼠标右键创建components -test文件夹在新建的components -test文件夹上鼠标右键点击“新建Component”键入组件名称之后回车会自动生成组件对应的4个文件后缀名分别是 .js, , .wxml ,.wxss局部引用组件全局引用组件组件和页面的区别组件的 .json文件中需要声明“component”: true属性组件 .js文件中调用的是Component函数组件的事件处理函数需要定义到methods节点中组件样式隔离默认情况下自定义组件的样式只对当前组件生效不会影响到组件之外的UI结构注意点.wxss中的全局样式对组件无效只有class选择器会有样式隔离效果id选择器属性选择器和标签选择器不受样式隔离影响建议在组件和引用组件页面中建议使用class选择器4.数据方法和属性1.data数据用于组件模版渲染的私有数据需要定义到data节点中Component({ /** *组件的初始数据 */ data: { count: 0 } })2.methods方法事件处理函数和自定义方法需要定义到methods节点中Component({ options: { styleIsolation:shared }, /** * 组件的属性列表 */ data :{ count:0 }, /** * 组件方法列表 */ methods: { //点击事件处理函数 addCount() { this.setData({ Count:this.data.count1 }) this. _showCount }, _showCount() { wx.showToast({ title:count是this.data.count, }) } } })3.properties属性properties是组件的对外属性用来接收外界传递到组件中的数据Component({ options: { styleIsolation:shared }, /** * 组件的属性列表 */ properties: { //第一种简化的方式 // max:Number //第二种完整的定义方式 max:{ type:Number, value:10 } },4.data 和properties的区别data更倾向于存储组件的私有数据properties更倾向于存储外界传递到组件中的数据5.使用setData修改properties的值由于data 和properties属性本质上没有区别因此properties属性的值也可以用于页面渲染或使用setData为properties中的属性重新赋值Component({ properties: { max:Number } methods: { //点击事件处理函数 addCount() { this.setData({max: this.properties.max 1 }) } } })5.数据监听器数据监听器用于监听和响应任何属性和数据字段的变化从而执行特定的操作Component({ observers: { 字段A字段Bfunction(字段A的新值字段B的新值 { //do something } } })渲染UI结构定义button的事件处理函数监听对象中指定属性的变化observers: { //监听rgb对象上r,g,b三个子属性的变化 rgb.r, rgb.g, rgb.b: function(r,g,b) { this.setData({ //为data 中的 fullColor重新赋值 fullColor: ${r}, ${g}, ${b} }) } }监听对象中所有属性的变化observers: { //使用通配符**监听对象上所有病性的变化 rgb.**:function(obj){ this.setData({ fullColor:s(obj.r},s(obj.g},s{obj.b} }) } }6.纯数据字段概念指那些不用于界面渲染的data字段指定pureDataPattern为一个正则表达式字段名符合这个正则表达式的字段将成为纯数据字段Component({ options: { // styleIsolation:shared pureDataPattern: /^_/ }, data : { a:true, //普通数据字段 _b:true, //纯数据字段 } }7.组件的生命周期函数全部生命周期函数表组件主要的生命周期函数在小程序组件中最重要的生命周期函数有3个分别是created、attached、detached。它们各自的特点如下①组件实例刚被创建好的时候created生命周期函数会被触发● 此时还不能调用setData● 通常在这个生命周期函数中只应该用于给组件的ths添加一些自定义的属性字段②在组件完全初始化完毕、进入页面节点树后attached生命周期函数会被触发● 此时this.data已被初始化完毕● 这个生命周期很有用绝大多数初始化的工作可以在这个时机进行例如发请求获取初始数据③在组件离开页面节点树后detached生命周期函数会被触发●退出一个页面时会触发页面内每个自定义组件的detached生命周期函数● 此时适合做一些清理性质的工作8.插槽在自定义组件的wxml结构中可以提供一个slot节点用于承载组件使用者提供的wxml结构。在小程序中默认每个自定义组件中只允许使用一个slot进行占位这种个数上的限制叫做单个插槽。!--组件的封装者 -- view classwrapper view这是组件内部节点/view !-- 对于不确定的内容可以使用slot进行占位 -- slot/slot /view !--组件的使用者 -- component-rag-name !-- 这部分内容将被放置在组件slot的位置上 -- view这里是插入到组件slot中的内容view component-rag-name可以在组件的.wxml中使用多个slot标签以不同的name来区分不同的插槽。!-- 组件模拟 -- view classwrapper !-- name为before的第一个slot插槽 -- slot namebefore/slot view这是一段固定的文本内容/view !-- name为before的第二个slot插槽 -- slot nameafter/slot /view