一凑兰、前置知識(shí)
1掌桩、注冊(cè)帳號(hào)，獲取appid姑食。
2波岛、微信開(kāi)發(fā)者工具：調(diào)試小程序、公眾號(hào)
3音半、與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別：
（1）運(yùn)行環(huán)境：網(wǎng)頁(yè)開(kāi)發(fā)渲染與腳本在同一個(gè)線程上盆色，而小程序分為渲染層和邏輯層灰蛙。邏輯層運(yùn)行在jscore中，并沒(méi)有DOM和BOM隔躲。jscore環(huán)境與node也不同摩梧，所以也無(wú)法使用一些npm包。
（2）兼容性：
ios宣旱，安卓仅父，小程序開(kāi)發(fā)者工具3種環(huán)境，邏輯層與渲染層各不相同浑吟。
（3）整個(gè)小程序所有分包大小不超過(guò) 8M笙纤；單個(gè)分包不可超過(guò)2M
（4）開(kāi)發(fā)流程：開(kāi)發(fā)版本 ---> 體驗(yàn)版本 ---> 審核中版本 ---> 線上版本 ---> 發(fā)布
ps：若用戶未主動(dòng)刪除小程序，發(fā)布后最差24小時(shí)下發(fā)新版本（解決辦法：可通過(guò)啟動(dòng)時(shí)檢查更新）
二组力、小程序結(jié)構(gòu)及配置
1省容、項(xiàng)目結(jié)構(gòu)
--images
--pages
--index
--index.js
--index.json
--index.wxml
--index.wxss
--logs
--index.js
--index.json
--index.wxml
--index.wxss
--app.js
--app.json
--app.wxss
--project.config.json
2、配置文件
（1）project.config.json
開(kāi)發(fā)者工具自動(dòng)生成的一個(gè)配置文件燎字，和開(kāi)發(fā)者工具中【詳情】的配置一樣腥椒，一般不做更改。官方文檔
（2）app.json：全局配置文件候衍。官方文檔
舉個(gè)栗子
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "XX小程序",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#a5a5a5",
"selectedColor": "#f63232",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/course.png",
"selectedIconPath": "images/course_red.png",
"text": "首頁(yè)"
}, {
"pagePath": "pages/logs/logs",
"iconPath": "images/study.png",
"selectedIconPath": "images/study_red.png",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
],
"sitemapLocation": "sitemap.json"
}
（3）頁(yè)面配置：附上官方文檔
每個(gè)頁(yè)面都可以有.json文件笼蛛，頁(yè)面配置中只能設(shè)置 app.json 中 window 對(duì)應(yīng)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)蛉鹿，所以無(wú)需寫 window 這個(gè)屬性滨砍。頁(yè)面的window屬性會(huì)覆蓋全局window屬性。
{
"usingComponents": {
"ErrorPage": "./components/ErrorPage/index",
"PPTLive": "./components/PPTLive/index",
"Classroom": "./components/Classroom/index",
"Loading": "./components/Loading/index"
},
"disableScroll": true,
"pageOrientation": "landscape",
"navigationStyle": "custom"
}
三妖异、小程序開(kāi)發(fā)
1惋戏、宿主環(huán)境
- 通信：渲染層和邏輯層分別是2個(gè)線程管理。小程序的每個(gè)界面都是一個(gè)webview線程他膳。渲染層和邏輯層通過(guò)微信客戶端做中轉(zhuǎn)响逢。
- 數(shù)據(jù)驅(qū)動(dòng)：通過(guò)native
2、程序
// 程序構(gòu)造函數(shù)矩乐。app實(shí)例是單例對(duì)象龄句， js中可以通過(guò)getApp() 獲取該對(duì)象
App({
onLaunch: function(options) {}, // 小程序初始化完成時(shí)觸發(fā)回论，only once
onShow: function(options) {}, // 小程序啟動(dòng)散罕，或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)
onHide: function() {}, // 前臺(tái)進(jìn)入后臺(tái)觸發(fā)
onError: function(msg) {}, // 腳本錯(cuò)誤或api吊用失敗時(shí)觸發(fā)，帶上錯(cuò)誤信息
globalData: 'I am global data' // 全局data
})
- 因?yàn)樾〕绦蛴卸喾N渠道打開(kāi)傀蓉，所以onLaunch和onShow可以帶options參數(shù)欧漱，包含path，query葬燎，scene误甚，shareTicket等缚甩。
- globalData：切換webview時(shí)，還是公用一個(gè)jscore窑邦，因?yàn)锳pp是單例擅威，所以可以通過(guò)app實(shí)例獲取全局?jǐn)?shù)據(jù)。
3冈钦、頁(yè)面
- step1：創(chuàng)建js郊丛、json、wxml瞧筛、wxss4個(gè)文件
- step2：app.json中聲明頁(yè)面路徑
- step3：js文件中使用個(gè)頁(yè)面構(gòu)造器Page()
Page({
data: { text: "This is page data." },
onLoad: function(options) { }, // 頁(yè)面首次加載厉熟，only once，早于onShow和onReady较幌，options是
onShow: function() { }, // 頁(yè)面每次加載
onReady: function() { }, // 頁(yè)面初次渲染完成
onHide: function() { }, // 頁(yè)面隱藏
onUnload: function() { }, // 頁(yè)面卸載
onPullDownRefresh: function() { },
onReachBottom: function() { },
onShareAppMessage: function () { },
onPageScroll: function() { }
})
還可以添加任意的函數(shù)或數(shù)據(jù)揍瑟，在Page實(shí)例的其他函數(shù)中用 this 可以訪問(wèn)
step4：wxml文件中寫頁(yè)面結(jié)構(gòu)
1）標(biāo)簽略有不同：view、text乍炉、image绢片、button、block等等
2）數(shù)據(jù)綁定： {{}}
3）wx:if, wx:forstep5：wxss中寫樣式
1）單位：rpx（responsive pixel）恩急；以iphone6換算杉畜，1px=2rpx進(jìn)階tips：wxs (官方文檔)
1）WeiXin Script運(yùn)行環(huán)境與js隔離，ios中比js快2~20倍衷恭，android中差不多
2）運(yùn)行在視圖層此叠，適用于頻繁交互場(chǎng)景：如滑動(dòng)吸頂?shù)?/p>
4、組件：小程序提供了很多組件随珠，scroll-view灭袁，swiper，picker窗看，live-player茸歧，web-view等等
- 原生組件：層級(jí)第二高，其他組件的無(wú)法蓋過(guò)原生組件显沈。z-index無(wú)效软瞎。camera、canvas拉讯、input涤浇、live-player、live-pusher魔慷、map只锭、textarea、video院尔。
- 層級(jí)第一高：cover-image蜻展、cover-view
5喉誊、自定義組件：
Component({
behaviors: [], // 類似mixins
properties: { // 頁(yè)面?zhèn)髦? myProperty: { // 屬性名
type: String,
value: ''
},
myProperty2: String // 簡(jiǎn)化的定義方式
},
data: {}, // 私有數(shù)據(jù)，可用于模板渲染
lifetimes: {
// 生命周期函數(shù)纵顾，可以為函數(shù)伍茄，或一個(gè)在methods段中定義的方法名
attached: function () { }, // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
moved: function () { }, // 在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹(shù)另一個(gè)位置時(shí)執(zhí)行
detached: function () { }, // 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
},
// 生命周期函數(shù)，可以為函數(shù)施逾，或一個(gè)在methods段中定義的方法名
attached: function () { }, // 此處attached的聲明會(huì)被lifetimes字段中的聲明覆蓋
ready: function() { }, //在組件在視圖層布局完成后執(zhí)行
pageLifetimes: {
// 組件所在頁(yè)面的生命周期函數(shù)
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新屬性和數(shù)據(jù)的方法與更新頁(yè)面數(shù)據(jù)的方法類似
})
},
// 內(nèi)部方法建議以下劃線開(kāi)頭
_myPrivateMethod: function(){
// 這里將 data.A[0].B 設(shè)為 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
}
}
})
6幻林、api：宿主環(huán)境提供的一系列功能 附上官方文檔
- 基礎(chǔ)： 系統(tǒng)、調(diào)試等方面的api
- 路由：頁(yè)面間的跳轉(zhuǎn)
1）wx.switchTab
2）wx.reLaunch
3）wx.redirectTo
4）wx.navigateTo
4）wx.navigateBack - 界面：通用的toast音念、loading沪饺、導(dǎo)航欄、動(dòng)畫等
- 網(wǎng)絡(luò)：wx.request等
- 設(shè)備能力：藍(lán)牙闷愤、掃碼整葡、屏幕
7、事件
- 渲染層傳遞給邏輯層
- 常用：點(diǎn)擊讥脐、觸摸遭居、長(zhǎng)按等
<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
// page.js
Page({
tapName: function(event) {
console.log(event)
}
})
四、項(xiàng)目介紹（wepy框架）
- 風(fēng)格類似vue旬渠，上手快俱萍，開(kāi)發(fā)簡(jiǎn)單方便
- 支持第三方npm包
- 優(yōu)化：?jiǎn)挝募olyfill（es6）告丢、樣式編譯器
