本文主要和大家分享微信小程序速查知識，可以讓大家對微信小程序開發(fā)更加容易，希望本文能幫助到大家。
1. 配置
配置全解析
project.config.json ( 項目配置文件 )
{
// 文件描述
"description": "項目配置文件",
// 項目代碼配置
"setting": {
// 是否檢查 url 域名安全性和 TLS 版本
"urlCheck": false,
// 是否將項目的 es5 代碼轉(zhuǎn)成 es6
"es6": true,
// 是否自動補全 css 兼容前綴
"postcss": true,
// 是否壓縮代碼
"minified": true,
// 是否啟用新功能
"newFeature": true
},
// 編譯方式
"compileType": "miniprogram",
// 版本號
"libVersion": "1.7.2",
// appid
"appid": "touristappid",
// 項目名
"projectname": "haiyangbg",
// 項目配置
"condition": {
// 搜索關(guān)鍵字
"search": {
"current": -1,
"list": []
},
// 客服
"conversation": {
"current": -1,
"list": []
},
// 編譯方式
"miniprogram": {
"current": -1,
"list": []
}
}
}app.json ( 小程序配置 )
{
// 項目路由設(shè)置（第一項為首頁）
"pages":[
"pages/index/index",
"pages/logs/logs"
],
// 窗口設(shè)置
"window":{
// 頂部導(dǎo)航欄背景色，必須是十六進制顏色值，如"#000000"
"navigationBarBackgroundColor": "#9ef468",
// 頂部導(dǎo)航欄顯示文字
"navigationBarTitleText": "組件展示",
// 導(dǎo)航欄文字顏色，僅支持 black/white
"navigationBarTextStyle": "black",
// 下拉背景的文字樣式，僅支持 dark/light
"backgroundTextStyle":"light",
// 下拉背景色，必須是十六進制顏色值，如"#000000"
"backgroundColor": "#333",
// 是否開啟下拉刷新
"enablePullDownRefresh": true,
// 距離最底端觸多少距離時觸發(fā)觸底事件，單位px
"onReachBottomDistance": 40
},
//網(wǎng)絡(luò)請求過期時間，單位毫秒
"networkTimeout": {
// 普通ajax請求
"request": 20000,
// Socket請求
"connectSocket": 20000,
// 文件上傳
"uploadFile": 20000,
// 文件下載
"downloadFile": 20000
},
// tab導(dǎo)航欄
"tabBar": {
// 文字的顏色
"color": "#999",
// 選中時文字的顏色
"selectedColor": "#000",
// 背景色
"backgroundColor": "#fff",
// 上邊框的顏色，僅支持 black/white
"borderStyle": "black",
// tab導(dǎo)航欄顯示在底部還是頂部(頂部不顯示圖片)
"position": "bottom",
// 導(dǎo)航欄列表項
"list": [{
// 導(dǎo)航到的頁面路徑
"pagePath": "pages/index/index",
// tab按鈕上的文字
"text": "組件",
// 圖片路徑
"iconPath": "img/com-l.png",
// 選中后顯示的圖片
"selectedIconPath": "img/com-d.png"
},{
"pagePath": "pages/logs/logs",
"text": "API",
"iconPath": "img/api-l.png",
"selectedIconPath": "img/api-d.png"
}]
},
// 調(diào)試信息
"debug": true
}page.json （ 單頁面配置 ）
單頁面的json就是app.json的window字段，當加載到這個頁面時，此配置將覆蓋app.json
2. 生命周期
小程序 App 生命周期
onLaunch ------ 小程序初始化完成時，觸發(fā)(只會調(diào)用一次)
onShow ------ 1. 小程序啟動 2. 從后臺進入前臺顯示，觸發(fā)
onHide ------ 當小程序從前臺進入后臺，觸發(fā)
onError ------ 1. 發(fā)生腳本錯誤 2. api 調(diào)用失敗，觸發(fā)并帶上錯誤信息
單頁面 Page 生命周期
onLoad ------ 頁面加載時，觸發(fā)(只會調(diào)用一次)
onShow ------ 頁面顯示時，觸發(fā)
onReady ------ 初次渲染完成時，觸發(fā)(只會調(diào)用一次)
onHide ------ 頁面隱藏時，觸發(fā)
onUnload ------ 頁面卸載時，觸發(fā)
詳細的生命周期分類：
1.小程序啟動：
App.onLaunch - -> App.onShow - -> 注冊app.json pages里的頁面(按索引順序) - -> 將app路由設(shè)置為首頁路由 - -> 首頁page參數(shù)深拷貝 - -> 初始化首頁 data - -> Page.onLoad - -> Page.onShow - -> Page.onReady
2.切后臺（app 和 page 生命周期重合）：
小程序被切到后臺 - -> page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow
3.跳轉(zhuǎn)頁面：
old 表示前一個頁面， new 表示新頁面
navigateTo跳轉(zhuǎn) - -> 將路由設(shè)置為目標頁面路由 - ->old.onHide- -> 初始化頁面 data - ->new.onLoad- ->new.onShow- ->new.onReadyredirectTo重定向 - -> 設(shè)置路由 - ->old.onUnload- -> init data - ->new.onLoad- ->new.onShow- ->new.onReadynavigateBack頁面返回 - -> 設(shè)置路由 - ->old.onUnload- -> init data - ->new.onShowreLaunch重啟動 - -> 設(shè)置路由 - ->old.onUnload- -> init data - ->new.onLoad- ->new.onShow- ->new.onReadyswitchTabTab 切換（圖截自官方文檔）
3. 數(shù)據(jù)綁定和渲染
數(shù)據(jù)綁定： { { message } }
渲染
列表渲染：
- wx:for=" { { message } } " - wx:for-index="idx" （設(shè)置索引的變量名，默認 index ） - wx:for-item="itemName"（設(shè)置每一項的變量名，默認item ）渲染塊：<block> </block>
條件渲染：
- wx:if="boolean" - wx:elif="boolean" -wx:else="boolean" == (if - else if - if) - hidden="boolean"
4. 模板（template）
基本用法：
( 定義代碼片段，可以在不同的地方調(diào)用，使用 name 屬性，作為模板的名字,調(diào)用時使用 is 屬性 )
// 源碼（需要和調(diào)用的頁面在同一個wxml里）
<template name="template">
<view>
I am {{ name }}
</view>
</template>
// 調(diào)用
<template is="template" data="{{...message}}"/>
// js 數(shù)據(jù)
Page({
data: {
message: {
name: '海洋餅干'
}
}
})進階用法
當時很多的頁面都需要同一個模板時，就需要模板導(dǎo)入了
先在pages文件夾中新建一個template文件夾，文件夾中新建一個template.wxml文件
// template.wxml
<template name="template">
<view>
I am {{ name }}
</view>
</template>// page.wxml 調(diào)用
<import src ="../template/template.wxml"/>
<template is="template" data="{{...message}}"/>
// js 數(shù)據(jù)
Page({
data: {
message: {
name: '海洋餅干'
}
}
})5. 事件
事件列表
點擊 事件
點擊事件
tap長按事件（超過0.35秒）
longpress觸摸 事件
觸摸開始
touchstart觸摸后開始移動
touchmove觸摸后被打斷
touchcancel觸摸結(jié)束
touchend動畫 事件
過渡完成時觸發(fā)
transitionend動畫開始時觸發(fā)
animationstart一次迭代結(jié)束時觸發(fā)
animationiteration動畫完成時觸發(fā)
animationend
事件冒泡，事件捕獲
綁定事件 + 冒泡：
bind+ 事件名 , 如bindtap綁定事件 + 阻止冒泡：
catch+ 事件名 , 如catchtap
捕獲 + 冒泡：
capture-bind:+ 事件名 , 如capture-bind:tap捕獲 + 中斷事件 + 取消冒泡：
capture-catch:+ 事件名 , 如capture-catch:tap
事件對象
baseEvent（ 基礎(chǔ)事件，所有事件的父類 ）同 target
id（ String - 事件源的id ）tagName（ String - 當前組件的類型 ）dataset（ Object - 事件源組件上由data-開頭的自定義屬性集合 ）type（ String - 事件類型 ）timeStamp（ Integer - 事件生成時的時間戳 ）target（ Object - 觸發(fā)事件的組件的屬性 ）currentTarget（ Object - 當前組件的屬性 ）TouchEvent（ 觸摸事件 ）identifier（ Number - 觸摸點的標識符 ）pageX（ Number - 距文檔左上角 x 軸的距離 ）pageY（ Number 距文檔左上角 y 軸的距離 ）clientX（ Number 距頁面可顯示區(qū)域 x 軸的距離 ）clientY（ Number 距頁面可顯示區(qū)域 y 軸的距離 ）touches（ Array 停留在屏幕中的觸摸點的信息對象集合 ）changedTouches（ Array 變化的觸摸點信息對象集合 ）CustomEvent（ 自定義事件 ）detail（ Object - 自定義事件額外的信息 ）
6. wxs 模塊
wxs 文件就是 js 文件，引入 wxs 文件就是引入一個 js 模塊( 不能用es6 )，現(xiàn)有兩種引入方式
在
wxml里引用，使用<wxs>標簽
1.1.module必填，為當前模塊的模塊名
1.2.src選填，引用.wxs文件的相對路徑（僅當標簽為 單閉合標簽 或 標簽的內(nèi)容為空 時有效）
1.3. 例引入：<wxs src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif" module="index" /> 自己擼： <wxs module="index"> var foo = '海洋餅干' module.exports = { foo } </wxs>在
wxs里引用，使用require引用
2.1. 例var tools = require("./tools.wxs")
7. wxss 樣式
微信版的 css ，幾個不同的地方
添加 自適應(yīng)尺寸單位 ( rpx )
添加 導(dǎo)入外聯(lián)樣式 ( @import )
精減 css選擇器，只支持
類選擇器 .class
id選擇器 #id
標簽選擇器 element
兄弟選擇器 element1，element2
偽元素選擇器 只支持兩種 ::after ::before
8. 自定義組件
使用自定義組件
創(chuàng)建自定義組件（ 類似于page,但需要在 json 文件中將
component字段設(shè)為true）{ "component": true }創(chuàng)建組件構(gòu)造器 （ 構(gòu)造函數(shù)不是page(),而是Component() ）
Component({ // 組件的對外屬性（父組件傳的數(shù)據(jù)） properties: { msg: { type: String, value: 'msg', // 父組件值改變時觸發(fā)的回調(diào) observer: () => { console.log('i am change') } } }, data: { componentdata: {} }, })使用自定義組件（ 先要在頁面的
json文件中進行引用聲明 ）// 先引用聲明 "usingComponents": { // hybg 標簽名 "hybg": "../component/component" // 相對路徑 } // 直接使用，需要的話要綁定數(shù)據(jù) <hybg msg="{{ data }}"></hybg>
slot 模板
1. 單 solt
"
// component
<view>
<slot></slot>
</view>
// page ( hybg 是上面的組件標簽名)
<hybg>
<view> page 的 slot </view>
</hybg>
// 效果
<view>
<view> page 的 slot </view>
</view>
"
2. 多slot
"
// 先在 Component 的 js 中添加
options: {
// 啟用多slot
multipleSlots: true
},
// 多 slot 需要使用不同的 name 來區(qū)分
<view>
<slot name="first"></slot>
<slot name="last"></slot>
</view>
// page ( hybg 是上面的組件標簽名)
<hybg>
<view slot="first"> first -- slot </view>
<view slot="last"> last-- slot </view>
</hybg>
// 效果
<view>
<view slot="first"> first -- slot </view>
<view slot="last"> last-- slot </view>
</view>
"父子組件事件(子組件傳值)
// page
fatherEvent: function(e){
console.log(e.detail) // 組件傳遞的自定義信息
}
<hybg bindhybgEvent="fatherEvent"></hybg>
// component
tap: function(){
var myEventDetail = { a: 10} // detail對象，提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的配置選項
// bubbles 事件是否冒泡
// capturePhase 事件是否擁有捕獲階段
// composed 是否可以穿越父組件邊界
this.triggerEvent('hybgEvent', myEventDetail, myEventOption)
}
<view bindtap="tap">觸發(fā) hybgEvent 事件</view>相關(guān)推薦：
微信小程序入門到實戰(zhàn)實例分享（四）
微信小程序授權(quán)獲取用戶詳細信息實例
微信小程序request請求后臺接口php代碼實例
以上就是微信小程序速查知識的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！