小程序template跟wxs的学习

模板template

1.定义模板（testTemp.wxml）

<template name="testTemp">
   <view>{{title}}</view>
</template>

2.使用模板

template.wxml:
<import src="testTemp.wxml"></import>   					//导入testTemp.wxml模板
<text>使用template</text>
<template is='testTemp' data="{{title:'头部'}}"></template> //使用testTemp.wxml模板

3.注意事项

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

eg:
<text>使用template</text>
<template is='testTemp' data="{{title:'头部',foo:testWxs.foo}}"></template>
<wxs src='testWxs.wxs' module="testWxs"></wxs>   

wxs模块

1.定义wxs模块 testWxs.wxs:

var foo='test wxs learning';
var bar=function (a){
   return a+'：被调用了';
}
module.exports={
   foo:foo,
   bar:bar
}

2.使用wxs模块

<wxs src='testWxs.wxs' module="testWxs"></wxs>  //src:导入模块，module:模块名
<view>{{testWxs.foo}}</view>					
<view>{{testWxs.bar('testWxs中的bar方法')}}</view>

3.wxs模块直接写在wxml文件中

<wxs module="secondWxs">    //记得要写module
   var a='dd';
   module.exports={			//写成键值对的形式
      a:a
   }
</wxs>
<view>{{secondWxs.a}}</view>

4.wxs模块引用wxs模块(secondWxs.wxs引入了testWxs.wxs)

secondWxs.wxs:

var first=require('testWxs.wxs');     //上面的定义好的wxs模块
var second=first.foo + 'secondWxs';
var bar2=first.bar;                   //注意这里不要写成了first.bar(),如果多加了()，这是将first.bar()执行的结果返回给bar2
module.exports={
   second:second,
   bar2:bar2
}
-----------------------------------------------------------------------------------
<wxs src="secondWxs.wxs" module="swxs"></wxs>
<view>{{swxs.second}}</view>
<view>{{swxs.bar2('这是secondWxs.wxs中引入了testWxs的bar()')}}</view>