微信小程序第三天

模板

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>