模板
1引入通过template组件定义的模板
一般情况下我们会讲所有的模板提取到外部文件中 在使用的时候需要引入
<import src="../../template/template1.wxml"></import>
通过import引入会把template文件所有的内容引入
2 引入wxml文件
wxml本身就是一个模板 所以定义一个文件 就是定义一个模板
2<!-- 引入template2.wxml文件中的内容 --> <include src="../../template/template2.wxml"></include>
通过include引入的是wxml文件中的内容
开放组件---用于获取用户的信息
方法 open-data
属性type ：要获取的内容
userAvatarUrl: 获取头像
userCity: 获取城市
userCountry: 获取国家
userLanguage: 语言
userNickName: 昵称
userProvince: 获取省
<open-data type="userAvatarUrl"></open-data>
wxs---微信的js 用于在wxml中的差值语法内调用js
原因 插值语法中的{{ }}空间的环境是一个伪js环境 它只能进行运算 不能执行各种方法
1<!--pages/index/index.wxml--> 2<wxs module="shuaige"> 3 function toUpperCase(str) { 4 return str.toUpperCase(); 5 } 6 module.exports.aaa = toUpperCase; 7</wxs>
运用 8<text>pages/index/index.wxml</text> <view>{{shuaige.aaa(title)}}</view>
module指定了该模板的名称 aaa是模板添加的一个方法
自定义组件的4个步骤 自定义组件component
1 建立一个文件夹components 用于存放所有的组件
2 在该文件下建立一个model文件夹用于盛放wxml wxss js json
3 建立wxml wxss js json
4 在该页面的js中保证有compontent（）方法 在该页面的json中保证有compontent：true语句
如何使用自定义组件
1 在该页面的json配置文件中配置一下
1{ 2 "usingComponents": { 3 "biaodan": "/components/model/model" 4 } }
2 在该wxml页面中使用
<biaodan></biaodan>
自定义组件的属性
自定义组件的属性要通过js脚本中的compontent函数中进行注册 注册到properties中
1properties: { 2 // key表示组件的属性名称 3 // value是一个描述该属性的对象 4 show: { 5 // value是默认值 6 value: false, 7 // type是该值的数据类型 8 type: "boolean", 9 // observer是一个函数 当该值发生变化的时候会被触发 10 observer: function(e) { 11 console.log(e); 12 console.log(this); 13 } 14 15 } },
show 相当于k {}中的相当于value
因为show的默认值是false，设置为true，所以发生变化。此时observer会执行。
this是一个对象，对象中有data。有properties。有setData方法。
自定义组件的数据 model.js中的data会被默认保存到App.js中的data中去
model.js中的properties的属性对象 也会默认保存到App.js中的data中去
自定义组件的方法 方法要写到model.js的compontent所接受的对象methods属性中 不是写在compontent身上
1/** 2 * 组件的方法列表 3 */ 4methods: { 5 ok: function (e) { 6 console.log(e); 7 } }, <form bindsubmit='ok'>
由组件内向外传递数据 也就是从compontents中传到index.wxml中
（在每一个observer与method中都有一个this，该this中有一个triggerEvent方法）
1 首先method属性中调用triggerEvent触发事件
methods: { ok: function (e) { console.log(e); this.triggerEvent("chuandishuju", e.detail.value, "lisi"); } },
2 在页面的组件中绑定chuandishuju事件并指定函数
<biaodan bindchuandishuju="chuandi" show="true">
3 指定函数 在页面额js文件中定义chuandi函数
chuandi: function(e) { console.log("内部向外部传递的数据是" + JSON.stringify(e.detail)); }
自定义组件的子组件
一个表单，登录要用，注册要用。此时我们可以将该表单的标题挖空。放入一个<slot></slot>组件 表示占位
自定义组件wxml中
1<form bindsubmit='ok'>
2 <view class="title">
3 <slot></slot>
4 </view>
5 <view class="form-control">
6 <label>用户名{{title}}</label>
7 <input type="text" name="username" placeholder='输入用户名'></input>
8 </view>
9 <view class="form-control">
10 <label>密码</label>
11 <input type="number" name="password" placeholder='请输入密码' password></input>
12 </view>
13 <view class="btn">
14 <button form-type='submit' type="primary">提交</button>
15 </view>
</form>
在调用的时候 我们可以把它放入子组件
1<biaodan bindchuandishuju="chuandi" show="true">
2 <text>登录</text>
</biaodan>
多个自定义组件的子组件
1 开启多个slot选项 在js中options 设置为 multipleSlots： true
1// components/model/model.js 2Component({ 3 options: { 4 multipleSlots: true 5 } })
2 在自定义组件内 给每一个slot添加一个name属性
1<form bindsubmit='ok'> 2 <view class="title"> 3 <slot name="title"></slot> 4 </view> 5 <view class="form-control"> 6 <label>用户名{{title}}</label> 7 <input type="text" name="username" placeholder='输入用户名'></input> 8 </view> 9 <view class="form-control"> 10 <label>密码</label> 11 <input type="number" name="password" placeholder='请输入密码' password></input> 12 </view> 13 <view class="btn"> 14 <button form-type='submit' type="primary">提交</button> 15 </view> 16 <view class="tail"> 17 <slot name="tail"></slot> 18 </view> </form>
3 在外部使用时，给每一个子组件添加slot属性，对应内部的name值
1<biaodan bindchuandishuju="chuandi" show="true"> 2 <view slot="tail">注册</view> 对应<slot name="tail"></slot> 3 <view slot="title">欢迎注册</view> 对应<slot name="title"></slot> </biaodan>