微信小程序學習第六天

這是我參與8月更文挑戰的第10天，活動詳情查看：更文挑戰

自定義組件

自定義組件，指的是由開發者本身定義的組件，而不是微信定義的組件。

定義組件

定義組件第一步：新建一個文件夾專門用來盛放全部的自定義組件。文件夾名稱隨意。

第二步：在該文件夾上右擊鼠標 會彈出一個新建列表

點擊列表中的新建Components

此時，會讓用戶輸入一個名稱，該名稱就是組件名稱。

輸入名稱點擊肯定，出現了四個文件

這四個文件就是頁面所需的四個文件。

modal.js：

頁面的js文件中，是調用了Page函數，該函數用於註冊頁面。

這裏的modal中調用的是Component函數。用於註冊組件

modal.wxss：用於定義組件的樣式

modal.wxml: 用於定義組件的結構

modal.json: 用於定義組件的配置

使用自定義組件

第一步： 在要使用該組件的頁面的json文件中，配置 usingComponets

{
   "usingComponents": {
    "custom": "/components/modal/modal"
  }
}
複製代碼

usingComponents: 是一個對象

對象的key表示自定義組件在當前頁面中使用的時候的名稱

對象的value表示自定義組件的路徑

第二步：使用自定義組件

在頁面的wxml文件中，使用<custom></custom>

單個子組件

有些時候，咱們想要在組件中，定義子組件。

好比一個組件，定義了表單內容。可是沒有定義標題。此時咱們能夠經過slot組件「預留」一個地址。供使用該組件的用戶本身放置子組件。

自定義組件內:

<form>
    <view> <slot></slot> </view>
    <view> <label>用戶名</label><input type='text'></input> </view>
</form>
複製代碼

此時，咱們能夠在頁面內使用時在組件開始標籤與閉合標籤之間，寫子組件：

<custom>
  <text>登陸表單</text>
</custom>
複製代碼

最終的渲染結果就是將<slot></slot>換成<text>登陸表單</text>

多個子組件

假如，上面的表單中，咱們不單單預留一個標題，還預留一個別的位置。

此時，依舊使用slot，可是須要進行配置。

第一步：在自定義組件的JS文件中，定義options

// components/modal.js
 Component({
 options: {
   "multipleSlots": true
 }
})
複製代碼

第二步：在自定義組件的WXML文件中，定義多個slot，而且給定name屬性

第三步：在使用自定義組件的頁面中，填入多個子組件，並給每個子組件slot屬性

<custom>
  <text slot="a">註冊表單</text>
  <text slot="b">12312321321</text>
</custom>
複製代碼

自定義組件的屬性、數據、方法

在自定義組件的JS文件中，有一個函數Component

它接收一個對象，該對象默認有三個屬性。

properties: 定義本自定義組件的屬性的對象

data: 定義本自定義組件的所需數據

methods: 定義本自定義組件所需的函數

自定義組件內部與外部的通訊

Component所接收的對象，能夠在任何一個函數中經過this獲得。它擁有一個方法triggerEvent方法。它能夠觸發事件。

第一步：給自定義組件綁定自定義事件

<custom bindclose="close">
 <text slot="a">註冊表單</text>
 <text slot="b">12312321321</text>
</custom>
複製代碼

第二步：在頁面中對應的JS文件中，定義close函數

第三步：在自定義組件的某個方法內，觸發close方法

第四步：當觸發hello時，就會向外傳遞你好，傳遞的數據在close函數的事件對象的detail上

其它API

getLocation  獲取當前的位置信息

openLocation 打開一個位置

chooseLocation 選擇一個位置

chooseImage 選擇圖片

uploadFile 上傳文件

downLoadFile 下載文件

request 發送請求

etWeRunData 獲取運動信息

requestPayment 微信支付

項目中使用的API

獲取系統信息

微信提供了API用於獲取手機系統的相關信息

wx.getSystemInfoSync()

返回值是一個對象：對象中包含 系統版本、手機型號、窗體寬高等信息。

獲取微信中已經設置過的地址列表

wx.chooseAddress({
success: function(res) {
res就是你當前選擇的地址的相關信息
}
});
複製代碼

開放能力

這是一個button組件的使用方式:

經過給button組件設置open-type="XXX"來獲取對應的信息

demo:

<button open-type="getPhoneNumber" bindgetphonenumber='getphonenumber'>獲取電話</button>
複製代碼

getphonenumber:是對應的JS文件的事件函數 函數的參數中有一個對象。該對象就是手機號碼所在的對象。

我的用戶，沒法使用。

WXS

該組件容許用戶執行腳本

屬性: module 用於定義模塊名稱

定義以後，就能夠在wxs內部經過module.exports 向外暴露數據

還能夠在{{}}中，經過定義的模塊名稱來調用方法

上線

第一步：設置APPID

第二步：開發

第三步：點擊菜單欄中的工具選項 再在下拉菜單中選擇上線選項

第四步： 輸入版本號 輸入項目備註

點擊上傳，此時就上傳到微信服務器。此時能夠去開發平臺，登陸帳號，進入開發管理，進行相關設置，設置完畢以後。在開發版本中，找到你要上線的項目。點擊提交審覈。等待審覈經過，又會出如今審覈經過版本中，點擊上線。