一. VSCode開發(fā)微信小程序配置
- 安裝插件 minapp
- 安裝插件wechat-snippet
- 安裝wxml插件
- 如何調(diào)試?
調(diào)試遇到兩個問題,第一, 如何熱更新 第二,如何看console 第三, 新建頁面\新建組件等操作還是微信IDE好一些
這幾個問題目前都沒有太完整的解決方案, 幸運的是微信IDE有分窗彈出功能,有監(jiān)測外部更新功能,
所以可以打開微信IDE同時打開VScode, 用vscode寫代碼,用微信IDE調(diào)試和創(chuàng)建頁面及組件
單屏都可以,雙屏3屏肯定沒問題. 有了vscode終于可以愉快了. ????????????
二 組件
- 在組件wxss中不應(yīng)使用ID選擇器、屬性選擇器和標簽名選擇器
- 生命周期方法可以直接定義在 Component 構(gòu)造器的第一級參數(shù)中
- 生命周期也可以在 lifetimes 字段內(nèi)進行聲明（這是推薦的方式臭墨，其優(yōu)先級最高）
- 因為 WXML 節(jié)點標簽名只能是小寫字母释涛、中劃線和下劃線的組合篙骡，所以自定義組件的標簽名也只能包含這些字符
- 出于性能考慮摆碉，使用 usingComponents 時罢艾， setData 內(nèi)容不會被直接深復(fù)制
1. 創(chuàng)建組件
創(chuàng)建組件和創(chuàng)建頁面基本是一至的, 頁面其實也是一個組件
創(chuàng)建完成后,不同點在于,組件實例化的是Component類型
2. 如何使用組件
想調(diào)用其他組件時,在自己的json文件中注冊要用的組件
然后可以標簽化引用
3. 組件的JS結(jié)構(gòu) (Component構(gòu)造器)
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
組件的基本結(jié)構(gòu):
// components/hello/hello.js
Component({
behaviors:[],//mixin
properties: {
innerText: {
type: String,
value: 'default value',
}
},
data: {
msg: "hola"
},
methods: {
btnclicked() {
this.setData({
msg: "hello",
innerText:"no can do"
})
}
},
observers: {
msg() {
console.log(this.data.msg)
}
},
// 生命周期函數(shù)务漩，可以為函數(shù)咱台，或一個在methods段中定義的方法名
attached: function() {}, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
created(){
console.log("haha")
},
lifetimes: {
// 生命周期函數(shù)，可以為函數(shù)篇裁，或一個在methods段中定義的方法名
created(){
console.log("lolo")
},
attached: function() {},
moved: function() {},
detached: function() {},
},
pageLifetimes: {
// 組件所在頁面的生命周期函數(shù)
show: function() {},
hide: function() {},
resize: function() {},
},
})
4. 父子組件通訊
(1). 父傳子 //通過屬性傳遞
父傳子通過屬性傳遞
例如:
父組件傳遞數(shù)值
<!--components/father/father.wxml-->
<text>父組件</text>
<son flist="{{fatherList}}"></son>
子組件用properties接收數(shù)值
// components/son/son.js
Component({
/**
* 組件的屬性列表
*/
properties: {
"flist":{
type:String,
default:[1,2,3]
}
},
(2). 子傳父 //通過發(fā)射事件傳遞
在父組件中調(diào)用子組件時就聲明
子組件用 this.triggerEvent('要觸發(fā)的事件',{參數(shù)},{配置})來發(fā)射事件
最后在父組件對應(yīng)方法中,獲取子組件傳遞的數(shù)據(jù)
3. 父子組件間關(guān)系法
如果我們想制作固定的,類似于ul>li這樣的組件集合,可以嘗試用組件關(guān)系法
有時要實現(xiàn)這樣的組件:
<custom-ul>
<custom-li> item 1 </custom-li>
<custom-li> item 2 </custom-li>
</custom-ul>
這個例子中沛慢， custom-ul 和 custom-li 都是自定義組件赡若，它們有相互間的關(guān)系达布，相互間的通信往往比較復(fù)雜。此時在組件定義時加入 relations 定義段逾冬，可以解決這樣的問題黍聂。
①. 首先,我們將父子組件建立聯(lián)系
// path/to/custom-ul.js
Component({
relations: {
'./custom-li': {
type: 'child', // 關(guān)聯(lián)的目標節(jié)點應(yīng)為子節(jié)點
}
},
Component({
relations: {
'./custom-ul': {
type: 'parent', // 關(guān)聯(lián)的目標節(jié)點應(yīng)為父節(jié)點
}
}
②. 父子組件關(guān)系還有生命周期
父子組件建立\脫離關(guān)系都可以觸發(fā)生命周期函數(shù),
例如:
// path/to/custom-ul.js
Component({
relations: {
'./custom-li': {
type: 'child', // 關(guān)聯(lián)的目標節(jié)點應(yīng)為子節(jié)點
linked: function(target) {
// 每次有custom-li被插入時執(zhí)行，target是該節(jié)點實例對象身腻，觸發(fā)在該節(jié)點attached生命周期之后
},
linkChanged: function(target) {
// 每次有custom-li被移動后執(zhí)行产还，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點moved生命周期之后
},
unlinked: function(target) {
// 每次有custom-li被移除時執(zhí)行嘀趟，target是該節(jié)點實例對象脐区，觸發(fā)在該節(jié)點detached生命周期之后
}
}
},
③ 父子組件如何互相調(diào)用 //getRelationNodes
methods: {
_getAllLi: function(){
// 使用getRelationNodes可以獲得nodes數(shù)組，包含所有已關(guān)聯(lián)的custom-li她按，且是有序的
var nodes = this.getRelationNodes('path/to/custom-li')
}
},
5. 插槽
(1) 默認插槽 //唯一
小程序的插槽和vue完全一樣
我們在子組件中定義了一個插槽
<!--components/comp2/comp2.wxml-->
<view class="" hover-class="none" hover-stop-propagation="false">
<slot></slot>
</view>
在父組件中調(diào)用時往其中插入元素
<!--components/comp1/comp1.wxml-->
<comp2>
<button>OK</button>
</comp2>
(2). 具名插槽
插槽頁可以具名:
如果使用具名插槽, 需要在子組件js中開啟配置
options:{
multipleSlots: true
},
在子組件中用name屬性定義插槽名稱
<view>
<slot name="abc"></slot>
</view>
在父組件中 用slot="插槽名" 來填充插槽
<comp2>
<button slot="abc">OK</button>
</comp2>
有具名插槽情況下還可以有默認插槽, 只能有一個.
三. Behavior代碼復(fù)用 //mixin
我們建立一個文件mybehaviors.js, 里面放入一個可以公用的代碼
module.exports =Behavior(
{
properties: {},
data: {
msg:"hello!!!"
},
methods: {}
})
每個組件想引用時:
直接behaviors:[require("../mybehaviors.js")],即可
6. 組件生命周期
- created組件剛剛被生成 ,還不能調(diào)用 setData
- 在 behaviors 中也可以編寫生命周期方法牛隅，同時不會與其他 behaviors 中的同名生命周期相互覆蓋炕柔。但要注意，如果一個組件多次直接或間接引用同一個 behavior 媒佣，這個 behavior 中的生命周期函數(shù)在一個執(zhí)行時機內(nèi)只會執(zhí)行一次匕累。
7. 組件所在頁面生命周期
8. 數(shù)據(jù)監(jiān)聽器 //監(jiān)聽屬性
和vue的監(jiān)聽屬性watch一樣
Component({
attached: function() {
this.setData({
numberA: 1,
numberB: 2,
})
},
observers: {
'numberA, numberB': function(numberA, numberB) {
// 在 numberA 或者 numberB 被設(shè)置時，執(zhí)行這個函數(shù)
this.setData({
sum: numberA + numberB
})
}
}
})
