微信小程序第三天

模板

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>