大家好菠发，我是IT修真院成都分院第07期學(xué)員，一枚正直善良的web程序員贺嫂。
1.背景介紹
微信小程序滓鸠，簡稱小程序，英文名mini program第喳，是一種不需要下載安裝即可使用的應(yīng)用糜俗，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用墩弯。 全面開放申請后吩跋，主體類型為企業(yè)寞射、政府渔工、媒體、其他組織或個人的開發(fā)者桥温，均可申請注冊小程序引矩。小程序、訂閱號侵浸、服務(wù)號旺韭、企業(yè)號是并行的體系。 2017年1月9日掏觉，張小龍在2017微信公開課Pro上發(fā)布的小程序正式上線区端。
2.知識剖析
2.1 小程序是什么？它有著什么樣的功能澳腹？
小程序是一種不需要下載安裝即可使用的應(yīng)用织盼，它實現(xiàn)了應(yīng)用“觸手可及”的夢想杨何，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念沥邻，用戶不用關(guān)心是否安裝太多應(yīng)用的問題危虱。應(yīng)用將無處不在，隨時可用唐全，但又無需安裝卸載埃跷。對于開發(fā)者而言，小程序開發(fā)門檻相對較低邮利，難度不及APP弥雹，能夠滿足簡單的基礎(chǔ)應(yīng)用，hishop小程序開發(fā)認為適合生活服務(wù)類線下商鋪以及非剛需低頻應(yīng)用的轉(zhuǎn)換延届。小程序能夠?qū)崿F(xiàn)消息通知缅糟、線下掃碼、公眾號關(guān)聯(lián)等七大功能祷愉。其中窗宦，通過公眾號關(guān)聯(lián)，用戶可以實現(xiàn)公眾號與小程序之間相互跳轉(zhuǎn)二鳄。
2.2 小程序的開發(fā)前準備：
①在微信公眾平臺官網(wǎng)首頁（mp.weixin.qq.com）點擊右上角的“立即注冊”按鈕赴涵；
②填寫郵箱和密碼:請?zhí)顚懳醋赃^公眾平臺、開放平臺订讼、企業(yè)號髓窜、未綁定個人號的郵箱。
③綁定微信進行登錄：微信需要綁定銀行卡欺殿。
④綁定開發(fā)者:進入“設(shè)置-開發(fā)設(shè)置”寄纵，獲取AppID信息,添加項目必須要有AppId;個人主體小程序最多可綁定5個開發(fā)者，10個體驗者;
⑤下載小程序開發(fā)工具開發(fā)
3.常見問題
3.1 基本目錄結(jié)構(gòu)
一個小程序主體部分由三個文件組成脖苏，必須放在項目的根目錄程拭，如下：
文件必填作用
app.js是小程序邏輯
app.json是小程序公共設(shè)置
app.wxss否小程序公共樣式表
一個小程序頁面由四個文件組成，分別是：
文件類型必填作用
js是頁面邏輯
wxml是頁面結(jié)構(gòu)
wxss否頁面樣式表
json否頁面配置
3.2 主體部分的配置
app.json 配置項解釋
屬性類型必填描述
pagesString Array是設(shè)置頁面路徑
windowObject否設(shè)置默認頁面的窗口表現(xiàn)
tabBarObject否設(shè)置底部 tab 的表現(xiàn)
networkTimeoutObject否設(shè)置網(wǎng)絡(luò)超時時間
debugBoolean否設(shè)置是否開啟 debug 模式
3.3 子頁面APP.JSON
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現(xiàn)進行配置棍潘。 頁面的配置比app.json全局配置簡單得多恃鞋，只是設(shè)置 app.json 中的 window 配置項的內(nèi)容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項亦歉。 頁面的.json只能設(shè)置 window 相關(guān)的配置項恤浪，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個鍵
4.解決方案
4.1 HTML標簽
視圖容器：view,scroll-view,swiper,movable-view
基本內(nèi)容：icon,text,progress
表單組件：button肴楷，checkbox水由，form，input赛蔫，label砂客，picker直秆，picker-view，radio鞭盟，slider圾结，switch，textarea
導(dǎo)航：navigator
媒體組件：audio齿诉，image筝野，video
地圖：map
畫布：canvas
客服繪畫：contact-button
4.2 WXSS樣式
基本和我們平常的一樣，有兩個拓展特性：尺寸單位粤剧，樣式導(dǎo)入
尺寸單位：rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)歇竟。規(guī)定屏幕寬為750rpx。如在 iPhone6 上抵恋，屏幕寬度為375px焕议，共有750個物理像素，則750rpx = 375px = 750物理像素弧关，1rpx = 0.5px = 1物理像素盅安。
樣式導(dǎo)入：使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑世囊，用;表示語句結(jié)束别瞭。
選擇器支持：class,id,element,:before,:after
全局樣式與局部樣式:定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面株憾。在 page 的 wxss 文件中定義的樣式為局部樣式蝙寨，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器嗤瞎。
4.3 事件
類型觸發(fā)條件
touchstart手指觸摸動作開始
touchmove手指觸摸后移動
touchcancel手指觸摸動作被打斷墙歪，如來電提醒，彈窗
touchend手指觸摸動作結(jié)束
tap手指觸摸后馬上離開
longtap手指觸摸后贝奇，超過350ms再離開
5.擴展思考
小程序能否使用windows對象的方法虹菲？
小程序中沒有原生js中的window對象，因此現(xiàn)暫時無法使用第三方框架以及使用window對象中的方法
6.參考文獻
參考一：簡明教程
7.更多討論
1 除了指定的路由頁可以進行頁面跳轉(zhuǎn)弃秆，還有其他頁面跳轉(zhuǎn)方法么届惋？
wx.navigateTo(OBJECT)方法:保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面菠赚，使用wx.navigateBack可以返回到原頁面。
2 從電腦上可否訪問到相應(yīng)小程序郑藏？
小程序相當(dāng)于一個app工具衡查，并不是一個網(wǎng)址，所以無法訪問必盖。
鳴謝：湯特
