微信开发者工具之WXS和简单组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

WX的基础操作

一、内嵌wxs

  1.1内联的wxs(全写在wxml)

//.wxml 例:
<view>{{m1.topUserName(name)}}</view>

<wxs mode="m1">
    //将输入文本小写变大写
    module.exports.UppUser=function(str){  //module.exports为对外接口 UppUser为自定义函数名
          return str.toUpperCase()         //toUpperCase()为库函数
    }

</wxs>

1.2外联的wxs(wxs函数写在.wxs的文件里面)

 

 

 二、组件使用

    2.1 全局组件和局部组件

//局部引用
//单独页面的.json引入
{
  "usingComponents": {
        "test":"组件定义的相对路劲"   //test为自定义组件名
   }
}

//.wxml中使用组件
<test></test>


//全局引用
//app.json中引用

 

 2.2 组件样式

 

 2.3 修改组件的样式间隔(组件的wxss控制还是组件之外的全局wxss控制同一个格式)

//组件.json文件中设置
component({

   options:{
    styleIsolation: 'isolated'
   }

})

 2.4 component事件处理函数

 2.5 properties属性

小程序中properties是组件对外属性,用来接受传递到组件中的数据

//.json
component({
  //属性定义
    properties:{
        //例:
        max:{      //完整定义方式 建议使用
        type:Number,
        value:10
        }  
        max:Number //简略定义方式
    }

})


<test max="10"></test>  //test为自定义组件名称 只是个例子

2.6组件的数据监听器

observers监听字段的变化:如data:,properties:

//.js
Component({
    observers:{
        '字段a','字段b':function(字段a的新值,字段b的新值){
                      //do something
        }
    }
})

 

 

 其中`${},${},${}`为模板字符串，插入{}中成为字符串

如果属性太多，可以用'**'代替所以属性 例如:'rgb.**'

2.7纯数据字段(不在渲染层直接使用的字段,只在逻辑中使用)

  指定pureDataButton为正则化表达式，字段开头符合这个表达式的为纯字符字段

//.js
Component({
    options:{
        //正则化表达式   以_开头的为纯数据字段
        pureDataPutton: /^_/
    }
    data:{
       a:true,
      _a:ture   //纯数据字段
    }

})

小技巧:ctrl+d选中全部同名，一次性修改