柚子快報(bào)邀請碼778899分享：小程序?qū)W習(xí)02-語法
柚子快報(bào)邀請碼778899分享：小程序?qū)W習(xí)02-語法
1、標(biāo)簽
地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/
選擇器
2、樣式-尺寸單位rpx
3、組件
小程序常用的組件
view 組件 【div】swiper 和 swiper-item 組件image組件 【img】text 組件 【p】navigator 組件scroll-view 組件字體圖標(biāo)
使用小程序常用的組件實(shí)現(xiàn)項(xiàng)目首頁的效果
swiper輪播圖組件
地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
image圖片組件
注意：默認(rèn)寬為：320px，高為240px，就算不設(shè)置src屬性也默認(rèn)有寬高 小程序中的background-image中，不支持本地路徑圖片，只能是base64或者網(wǎng)絡(luò)路徑圖片
show-menu-by-longpress：長按分享給好友src：圖片路徑mode：圖片截取(縮放)模式 top right : 左上角… aspectFill：保持圖片清晰，會截取圖片，不顯示完整（縱橫比縮放圖片） aspectFit：完整展示圖片，可能導(dǎo)致圖片留白lazy-load：懶加載圖片（在滑動到一定距離時候加載圖片，可視區(qū)上下三屏）
text文本組件
注意：text組件里面只能嵌套text組件，其他組件不能嵌套，比如view
user-select：是否可以文字被選中space：文字內(nèi)是否允許空格存在 ensp：小空格 emsp：大空格 nbsp：字符空格
navigator跳轉(zhuǎn)頁面組件
url：跳轉(zhuǎn)到哪個頁面open-type：跳轉(zhuǎn)頁面的類型 navigate：只能跳轉(zhuǎn)到非tabbar頁面（保留上級頁面） redirect：只能跳轉(zhuǎn)到非tabbar頁面（不保留上級頁面，只保留跳轉(zhuǎn)回首頁） switchTab：只能跳轉(zhuǎn)到tabbar頁面（什么都不保留）(連頁面?zhèn)鬟f參數(shù)也不保留) reLauch：關(guān)閉所有頁面，然后打開小程序中某個頁面 navigateBack：返回上一頁，如果想返回幾頁，需要加上delta屬性
scroll-view滾動視圖組件
scroll-x：橫向滾動 scroll-y：縱向滾動
4、字體圖標(biāo)
地址：https://bilibili.com/video/BV1LF4m1E7kB/?p=29&spm_id_from=pageDriver&vd_source=036cf151234704501120f59145150cb7
5、事件綁定和事件對象
綁定事件：
//js
Page({
btnFun(){
console.log("點(diǎn)擊了")
}
})
//js
Page({
inputFun(event){
console.log(event.detail.value)
}
})
阻止事件冒泡
使用bind默認(rèn)有事件冒泡，使用catch阻止事件冒泡
事件傳參-data-*自定義數(shù)據(jù)
data-prent-name：===》 prentName
data-prentName：===》 prentname
//js
Page({
btnFun(event){
console.log(event.target.id);//1314 target是點(diǎn)擊對象上的值
console.log(event.currentTarget.id);//1314 currentTarget是點(diǎn)擊上view父類的值
}
})
事件傳參-mark-*自定義數(shù)據(jù)
//js
Page({
btnFun(event){
console.log(event.mark.id);//1314 如果是子類點(diǎn)擊就顯示子類和父類的值，如果是父類點(diǎn)擊就只顯示父類的值
}
})
6、模板語法 聲明和綁定數(shù)據(jù)
Page({
data:{
name:"小陳",
age:18
}
})
7、setData
小程序中修改數(shù)據(jù)不推薦通過賦值的方式修改，數(shù)據(jù)無法改變頁面的數(shù)據(jù) 而是要通過調(diào)用setData方法進(jìn)行修改，setData方法接收對象作為參數(shù)，key是需要修改的數(shù)據(jù)，value是最新的值 兩個作用
更新數(shù)據(jù)驅(qū)動視圖更新
注意點(diǎn)： 如果是修改最外層的基本數(shù)據(jù)，則可以直接寫key值 如果是修改引用類型數(shù)據(jù)，則key值一定要用引號
修改基本數(shù)據(jù)類型
//修改基本數(shù)據(jù)類型
Page({
data:{
num:1
}
addNum() {
//this.data.num++ 不生效，數(shù)據(jù)發(fā)生改變，頁面視圖沒有更新
this.setData({
//key是需要更新的數(shù)據(jù) value是最新的值
num:this.data.num + 1
})
console.log(this.data.num)
}
})
修改對象類型(有優(yōu)化版本)
//修改對象類型
Page({
data:{
info:{
num:1,
age:10
}
}
addNum() {
this.setData({
//key需要用引號包裹起來
'info.num': 18,
'info.age': 18
})
}
})
遺留優(yōu)化空間,如果info對象里面有很多數(shù)據(jù)修改去修改，而這樣子每次我們setData中都要帶上info數(shù)據(jù)路徑，不方便，我們可以結(jié)合es6中的展開數(shù)據(jù)來做
優(yōu)化后
//修改對象類型
Page({
data:{
info:{
num:1,
age:10
}
}
addNum() {
//先把數(shù)據(jù)復(fù)制一份再去修改
const newInfo = {
...this.data.info
num:18,
age:18
}
//const newInfo = Object.assign(this.data.info,{num:18},{age:18}) 這樣子也可以
this.setData({
info:newInfo
})
}
})
刪除數(shù)據(jù)
直接在addNum方法里面delete this.data.info.age數(shù)據(jù)發(fā)生刪除，但是頁面視圖沒有更新
刪除單個屬性
//刪除單個屬性
Page({
data:{
info:{
num:1,
age:10
}
}
addNum() {
delete this.data.info.age
this.setData({
info:this.data.info //重新賦值一遍就可以了
})
}
})
刪除多個屬性
//刪除多個屬性
Page({
data:{
info:{
num:1,
age:10,
test:"你好"
}
}
addNum() {
const {num,age,...rest} = this.data.info
this.setData({
info:rest //通過多個參數(shù)來賦值新的對象
})
}
})
修改數(shù)組類型
新增：新增后重新賦值一遍 修改：在setData里面修改 刪除：刪除后重新賦值一遍
Page({
data:{
list:[1,2,3]
}
addNum() {
this.data.list.push(4)
this.data.list.split(1,1) //刪除
this.setData({
list:this.data.list //新增（重新賦值一遍）
'list[0]':0, //修改
})
}
})
8、雙向數(shù)據(jù)綁定
單向數(shù)據(jù)綁定：數(shù)據(jù)能夠影響頁面，頁面用戶修改影響不了數(shù)據(jù)
簡易雙向數(shù)據(jù)綁定
如果想實(shí)現(xiàn)雙向數(shù)據(jù)綁定，需要在對應(yīng)的屬性之前添加上 model:
問題1：屬性值之鞥呢是一個單一字段的綁定
問題2：屬性值不能寫數(shù)據(jù)路徑，也就是不支持對象和數(shù)組
若需要解決這個問題，則需要在改事件上綁定一個bindinput觸發(fā)方法，然后修改對象中的值
9、列表渲染放for
{{item}} - {{index}}
{{newItem}} - {{key}}
block
block 不是一個組件，只是渲染元素block不會在頁面中渲染，類型是vue中的frament組件，可以用于for遍歷最外層
10、條件渲染if
wx:if、wx:elif、wx:else 類似于vue中的v-if、v-elif、v-elsehidden 類似于vue中的v-show
注意點(diǎn)： 1、elif和else是不能單獨(dú)使用的，必須要結(jié)合if使用 2、使用if和elif之間必須要連貫，中間不能有其他東西
11、生命周期
定義：生命周期分為應(yīng)用生命周期和頁面生命周期，應(yīng)用生命周期就是在第一次加入小程序時候會觸發(fā)，而頁面生命周期則是不同頁面跳轉(zhuǎn)時候會觸發(fā)
應(yīng)用(全局)生命周期
onLaunch：小程序初始化onShow：小程序啟動或者切前臺（熱啟動切換到前臺）onHide：小程序切后臺（離開前臺加入后臺）
注意：若30分鐘以內(nèi)沒有切換到小程序前臺，則后臺小程序就會被回收，再進(jìn)去小程序就會走onLaunch鉤子
30分鐘外啟動（冷啟動） 概念：第一次啟動，或者是小程序在后臺時間超過30分鐘，然后點(diǎn)擊進(jìn)去小程序 onLaunch → onShow → onHide(離開) . . 30分鐘內(nèi)啟動（熱啟動） 概念：小程序在后臺時間小于30分鐘，然后再點(diǎn)進(jìn)來小程序 onShow → onHide(離開)
app.js
//app.js
App({
onLaunch:function(){},
onShow:function(){},
onHide:function(){}
})
頁面生命周期
onLoad：監(jiān)聽頁面加載（一個頁面只會觸發(fā)一次）onShow：監(jiān)聽頁面展示onReady：監(jiān)聽初始渲染完成（一個頁面只會觸發(fā)一次）onUnload：監(jiān)聽頁面卸載onHide：監(jiān)聽頁面隱藏
重點(diǎn)：
當(dāng)一個頁面加載時候，默認(rèn)會經(jīng)過的生命周期是：onLoad → onShow → onReady離開時候，如果是銷毀當(dāng)前頁面則走onUnload 如果是隱藏當(dāng)前頁面則走onHide，隱藏然后再回來的話會觸發(fā)onShowtabbar頁面切換不走銷毀流程
不保留當(dāng)前頁面(走銷毀流程)：open-type="redirect"、open-type="switchTab"、open-type="reLauch"、open-type="" 保留當(dāng)前頁面(走隱藏流程)：open-type="navigate"
open-type：跳轉(zhuǎn)頁面的類型 navigate：只能跳轉(zhuǎn)到非tabbar頁面（保留上級頁面） redirect：只能跳轉(zhuǎn)到非tabbar頁面（不保留上級頁面，只保留跳轉(zhuǎn)回首頁） switchTab：只能跳轉(zhuǎn)到tabbar頁面（什么都不保留）(連頁面?zhèn)鬟f參數(shù)也不保留) reLauch：關(guān)閉所有頁面，然后打開小程序中某個頁面 navigateBack：返回上一頁，如果想返回幾頁，需要加上delta屬性
組件生命周期
組件生命周期：created、attached、detached組件所在頁面的生命周期：show、hide
不同點(diǎn)：一個是當(dāng)前組件的生命周期，一個是當(dāng)前組件所在頁面的生命周期（父組件）
組件生命周期對象
Component({
//組件生命周期聲明對象
lifetimes:{
//組件實(shí)例被創(chuàng)建好以后執(zhí)行（不能調(diào)用setData）
created(){},
//組件被初始化完畢，模板解析完成，已經(jīng)把組件掛載到頁面上
attached(){},
//組件被銷毀時
detached(){}
}
})
組件所在頁面的生命周期
Component({
//組件所在頁面的生命周期
pageLifetimes:{
show(){},
hide(){}
}
})
總結(jié)
小程序生命周期執(zhí)行順序
不同跳轉(zhuǎn)頁面方式，生命周期銷毀順序 熱啟動形式的顯示與隱藏順序
12、小程序API
小程序開發(fā)框架提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，例如:獲取用戶信息、微信登錄、微信支付等 小程序提供的API 幾乎都掛載在 wx 對象下，例如: wx.request)、wx.setStoragel 等，wx 對象實(shí)際上就是小程序的宿主環(huán)境微信所提供的全局對象
小程序API的分類
異步API：通常都接受一個object類型的參數(shù)，例如：wx.requst({})同步API：約定以Sync結(jié)尾，例如wx.setStorageSync()事件監(jiān)聽API：約定以on開頭，例如：wx.onAppHide()
異步API支持 callback & Promise 兩種調(diào)用方式 1、當(dāng)接口參數(shù) Object 對象中不包含 success/fail/complete 時將默認(rèn)返回 Promise 2、部分接口如 request,uploadFile 本身就有返回值，因此不支持 Promise 風(fēng)格的調(diào)用方式，它們的 promisify 需要開發(fā)者自行封裝
13、網(wǎng)絡(luò)請求wx.request()
請求地址設(shè)置
1、如果是以域名請求服務(wù)器外的數(shù)據(jù)，則需要在微信公共平臺配置（必須是https開頭的域名）部署上線： 地址：https://mp.weixin.qq.com/開發(fā) → 開發(fā)管理 → 開發(fā)設(shè)置 → 服務(wù)器域名 → 開始配置
2、若不想校驗(yàn)這部分，或者是使用本地開發(fā)，可以點(diǎn)詳情里面進(jìn)行取消校驗(yàn)設(shè)置
請求寫法
Page({
//獲取數(shù)據(jù)
getDataFun() {
wx.request({
url:"https://xxxx/get",
method:'GET',
data:{},
header:{},
success:(res)=>{}, //成功回調(diào)
fail:()=>{}, //失敗回調(diào)
complete:()=>{} //成功或者失敗都會執(zhí)行的回調(diào)
})
}
})
14、界面交互
loading提示框
wx.showLoading({})：顯示提示框wx.hideLoading()：關(guān)閉提示框
Page({
//獲取數(shù)據(jù)
getDataFun() {
//顯示loading
wx.showLoading({
title:"數(shù)據(jù)加載中...",
mask:true //是否顯示蒙層,防止觸摸穿透(頁面其他位置操作不了),默認(rèn)是false
})
wx.request({
url:"https://xxxx/get",
method:'GET',
complete:()=>{
//不管成功還是失敗都關(guān)閉提示框
wx.hideLoading()
}
})
}
})
模態(tài)對話框
wx.showModal({})：顯示模態(tài)對話框
Page({
async getDataFun(){
//顯示模態(tài)對話框
const res = await wx.showModal({
title:'提示',
content:'是否刪除該商品?'
})
console.log(res);
if(res.confirm){ //點(diǎn)擊確認(rèn)
}else{ //點(diǎn)擊取消
}
}
})
點(diǎn)擊確認(rèn)或者失敗它自動會關(guān)閉模態(tài)提示框
消息提示框
wx.showToast({})
Page({
getDataFun(){
//顯示消息提示框
showToast({
title:'提示內(nèi)容',
icon:'', //error | loading | none | success
duration:2000 //多久消失
})
}
})
15、本地存儲
如果存儲是對象類型數(shù)據(jù)，不需要使用JSON.stringify和JSON/parse進(jìn)行轉(zhuǎn)換
Page({
//同步
getDataFun1() {
//存儲 (如果存儲是對象類型數(shù)據(jù)，不需要使用JSON.stringify和JSON/parse進(jìn)行轉(zhuǎn)換)
wx.setStorageSync('name','小陳'),
wx.setStorageSync('obj',{name:"小陳"}),
//獲?。ㄖ付╧ey）
const name = wx.getStorageSync('name')
//刪除（指定key）
wx.removeStorageSync('name')
//清空
wx.clearStorageSync()
},
//異步
async getDataFun2() {
//存儲
wx.setStorage({
key:'obj',
data:{name:'chen'}
}),
//獲取（指定key）
const name = await wx.getStorage({
key:'name'
})
//刪除（指定key）
wx.removeStorage({
key:'name'
})
//清空
wx.clearStorage()
}
})
16、路由跳轉(zhuǎn)與路由通信
聲明式導(dǎo)航
url：跳轉(zhuǎn)到哪個頁面open-type：跳轉(zhuǎn)頁面的類型 navigate：只能跳轉(zhuǎn)到非tabbar頁面（保留上級頁面） redirect：只能跳轉(zhuǎn)到非tabbar頁面（不保留上級頁面，只保留跳轉(zhuǎn)回首頁） switchTab：只能跳轉(zhuǎn)到tabbar頁面（什么都不保留）(連頁面?zhèn)鬟f參數(shù)也不保留) reLauch：關(guān)閉所有頁面，然后打開小程序中某個頁面 navigateBack：返回上一頁，如果想返回幾頁，需要加上delta屬性
編程式導(dǎo)航
下面屬性作用和聲明式作用一一對應(yīng)
wx.navigateTo({})wx.redirectTo({})wx.switchTab({})：不能攜帶參數(shù)wx.reLaunch({})wx.navigateBack({})
open-type：跳轉(zhuǎn)頁面的類型 . navigate：只能跳轉(zhuǎn)到非tabbar頁面（保留上級頁面） redirect：只能跳轉(zhuǎn)到非tabbar頁面（不保留上級頁面，只保留跳轉(zhuǎn)回首頁） switchTab：只能跳轉(zhuǎn)到tabbar頁面（什么都不保留）【路徑后面不能攜帶參數(shù)】 reLauch：關(guān)閉所有頁面，然后打開小程序中某個頁面 navigateBack：返回上一頁，如果想返回幾頁，需要加上delta屬性
Page({
getDataFun(){
wx.navigateTo({
url:'/pages/list/list', //不攜帶參數(shù)
//url:'/pages/list/list?name=chen&age=18' //攜帶參數(shù)
})
//其他的也是這么寫，但是注意wx.switchTab({})不能寫攜帶參數(shù)
}
})
路由通信(傳遞參數(shù))
Page({
getDataFun(){
wx.navigateTo({
url:'/pages/list/list?name=chen&age=18' //攜帶參數(shù)
})
//注意：wx.switchTab({})不能寫攜帶參數(shù)
}
})
然后在跳轉(zhuǎn)后的頁面中onLoad生命鉤子接收
Page({
onLoad(options){
console.log(options.name)
}
})
17、上拉加載
需要在當(dāng)前頁面中json配置onReachBottomDistance
//json
{
"onReachBottomDistance": 100, //表示距離底部還有多少px時候觸發(fā)
}
然后在頁面中js文件中的onReachBottom事件監(jiān)聽上拉函數(shù)進(jìn)行觸底操作
Page({
onReachBottom(){
console.log("觸底了")
}
})
18、下拉刷新
需要在當(dāng)前頁面中json配置enablePullDownRefresh
//json
{
"enablePullDownRefresh": true, //開啟允許下拉刷新
}
然后在頁面中js文件中的onPullDownRefresh事件監(jiān)聽下拉函數(shù)進(jìn)行觸底操作
Page({
onPullDownRefresh(){
console.log("下拉刷新")
//wx.stopPullDownRefresh() 手動讓下拉變回原樣
}
})
19、自定義組件
地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
開發(fā)中常見的組件主要分為 公共組件(自定義組件)和 頁面組件兩種，因此注冊組件的方式也分為兩種：
全局注冊:在app;son 文件中配置 usingComponents 進(jìn)行注冊，注冊后可以在任意頁面使用局部注冊:在頁面的json 文件中配置 usingComponents進(jìn)行注冊，注冊后只能在當(dāng)前頁面使用
在 usingComponents 中進(jìn)行組件注冊時，需要提供 自定義組件的組件名和 自定義組件文件路徑 在將組件注冊好以后，直接將 自定義組件的組件名 當(dāng)成 組件標(biāo)簽名 使用即可
創(chuàng)建和注冊
公共組件
在components目錄下面： 右鍵 → 新建文件夾 → 輸入名稱 → 新建Component
全局注冊app.json,局部注冊則是在該頁面的json文件寫
//json文件
{
"usingComponents": {
"mySelfComponent":"./components/mySelfComponent/mySelfComponent"
}
}
//全局注冊在哪個頁面都可以使用，局部只能在該頁面去使用
頁面組件 在該頁面下：右鍵 → 新建文件夾 → 輸入名稱 → 新建Component，然后在該頁面的json文件去注冊使用
組件的特點(diǎn)
組件中的js文件，不是使用Page({}),而是使用Component({})數(shù)據(jù)定義在data中方法定義在methods對象中（類似于vue）接收數(shù)據(jù)是使用properties（父組件傳遞過來數(shù)據(jù)，vue中用props接收）
Component({
//定義數(shù)據(jù)
data:{},
//定義方法
methods:{},
//組件的屬性列表：組件的對外屬性，主要用來接收組件使用者傳遞給組件內(nèi)部的屬性以及數(shù)據(jù)
properties:{
//簡寫
keyName:String,
//完整寫法
keyName:{
type:String, // 類型：String | Number | Boolean | Object | Array
value:'chen' //默認(rèn)值
}
}
})
//方法中如果想獲取父組件傳遞過來的值：this.properties.key名稱，但是不建議修改，因?yàn)闀斐蓴?shù)據(jù)流的混亂
20、插槽slot
默認(rèn)插槽具名插槽
默認(rèn)插槽
需要在components目錄下創(chuàng)建組件，然后頁面需要在json文件中注冊
我是嵌入的內(nèi)容
具名插槽
需要在components目錄下創(chuàng)建組件，然后頁面需要在json文件中注冊
我是沒有指定的內(nèi)容
注意點(diǎn)：開啟多個slot，需要在插槽組件中開啟multioleSlots
//custom組件js文件
Component({
options:{
//啟用多 slot 支持
multioleSlots: true
}
})
21、樣式隔離問題
自定義組件樣式問題
自定義組件中，不能使用id、標(biāo)簽選擇器(view text)，只能使用類選擇器(class)子選擇器，只能用于view和子組件，用于其他組件可能出現(xiàn)樣式失效問題（>）繼承樣式，例如：color\font 都會從組件外繼承全局樣式、組件所在頁面的樣式文件對自定義組件樣式都無效屬性選擇器樣式推薦只在自定義組件內(nèi)容區(qū)使用，防止污染作用域
樣式設(shè)置 自定義組件的js文件
Component({
options:{
//isolated:開啟樣式隔離，使用組件和自定義組件樣式相互不影響（父子互不影響）
styleIsolation:'isolated', //默認(rèn)值
//apply-shared:使用組件能影響自定義組件樣式，但自定義組件樣式不影響使用組件（父影響子，子不影響父）
styleIsolation:'apply-shared',
//shared:使用組件和自定義組件的樣式相互影響(父子相互影響)
styleIsolation:'shared'
}
})
修改表單默認(rèn)樣式
1、首先先到開發(fā)文檔中找到對應(yīng)表單，然后打開調(diào)試控制臺找到對應(yīng)的類名進(jìn)行設(shè)置 地址：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
2、設(shè)置時候需要注意：如果直接在自定義組件中設(shè)置會不生效，可以在使用自定義組件的組件中設(shè)置，或者去全局樣式中設(shè)置可以設(shè)置。如果一定要在自定義組件中設(shè)置，可以添加styleIsolation:‘shared’，但是這樣子會污染樣式作用域，所以我們還需要在修改樣式時候添加一個命名空間(添加它父級的類名)
22、自定義組件數(shù)據(jù)監(jiān)聽器observers
observers 若監(jiān)聽的是使用組件傳遞過來的數(shù)據(jù)，則初始化時候觸發(fā)一次 普通頁面并不具備監(jiān)聽器功能，如果想要普通頁面也有這功能，就需要使用Component方法進(jìn)行構(gòu)造頁面(請看第24大標(biāo)題)
Component({
data:{
num:1,
count:1,
obj:{name:'chen'},
arr:[1,2,3]
},
//監(jiān)聽屬性變化
observers:{
//1、監(jiān)聽單個屬性變化
num:function(newNum) {
console.log(newNum)
}
//2、監(jiān)聽多個屬性變化
'num,count':function(newNum,newCount) {
console.log(newNum,newCount)
}
//3、監(jiān)聽對象或者數(shù)組某個數(shù)據(jù)變化
'obj.name':function(newName){
console.log(newName)
}
'arr[0]':function(newValue){
console.log(newValue)
}
//4、監(jiān)聽整個對象數(shù)據(jù)變化
'obj.**':function(newObj) {
console.log(newObj)
}
//5、監(jiān)聽使用組件傳過來的數(shù)據(jù)（初始化時候會觸發(fā)一次）
label:function(newLabel) {
console.log(newLabel)
}
},
properties:{
label:String
}
})
其中第5點(diǎn)可以可以用于頁面加載初始化時候調(diào)用一次，傳遞來的數(shù)據(jù)可以賦值給data中的新數(shù)據(jù)，這樣子就可以進(jìn)行變相修改傳遞過來的數(shù)據(jù)，因?yàn)閭鬟f過來的數(shù)據(jù)不推薦進(jìn)行修改，這樣子會照常數(shù)據(jù)流混亂
23、組件通信
父→子（properties）
父組件傳遞過來的值不推薦修改，因?yàn)闀粘?shù)據(jù)流混亂
//子組件
Component({
//組件的屬性列表：組件的對外屬性，主要用來接收組件使用者傳遞給組件內(nèi)部的屬性以及數(shù)據(jù)
properties:{
//簡寫
keyName:String,
//完整寫法
keyName:{
type:String, // 類型：String | Number | Boolean | Object | Array
value:'chen' //默認(rèn)值
}
}
})
如果要修改父組件傳遞過來的數(shù)據(jù)，可以使用observers監(jiān)聽傳遞過來的數(shù)據(jù)（初始化時候調(diào)用一次,用于新賦值給data數(shù)據(jù)）
//子組件
Component({
data:{
newNum:0
},
properties:{
num:Number
},
observers:{
num:function(data){
this.setData({
newNum:data //初始化時候賦值給新data，這樣子就可以修改這個數(shù)據(jù)了
})
}
}
})
子 → 父
第一種方法： triggerEvent 子組件：
//custom
Component({
data:{
num:100
},
methods:{
sendData() {
//第一個參數(shù)：發(fā)射自定義事件名稱
//第二個參數(shù)：傳遞給父組件的內(nèi)容
this.triggerEvent('myevent',this.data.num)
}
}
})
父組件：
//wxml
//js
Page({
getData(event){
console.log(event.detail)
}
})
第二種方法： selectComponent：獲取子組件實(shí)例對象
//wxml 子組件標(biāo)簽
//js
Page({
getData(){
const res = this.selectComponent("#custom") //const res = this.selectComponent(".custom")
console.log(res.data); //獲取子組件實(shí)例對象中的數(shù)據(jù)
}
})
框架接口-getAPP() - 類似事件總線
可以任意組件共享數(shù)據(jù)（類似于vue中的全局事件總線）
在小程序中，可以通過getApp()方法獲取到小程序全局唯一的App實(shí)例 因此在App()方法中添加全局共享的數(shù)據(jù)、方法，從而實(shí)現(xiàn)頁面、組件的數(shù)據(jù)傳值
注意事項(xiàng)：
不要在 App() 方法中使用 getApp() ，使用 this 就可以拿到 app 實(shí)例通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)
app.js
//app.js
App({
//全局共享的數(shù)據(jù)
globalData:{
token:''
}
//全局共享的方法
setToken(token) {
this.globalData.token = token
}
})
任意組件js文件
//任意組件的js文件
//getApp 方法用來獲取全局唯一的App實(shí)例
const appInstance = getAApp()
Page({
login() {
appInstance.setToken("test-test-test")
}
})
頁面間通信
wx.navigator({})
原始頁面向跳轉(zhuǎn)頁面?zhèn)鬟f數(shù)據(jù)
代碼演示
//index.js
Page({
//點(diǎn)擊按鈕觸發(fā)的函數(shù)
handler(){
wx.navigateTo({
url:'/pages/list/list',
success(res) {
//跳轉(zhuǎn)頁面成功，向頁面注冊一個myevent事件并傳遞數(shù)據(jù)
res.eventChannel.emit('myevent',{name:'chen'})
},
//接收跳轉(zhuǎn)頁面?zhèn)鬟f過來的數(shù)據(jù)
events:{
currentevent:(res)=>{
console.log(res); //{age:18}
}
}
})
}
})
//list.js
Page({
onLoad() {
//通過this.getOpenerEventChannel() 可以獲取EventChannel對象
const EventChannel = this.getOpenerEventChannel()
//【獲取數(shù)據(jù)】通過EventChannel提供的on方法監(jiān)聽頁面發(fā)送的自定義事件
EventChannel.on('myevent',(res)=>{
console.log(res); //{name:'chen'}
})
//【傳遞數(shù)據(jù)給原頁面】通過EventChannel提供的emit方法也可以向上一級頁面?zhèn)鬟f數(shù)據(jù)
EventChannel.emit('currentevent',{age:18})
}
})
組件通信-全局事件總線-pubsub
任意組件通信
下載：npm install pubsub-js
傳遞數(shù)據(jù)
import PubSub from 'pubsub-js'
Component({
methods:{
//點(diǎn)擊按鈕發(fā)送數(shù)據(jù)
sendData(){
//第一個參數(shù)key名稱 第二個參數(shù)：傳遞的數(shù)據(jù)
PubSub.publish('myevent',{name:'chen',age:18})
}
}
})
接收數(shù)據(jù)
import PubSub from 'pubsub-js'
Component({
lifetimes:{
attached() {
PubSub.subscribe('myevent',(keyName,value)=>{
console.log(keyName,value); //myevent {name:'chne',age:18}
})
}
}
})
24、使用Component構(gòu)造頁面
問題：我們普通頁面（Page）并不具備很多功能，比如說數(shù)據(jù)監(jiān)聽等等，這個時候我們就需要使用Component方法進(jìn)行構(gòu)造頁面，從而實(shí)現(xiàn)復(fù)雜的頁面邏輯開發(fā)。
注意點(diǎn)：
1、要求.json文件中必須包含usingComponents字段（字段為空就行）2、里面的配置項(xiàng)需要和Component中的配置項(xiàng)保持一致3、普通頁面的Page中的方法、生命周期鉤子、事件監(jiān)聽方法都要寫在methods對象中4、頁面跳轉(zhuǎn)攜帶的參數(shù)也可以使用properties接收
Component({
//定義數(shù)據(jù)
data:{},
//方法、生命周期鉤子、事件監(jiān)聽方法
methods:{
onLoad(){},
onShow(){},
onReady(){},
onUnload(){},
onHide(){},
onPullDownRefresh(){},
onReachBottom(){},
onShareAppMessage(){}
},
//properties
properties(){}
})
25、組件操作復(fù)用behaviors（類似mixin）
可以將一些通用的邏輯和方法提取出來，然后再多個組件中去復(fù)用，從而減少代碼冗余，提高代碼的可維護(hù)性
注意點(diǎn)：
1、組件和behavior中有相同的數(shù)據(jù)或者方法，則組件權(quán)限大于behavior2、如果有重復(fù)的生命周期，都會被觸發(fā)，先觸發(fā)behavior中再觸發(fā)組件中的
復(fù)用的js操作文件
//復(fù)用的js文件
const behavior = Behavior({
//里面寫法和Component寫法一樣
data:{},
methods:{},
properties:{},
lifetimes:{},
pageLifetimes:{}
})
export default behavior;
使用
import behavior from './behavior'
Component({
behaviors:[behavior ]
})
26、外部樣式類
定義：父組件通過傳遞類給子組件，從而修改子組件的樣式
默認(rèn)情況下，組件和組件使用者之間如果存在相同的類名不會相互影響，組件使用者如果想修改組件的樣式，需要就解除樣式隔離，但是解除樣式隔離以后，在極端情況下，會產(chǎn)生樣式?jīng)_突、CSS 嵌套太深等問題，從而給我們的開發(fā)帶來一定的麻煩。
外部樣式類:在使用組件時，組件使用者可以給組件傳入 CSS 類名，通過傳入的類名修改組件的樣式
如果需要使用外部樣式類修改組件的樣式，在Component 中需要用 externalClasses 定義若干個外部樣式類。
//使用組件（父組件）
.my-class{
color:red
}
//自定義組件（子組件）custom
Component({
externalClasses:['extend-class']
})
27、npm
使用npm包
1、首先先在根目錄右鍵，然后再點(diǎn)擊在內(nèi)建終端打開，然后輸入npm init -y 初始化package.json文件
2、然后我們輸入下載包的命令：npm i @vant/weapp，然后下載這個包，但是要使用這個包編譯在小程序還需要執(zhí)行一遍構(gòu)建npm的過程
其中miriprogram_npm目錄下就是使用的包文件
小程序運(yùn)行在微信內(nèi)部，因?yàn)檫\(yùn)行環(huán)境的特殊性，這就導(dǎo)致 并不是所有的包都能夠在小程序使用 我們在小程序中提到的包指專為小程序定制的 npm 包，簡稱小程序 npm 包，在使用包之前需要先確定該包是否支持小程序，參考地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#發(fā)布-npm-包
自定義構(gòu)建npm
在實(shí)際的開發(fā)中，隨著項(xiàng)目的功能越來越多、項(xiàng)目越來越復(fù)雜，文件目錄也變的很繁瑣，為了方便進(jìn)行項(xiàng)目的開發(fā)，開發(fā)人員通常會對目錄結(jié)構(gòu)進(jìn)行調(diào)整優(yōu)化，例如:將小程序源碼放到miniprogram 目錄下
這時候需要開發(fā)者在 project.config,json 中 指定 node modules 的位置和 目標(biāo) miniprogram npm 的位置
1、創(chuàng)建一個miniprogram文件夾在根目錄下
2、把除了project.config.json、project.private.config.json、.eslintrc.js、package.json和package-lock.json五個文件，其他的都移入到miniprogram目錄下。 只剩下：
miniprogram目錄
assets目錄
pages目錄
app.js
app.json
app.wxss
sitemap.json
.eslintrc.js
project.config.json
project.private.config.json
package.json
package-lock.json
3、然后再project.config.json進(jìn)行配置指定小程序源碼目錄入口設(shè)置
//project.config.json
{
"miniprogramRoot":"miniproject/" //指定小程序源碼的目錄
}
4、這個時候構(gòu)建npm包時報(bào)錯的，然后可以先在project.config.json中配置，再重啟該項(xiàng)目就可以構(gòu)建npm包了
//project.config.json
"setting":{
"packNpmManually":true, //開啟自定義node_modules和miniprogram_npm位置的構(gòu)建npm方式
"packNpmRelationList":[
{
"packageJsonPath": "./package.json", //package.json位置（找依賴）
"miniprogramNpmDistDir": "./miniprogram" //構(gòu)建miriprogram_npm包文件放到指定位置
}
]
}
28、Vant組件庫使用
地址：https://vant-contrib.gitee.io/vant-weapp/#/home 下載：npm i @vant/weapp
注意：使用vant組件庫時候，需要到app.json文件中去除掉"style":"v2"樣式的版本配置因?yàn)榭赡軙?dǎo)致vant組件樣式混亂
注冊 常用組件可以在app.json里面去注冊組件再使用，不常用的可以在自己的json文件去注冊使用組件
//json
//下面是以圖片組件舉例
{
"usingComponents": {
"van-image": "@vant/weapp/image/index"
}
}
使用
標(biāo)簽屬性上還有其他的配置，請到官網(wǎng)查找使用
vant weapp 組件樣式覆蓋
第一種樣式覆蓋（直接覆蓋） 使用vant組件庫時候，如果是在自定義組件中去修改覆蓋vant組件默認(rèn)樣式，則需要解除樣式隔離
//js
Component({
options:{
styleIsolation:'shared' //解除樣式隔離 【現(xiàn)在版本不需要配置也可以了】
}
})
//wxss
.van-button--primary {
font-siez:40rpx !importment;
......
}
第二種樣式覆蓋（使用外部樣式類） 需要去官方文檔看它是否提供外部樣式類
//wxml
//wxss
.test{
font-siez:40rpx !importment;
......
}
第三種樣式覆蓋（使用樣式變量）
//app.wxss
page{
--color:#ff7800
}
//組件wxss
.van-button--primary {
border: 0 !important;
background-color: var(--color) !important;
}
29、小程序分包加載
分包加載順序： 在小程序啟動時，默認(rèn)會下載主包并啟動主包內(nèi)頁面，當(dāng)用戶進(jìn)入分包內(nèi)某個頁面時，微信客戶端會把對應(yīng)分包下載下來，下載完成后再進(jìn)行展示。
目前小程序分包大小有以下限制: 1.整個小程序所有分包大小不超過20MB 2.單個分包/主包大小不能超過2MB
分包配置
小程序如果需要進(jìn)行分包加載，需要在 app,json 中，通過 subPackages 或者 subpackages 定義分包結(jié)構(gòu)
每個分包結(jié)構(gòu)含三個常用字段: 1、root：分包的根目錄，該目錄下的所有文件都會被打包成一個獨(dú)立的包 2、name：分包的別名，用于在代碼中用該分包 3、pages：指定當(dāng)前分包中包含哪些頁面
打包原則: 1、tabBar頁面必須在主包內(nèi) 2、最外層的 pages字段，屬于主包的包含的頁面 3、按subpackages 配置路徑進(jìn)行打包，配置路徑外的目錄將被打包到主包中 4、分包之間不能相互嵌套，subpackage 的根目錄不能是另外一個 subpackage 內(nèi)的子目錄
引用原則: 1.主包不可以引用分包的資源，但分包可以使用主包的公共資源（先加載主包再加載分包） 2.分包與分包之間資源無法相互引用，分包異步化時不受此條限制
1、在源碼管理文件中miniprogram中創(chuàng)建一個分包模塊文件modules，然后里面是各個模塊的分包
miniprogram
-assets
-modules //創(chuàng)建這個文件夾
--goodModule //創(chuàng)建這個分包模塊
pages //這個是主包里的頁面（比如tabbar）
app.js
app.json
app.wxss
project.config.json
project.private.config.json
2、然后再app.json文件中創(chuàng)建分包配置 注意點(diǎn)：點(diǎn)擊保存就可以自動在goodModule文件夾中生成對應(yīng)頁面文件，然后需要重新項(xiàng)目
//app.json
{
"subPackages":[
{
"root":"modules/goodModule", //分包根目錄（不能以./和/開頭，只需要指定文件開始就行）
"name":"goodModule", //分包的名字、別名
"pages":[
"pages/list/list", //商品列表頁面
"pages/detail/detail" //商品詳情頁面
]
}
]
}
3、主包跳轉(zhuǎn)到分包頁面
獨(dú)立分包
獨(dú)立分包：是指能夠獨(dú)立于主包和其他分包運(yùn)行的包
從獨(dú)立分包中頁面進(jìn)入小程序時，不需要下載主包，當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁面時，主包才會被下載
開發(fā)者可以將功能相對獨(dú)立的頁面配置到獨(dú)立分包中，因?yàn)楠?dú)立分包不依賴主包就可以運(yùn)行，可以很大程度上提升分包頁面的啟動速度
給 subPackages 定義的分包結(jié)構(gòu)添加 independent 字段，即可聲明對應(yīng)分包為獨(dú)立分包。
注意事項(xiàng) 獨(dú)立分包中不能依賴主包和其他分包中的資源 主包中的app.wxss 對獨(dú)立分包無效2. App只能在主包內(nèi)定義，獨(dú)立分包中不能定義App，會造成無法預(yù)期的行為
//app.json
{
"subPackages":[
{
"root":"modules/marketModule",
"name":"marketModule",
"pages":[
"pages/market/market"
],
"independent":true //開啟獨(dú)立分包
}
]
}
分包預(yù)下載
分包預(yù)下載是指訪問小程序某個頁面時，預(yù)先下載其他分包中的代碼和資源，當(dāng)用戶需要訪問分包中的頁面時，已經(jīng)預(yù)先下載的代碼和資源，因此可以直接使用，從而提高用戶的使用體驗(yàn)
小程序的分包預(yù)下載需要在 app.json 中通過 preloadRule 字段設(shè)置預(yù)下載規(guī)則
preloadRule 是一個對象，對象的 key 表示訪問哪個路徑時進(jìn)行預(yù)加載，value 是進(jìn)入此頁面的預(yù)下載配置，具有兩個配置項(xiàng) 1、packages:進(jìn)入頁面后預(yù)下載分包的 root 或 name， APP 表示主包。 2、network:在指定網(wǎng)絡(luò)下預(yù)下載，可選值為: all(不限網(wǎng)絡(luò))、wifi(僅wifi下預(yù)下載)
//app.json
{
"preloadRule":{
//分包預(yù)下載
"pages/index/index":{ //進(jìn)入哪個頁面開始下載分包
"network":"all", //all | wifi
"packages":["modules/goodModule"] //分包根目錄或者分包別名
},
//獨(dú)立分包預(yù)下載
"modules/marketModule/pages/market/market":{
"network":"all",
"packages":["__APP__"]
}
}
}
30、開發(fā)能力
獲取微信頭像
想使用微信提供的頭像填寫能力，需要兩步 1.將 button 組件 open-type 的值設(shè)置為 chooseAvatar 2.通過 bindchooseavatar 事件回調(diào)獲取到頭像信息的臨時路徑
Page({
data:{
avatarUrl:""
},
chooseavatar(event) {
const {avatarUrl} = event.detail
//這個獲取的微信頭像是臨時路徑會有失效時間，需要把路徑上傳到公司服務(wù)器上面
this.setData({
avatarUrl
})
}
})
獲取用戶昵稱
想使用微信提供的昵稱填寫能力，需要三步： 1、通過 form 組件中包裹住 input 以及 form-type 為 submit 的 button 組件 2、需要將input 組件 type 的值設(shè)置為 nickname，當(dāng)用戶輸入框輸入時鍵盤上方會展示微信昵稱 3、給form綁定submit 事件，在事件處理函數(shù)中通過事件對象獲取用戶昵稱
Page({
onSubmit(event){
const {nickname} = event.detail.value //昵稱
}
})
轉(zhuǎn)發(fā)功能
轉(zhuǎn)發(fā)當(dāng)前頁面
//js
Page({
//第一種：通過點(diǎn)擊右上角分享點(diǎn)轉(zhuǎn)發(fā)
onShareAppMessage() {}
//第一種轉(zhuǎn)發(fā)，自定義添加功能
onShareAppMessage(obj) {
console.log(obj); //{form:"menu",target:undefined} 點(diǎn)擊右上角轉(zhuǎn)發(fā)target是undefined，如果是第二種點(diǎn)擊按鈕轉(zhuǎn)發(fā)則target是有值的
return {
title:"轉(zhuǎn)發(fā)頁面標(biāo)題", //自定義標(biāo)題
path:"/pages/list/list", //轉(zhuǎn)發(fā)頁面自定義路徑
imgeUrl:"../../assets/list.png" //轉(zhuǎn)發(fā)頁面的自定義圖片
}
}
})
分享到朋友圈
小程序頁面默認(rèn)不能被分享到朋友圈，開發(fā)者需主動設(shè)置“分享到朋友圈”才可以，實(shí)現(xiàn)分享到朋友圈需滿足兩個條件:
頁面必須設(shè)置允許“發(fā)送給朋友”，頁面js 文件聲明onShareAppMessage 事件監(jiān)聽函數(shù)頁面必須需設(shè)置允許“分享到朋友圈”，頁面s 文件聲明 onShareTimeline 事件監(jiān)聽函數(shù)
//js
Page({
onShareAppMessage(){}, //這個方法一定要有，不然分享不了給朋友圈
//第一種：通過點(diǎn)擊右上角分享點(diǎn)進(jìn)行分享朋友圈
onShareTimeline() {}
//第一種分享朋友圈（添加自定義功能）
onShareTimeline() {
return {
title:"幫我砍一刀~",
query:"id=1",
imageUrl:"../../assets/list.png"
}
}
})
手機(jī)號驗(yàn)證組件
快速驗(yàn)證手機(jī)號碼組件：不需要發(fā)送短信驗(yàn)證實(shí)時驗(yàn)證手機(jī)號碼組件：需要發(fā)送短信獲取驗(yàn)證碼進(jìn)行驗(yàn)證
//快速獲取手機(jī)驗(yàn)證
//實(shí)時驗(yàn)證手機(jī)
Page({
//快速驗(yàn)證手機(jī)號碼組件
getphonenumber(event) {
console.log(event)
},
//實(shí)時驗(yàn)證手機(jī)號碼組件
getrealtimephonenumber(event) {
console.log(event)
}
})
客服功能
然后就需要到微信公眾平臺去添加客服人員
31、自定義導(dǎo)航欄
在該頁面的json文件進(jìn)行配置navigationStyle為custom
//json
{
"navigationStyle":"custom"
}
32、上線發(fā)布
b站視頻
柚子快報(bào)邀請碼778899分享：小程序?qū)W習(xí)02-語法
相關(guān)文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Mybest優(yōu)選達(dá)人
