1：小程序遵循{{}}語法
???<view>hello?{{name}}</view>
2：循環便利
??<view wx:for=”{{}}”>{{item}}</view>
自帶item
3:點擊事件
Bindtap=”事件名稱”
4：在js中對事件進行監聽這里和vue不太一樣例如
<view bindtap = “jia”>+</view>
data:{
Counter:0
}
Jia(){
this.setData({
counter:this.data.counter+1
})
}
5：全局配置
全局配置比較多，常用的有
屬性類型必填描述
pagesString[]是頁面路徑列表
windowObject否全局的默認窗口表現
tabBarObject否底部tab欄的表現
Pages:頁面路徑列表
用于指定小程序有哪些頁面組成，每一項都對應一個頁面路徑信息
小程序中所有的頁面都是必須在pages中注冊
Winsow:全局的默認窗口
用于指定窗口如何展示
"window":?{
用于修改導航背景顏色，必須是16禁止
"navigationBarBackgroundColor":?"#ff5777",
修改導航字體顏色，只有black和white兩個顏色選擇
"navigationBarTextStyle":?"black",
標題
"navigationBarTitleText":?"小程序",
在ios中下拉露出的背景顏色，android是煤油用的
"backgroundColor":?"#eeeeee",
下拉是小點的狀態，中有dark和；light兩種選擇
"backgroundTextStyle":?"light",
下拉刷新，默認是false
????"enablePullDownRefresh":?false
??}
tabBar:底部tabBar欄的展示
??"tabBar":?{
??選中是圖標的顏色
?"selectedColor":"#ff5777",
????//list至少兩個，最多5個.代表分頁
"list":?[{
跳轉的路徑
??????"pagePath":?"pages/home/home",
?????下面的字
?"text":?"首頁",
未選中是圖標的路徑默認路徑
??????"iconPath":?"asside/tabbar/home.png",
?????選中時圖標的路徑??
"selectedIconPath":?"asside/tabbar/home_active.png"
????},
???{
??????"pagePath":?"pages/news/news",
??????"text":?"分類",
??????"iconPath":?"asside/tabbar/cart.png",
??????"selectedIconPath":?"asside/tabbar/cart_active.png"
????}
??]
??}
6：單個頁面配置
單個頁面配置不需要window,直接寫
?????{
??"usingComponents":?{},
??"navigationBarBackgroundColor":?"#000000",
??"navigationBarTitleText":?"首頁",
??"navigationBarTextStyle":?"white",
??"backgroundColor":?"#ff5777",
??"enablePullDownRefresh":?true
}
7：獲取用戶信息-保存全局變量
獲取微信用戶的基本信息方式
?????1：wx.getUserInfo ???即將廢棄的接口
?????2：button組件 ????將open-type改成getUesrInfo,并且綁定bindgetuserinfo事件去獲取
?????3：使用open-data組件展示用戶信息
8：可以在App.js中定義一些數據，在這里的數據是全局數據，他本身會產生一個實例對象
?????globalDat:{
??????Name:’codeywhy‘
Age:18
}
在其他頁面使用時只需要調用這個實例對象就行
Const app = getApp()//getApp()獲取App()產生的實例對象
const?app?=?getApp();
console.log(app.globDat.name);
10：text組件
Text組件與span組件差不多
Text長用屬性
屬性類型默認值必填說明
selecttablebooleanfalse否文本是否可選
spacestring?否顯示連續空格
decodeboolleanfalse否是否解碼
注意：在小程序中屬性默認值是false如果加上該屬性，那么·就是設置了該屬性，值為true
selecttable屬性決定文本內容是否可以讓用戶選中
space屬性有三個取值
值說明
ensp中文字符空格一般大小
emsp中文字符空格大小
nbsp根據字體設置空格大小
decode是否解碼
11：Button組件用于創建按鈕。默認塊極元素
常見屬性
屬性類型默認值必填說明
sizestringdefault否按鈕大小
typestringdefault否按鈕樣式
plainbooleanfalse否按鈕是否鏤空，背景顏色透明
disabledbooleanfalse否是否禁用
loadingbooleanfalse否名稱前是否帶loading圖標
form-typestring?否用于<form>組件，點擊會分別觸發<form>組件的submit/reset事件
oprn-typestring?否微信開放能力
hover-classstringButton-hover否指定按鈕按下去的樣式類，當hover-class=”none”時沒有點擊效果
<button?size='mini'?type='primary'>type屬性</button>
<button?size='mini'?type='default'>type屬性</button>
<button?size='mini'?type='warn'>type屬性</button>
12：view組件
view組件的基本使用
??1：view ?容器相當于div(塊級元素，獨占一行，通常用作容器組件)
屬性類型默認值必填說明
hover-classstringnone否按下去的樣式類，當hover-class=’none’時沒有點擊效果
Hover-stop-propagationbooleanfalse否指定是否組織本節點的祖先節點出現點擊狀態
Hover-start-timenumber50否按住多久出現點擊態，單位毫秒
Hover-stay-timenumber400否手指送松開后點擊狀態保留時間，單位毫秒
13：image組件
1：
1：image組件可以寫成單表錢，也可以寫成雙標簽
????2：image組件默認有自己的大小：320*240
3：image組件是一個行內塊元素（inline-block）
2：常用屬性
屬性類型默認值必填說明最低版本
srcstring?否圖片資源地址1.0.0
modestringscaleToFill否圖片裁剪、縮放的模式1.0.0
webpbooleanfalse否默認不解析 webP 格式，只支持網絡資源2.9.0
lazy-loadbooleanfalse否圖片懶加載，在即將進入一定范圍（上下三屏）時才開始加載1.5.0
show-menu-by-longpressbooleanfalse否開啟長按圖片顯示識別小程序碼菜單2.7.0
binderroreventhandle?否當錯誤發生時觸發，event.detail = {errMsg}1.0.0
bindloadeventhandle?否當圖片載入完畢時觸發，event.detail = {height, width}1.0.0
src:本地地址/遠程地址
補充：本地相冊，或拍照
?1：定義一個按鈕，監控點擊事件
???<button?bindtap='chooseimg'>選擇圖片</button>
2：在data定義一個變量用來保存選擇圖片的地址，對該事件進行處理
???data:?{
imgpath:''
??},
??chooseimg(){
wx.chooseImage({
??count:?0,
success:(res)=>{//這里必須用建通函數，否則this指向不正確
this.setData({
??imgpath:res.tempFilePaths[0]//進行地址復制
})
}
})
??}
3：wxml中定義一個image組件，src屬性給予賦值{{}}語法
14:input組件
屬性類型默認值必填說明
Valuestring??輸入框初始內容
typestringtext否鍵盤類型
Passwordbooleanfalse否是否時密碼類型
placeholderstring?是 輸入框為空時占位付
Confirm-typestringdone否設置鍵盤右下角按鈕文字，僅在type=”text”時生效
事件
Bindinputeventhandle是鍵盤輸入時觸發，處理函數可以直接return一個字符串，替換輸入框內容
bindfocus?是聚焦時觸發
Bindblur??失去焦點時觸發
bindconfirm??點擊完成按鈕時觸發
Type的合法值
Text文本輸入鍵盤
number數字輸入鍵盤
idcard身份證輸入鍵盤
Digit帶小數點的數字鍵盤
Confirn-type的合法值
Send發送
search搜索
next下一個
go前往
done完成
15：wxss
???1:行內樣式
<view ?style=’cold:red;font-size:30px’>哈哈</view>
2：業內樣式
在本身文件的css中設置
3：全局樣式
在app.js中設置樣式
4：如果有相同的樣式
優先級：行內樣式>頁面樣式>全局樣式
16：Mustache語法
???1：與vu基本一樣
???2：可以三目運算付
<view>{{age >= 18?’成年人：未成年人’}}</view>
?3：時間
?Js中
??data:{
noteTime:new Date().toLocaleString()
}
onLoad(){
setInterval(()=>{
This.setData({
nowTime:new Data().toLocaleString()})
})
,1000}
17:block標簽的意義
??1:<block/>并不是一個組件，他僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性（v-for/v-if）
??2：使用block有兩個好處
?????1：將需要進行遍歷或者判斷的內容進行包裹
??????2：將便利和判斷的屬性放在block標簽中，不影響普通屬性閱讀，提高代碼質量
18：ittem,index起名字
<view?wx:for="{{moves}}"?wx:for-item='move'?wx:for-index='i'>{{move}}??{{i}}</view>
20:wxs語法
??1：wxs與js差不多，不支持es6
??2:需要<wxs>標簽,其次需要module屬性，值無所謂
??<wxs?module="info">
??var?message?='hello?word';
??var?name?=?'許';
??function?sum(num1,num2){
????return?num1?+?num2
??}
??//?<!--?commonjs導出?-->
module.exports?=?{//利用commonjs方法將定義內容導出
??message:message,
??name:name,
??sum:sum
}
3：使用
?1：利用mustache語法，并且利用上面的值
??<view>{{info.message}}</view>
<view>{{info.name}}</view>
<view>{{info.sum(10,20)}}</view>
21：事件通過bind/cath這個屬性綁定在組件上的 ?例如bindtap/cath/tab,在1.5之后為了閱讀性可以在bind和cath上加一個冒號
22：常見事件類型
??1：某些組件會有自己特性的事件類型，具體看文檔
例如：input有bindinput/bindblur.bindfocus
???????Scroll-view有bindscrolltowpper/bindscrolltolower
類型觸發條件
touchstar手指觸摸動作開始
touchmove手指出觸摸后移動
touchcancel手指觸摸動作被打斷，例如來電，彈窗
touchend手指觸摸動作結束
tap手指觸摸后馬上離開
longpress手指觸摸后，超過350ms再離開，如果指定了事件回調函數并處罰這個事件，tap事件將不會觸發
longtap手指觸摸后，超過350ms再離開（推薦使用longpress）
23:事件對象介紹
當某個事件觸發時，會產生一個事件對象，并且這個對象會被傳入到回調函數中
屬性類型說明
typeString事件類型
timeStampInteger頁面打開到觸發事件所經過的的毫秒數
targetObject觸發事件的組件的一些屬性集合
currentTargetObject當前組件的一些屬性集合
detailObject額外信息
touchesArray觸摸事件，當前停留在屏幕中的觸摸點信息的數組
changedTouchesArray觸摸事件，當前變化的觸摸點信息的數組
24：參數傳遞
利用data-來進行參數傳遞，例如data-index =“{{index}}”
data-:固定名稱，index:自己自定義的名子，{{index}}傳遞的值
接受：
在ji文件中，e.targe.dataset就是要傳遞過去的值
25:事件冒泡和事件捕獲
???bind:一層層傳遞
???cath:組織事件進一步傳遞 ??
事件捕獲是由外向內，事件冒泡是由內向外
事件捕獲：語法：capture-bind:tap =“a”:必須用capture-,如果用bind
就會有捕獲，或者冒泡，這里如果用cath就不會capture-cath:tap=”a”,這里必須用：tap
26:組件的樣式細節
結論1：組件內的class樣式，只對組件wxml內的節點生效，對引用組件的page頁面不生效
結論2：組件內不能·使用id選擇器，屬性選擇器，標簽選擇器
結論三：外部使用class樣式，只針對外部wxml的class生效，對組件內不生效
結論四：外部使用id選擇器，屬性選則器不會對組件內產生影響
結論5：外部使用·標簽選擇器，會對組件內產生影響
整體結論：
組件內的class樣式和組件外的class樣式默認會有一個隔離效果
為了防止樣式錯亂，官方不推薦使用id,屬性，標簽選擇器
如何讓class可以相互影響
在組件Components對象中，可以傳入一個options屬性，其中options屬性中有一個stylelsolation（隔離）屬性。
stylelsolation有三個取值
??1 isolated表示啟用樣式隔離在自定義組件內，使用class指定的樣式不會相互影響（默認取值）
??2：applyy-shared表示wxss樣式將影響到自定義組件，但自定義組件Wxss種指定的樣式不會影響頁面
??3： ?shard表示頁面wxss樣式將會影響到自定義組件，自定義組件wxss樣式也會影響頁面和其他設置
27:組件之間傳遞數據和樣式
傳遞數據：外部傳遞給內部
???1：首先在組件內部設置一個組件<view>{{title}}</view>//這里title就是要傳遞的數據
???????2：組件內部js文件中，利用?properties屬性，它里面是保存的的要傳遞的數據，然后對要傳遞的數據進行定義
?????Properties:{
?title:{
???type:String//數據類型，
???value:‘’//默認數據類型，
????observer:function（newval,oldval）{}//參數監聽，一個是新的數據，一個是老的數據
}
}
傳遞樣式：外部傳遞給內部樣式
???1：首先在內部組件內設置一個組件<view class = “titleclass”>{{title}}</view>//這里的titleclass就是要傳遞的樣式
???2：然后在組件內部js文件中，利用?externalClasses屬性，它需要的是一個數組externalClasses:[‘titleclass’],這里保存的的就是那個傳遞的樣式
???3:在外部文件中xml文件中titleclass = “red”,然后在外部css文件中對red進行設置
<view class = “titleclass”>{{title}}</view>
externalClasses:[‘titleclass’]
?
?
<my-canshuchuandi titleclass = “red”>
.red{
Color:’red’}
?
傳遞事件
組件內控制外部數據
???1：首先在組件內有一個事件，例如這里有一個button
???????<button bind:tap = “click”>+1</bitton>
??2:在js文件中，監聽這個點擊事件，注意在組件中事件寫在methonds中,利用this.triggerEvent(),發送出一個事件
??methods:?{
click(){
??this.triggerEvent('click',{},{})//click:發送的事件名，{}：傳遞的信息，{}：一些額外信息，這個一般為空
}
??}
3：在外部文件中，再接受這個發送過來的事件
???<my-event?bind:click="click"></my-event>//：click就是接受的那個事件
4：然后再外部js文件中進一步處理
Click(){
This.setData({
Count:this,data.count+1})}
25：組件化開發：獲取組件對象的方式（selectComponent）
1:首先定義一個組件
2：在夫組件中引用，并且給該組件定義一個類，或者id一般為id
3：父組件定義一個按鈕
4:點擊該按鈕獲取到該組件，具體如下
案例，夫組件修改子組件內容
子組件：{{counter}}
子組件js:
????????????Data:{counter:1}
???????????methods:?{
?????increntment(n){
???????this.setData({
?????????counter:this.data.counter+n
???????})
?????}
??}
?
父組件：“my-select”><my-select>//子組件引用
???????????<button bind:tag = “click”>修改子組件<button>
父組件js:
?????Click(){
Const myselect = this.selectComponent(“#myselect”)
第一種方法//一般不用
counter：myselect.setData({
Counter:myselect.data.counter + 20
第二種方法：點用函數
Myselect.increntment(20)
})
}
?
26:組件插槽
1：單插槽
子組件：我是單插槽
??????????<slot></slot>//定義一個單插槽
夫組件引用
???????????<my-slot><button>帶年紀</button></my-slot>//此時的button會代替《slot》
2：多插槽：
????1：多插槽有多個《slot》得為每個slot弄以個name屬性
《slot name =“slot1>》
????2：在子組件js文檔中 設置一個options屬性，里面?multipleSlots設置為true
???options:{
????multipleSlots:true
??}
???????3:父組件引用
?????????<my-slots>
<button?type="primary"?slot?=?"slot2">帶年紀</button>
<slider?value="50"?slot?=?"slot1"></slider>
<text?slot?=?"slot3">123456</text>
</my-slots>
27:子組件Component構造器
Component({
//1:讓使用者可以給組件傳入數據
????propertis:{
titles:{
type:String,
Value:’’
}
} ，
??????2：定義組件內部初始化數據
??????data:{
Counter:0
},
3:用于定義組件內部地函數
methonds:{
Foo(){}
}
?4:定義組件地配置選項
?Options:{
??multipleSlots:true,//多插槽
?stylelsolation ：isolated/ applyy-shared/ shard//設置樣式隔離方式
}，
5：外界給組件傳入額外地樣式
???externalClasses:[],
6:可以監聽properties/data的改變
???Observers:{
?????Counter:function(newval){//這里沒有oldval
}
},
7:組件監聽生命周期函數
??7.1監聽所在頁面的生命周期函數
??pagelifetimes:{
show(){}//監聽組件所在頁面顯示出來時，
hide(){}//監聽組件所在頁面隱藏起來，
resize(){}//監聽頁面所在尺寸改變
},
???7.2:監聽組件本身的生命周期
Lifetimes:{
created(){}//在組建被創建出來，
attached(){}//組件被添加到頁面，
ready(){}//組件被渲染
move(){}//組件被移動到另一個節點
detached(){}//組件被移除掉
})
28：網絡請求
???1:微信提供了專屬的Api接口用于網絡請求：wx:request(Object object)
屬性類型默認值必填說明
urlString?是開封這服務器接口地址
dataString/object/Array/Buffer?否請求參數
headerObject?否設置請求的header，header中不能設置Referer。content-type默認為application/json
methodstringGet否請求方式
dataTypestringjson否返回數據類型
responseTypestringtext否響應數據類型
successfunction?否接口電泳成功的回調函數
failfunction?否接口調用失敗回調函數
failcompletefunction?否接口調用結束回調函數（調用成功，失敗都會執行）
2:利用Promise進行網絡請求封裝
1：首先額外新建一個請求封裝的js文件例如這里network.js
???export default function request(options){
????return new Promise((resolve,reject)=>{
?????Wx.request({
??????????url:options.url,
method:options.method ||’get’,
data:options.data || {},
Success:function(res){
resolve(res)
},
fail:function(err){
Reject(err)}
})}) ?
}
2:需要使用是時候首先導入這個封裝的文件
???Import request from “../../.....”
Request({
Url:'http://152.136.185.210:7878/api/m5/recommend'
}).then(res=>{logres}).cath(err=>logerr)
29:小程序中的分享
1： 分享總共有兩種分享方式
???1：點擊右上的菜單按鈕，之后點擊轉發
???2：點擊某一個按鈕，直接轉發
2：當我們轉發某一個小程序時，通常小程序會顯示一些信息
通過onShareAppMessage
字段說明默認值?
title轉發標題當前小程序名稱?
path轉發路徑當前頁面path,必須以/開頭?
imageUrl自定義圖片路徑使用默認截圖1?
??onShareAppMessage:?function?(options)?{
???????return{
?????????title:'小許',
?????????path:'/pages/home/home.wxml',
?????????imageUrl:'https://img2.baidu.com/it/u=3593822977,2222569124&fm=26&fmt=auto&gp=0.jpg'
???????}
??},
<button?size="mini"?type="primary"?open-type="share">點擊分享</button>
30:小程序中跳轉
頁面跳轉有兩種方式：通過navigator組件和通過wx的api
navigator組件主要用于頁面跳轉
屬性類型默認值必填說明
targetstringself否在那個目標上發生跳轉，默認是當前小程序
urlstring?否當前小程序內的跳轉lianjie
Oprn-typestringnavigate否跳轉方式
deltanumber1否當open-type為‘navigateBack’時有效，表示回退的層數
1：注意，這里的url以“/”開頭，并且不跟后綴名.wxml
open-type 的合法值
值說明最低版本
navigate對應?wx.navigateTo或wx.navigateToMiniProgram的功能?
redirect對應?wx.redirectTo的功能?
switchTab對應?wx.switchTab的功能?
reLaunch對應?wx.reLaunch的功能1.1.0
navigateBack對應?wx.navigateBack的功能1.1.0
exit退出小程序，target="miniProgram"時生效?
2:注意：redirect:關閉當前頁面，跳轉到應用內的的某個頁面，但不允許跳轉到tabbar頁面，并且不能返回
????????switchTab:跳轉到tabbar頁面，并且關閉其他所喲有非tabbar頁面
????????Relaunch:關閉所有的頁面，打開應用中某個頁面可以跳轉到tabbar
