大家好，我是IT修真院深圳分院第02期學(xué)員孫劍立绍绘，一枚正直善良的web程序員奶镶。
今天給大家分享一下，修真院官網(wǎng)JS任務(wù)11中如何開發(fā)小程序陪拘？
1.背景介紹
微信小程序厂镇，簡稱小程序，英文名mini program左刽，是一種不需要下載安裝即可使用的應(yīng)用捺信，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用欠痴。 全面開放申請后迄靠，主體類型為企業(yè)秒咨、政府、媒體掌挚、其他組織或個(gè)人的開發(fā)者雨席，均可申請注冊小程序。小程序吠式、訂閱號陡厘、服務(wù)號、企業(yè)號是并行的體系奇徒。 2017年1月9日雏亚，張小龍?jiān)?017微信公開課Pro上發(fā)布的小程序正式上線缨硝。
2.知識剖析
2.1 小程序是什么摩钙？它有著什么樣的功能？
小程序是一種不需要下載安裝即可使用的應(yīng)用查辩，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想胖笛，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念宜岛，用戶不用關(guān)心是否安裝太多應(yīng)用的問題长踊。應(yīng)用將無處不在，隨時(shí)可用萍倡，但又無需安裝卸載身弊。對于開發(fā)者而言，小程序開發(fā)門檻相對較低列敲，難度不及APP阱佛，能夠滿足簡單的基礎(chǔ)應(yīng)用，hishop小程序開發(fā)認(rèn)為適合生活服務(wù)類線下商鋪以及非剛需低頻應(yīng)用的轉(zhuǎn)換戴而。小程序能夠?qū)崿F(xiàn)消息通知凑术、線下掃碼、公眾號關(guān)聯(lián)等七大功能所意。其中淮逊，通過公眾號關(guān)聯(lián)，用戶可以實(shí)現(xiàn)公眾號與小程序之間相互跳轉(zhuǎn)扶踊。
2.2 小程序的開發(fā)前準(zhǔn)備：
①在微信公眾平臺官網(wǎng)首頁（mp.weixin.qq.com）點(diǎn)擊右上角的“立即注冊”按鈕泄鹏；
②填寫郵箱和密碼:請?zhí)顚懳醋赃^公眾平臺、開放平臺秧耗、企業(yè)號备籽、未綁定個(gè)人號的郵箱。
③綁定微信進(jìn)行登錄：微信需要綁定銀行卡绣版。
④綁定開發(fā)者:進(jìn)入“設(shè)置-開發(fā)設(shè)置”胶台，獲取AppID信息,添加項(xiàng)目必須要有AppId;個(gè)人主體小程序最多可綁定5個(gè)開發(fā)者歼疮，10個(gè)體驗(yàn)者;
⑤下載小程序開發(fā)工具開發(fā)
3.常見問題
3.1 基本目錄結(jié)構(gòu)
一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目的根目錄诈唬，如下：
文件 必填 作用
app.js 是 小程序邏輯
app.json 是 小程序公共設(shè)置
app.wxss 否 小程序公共樣式表
一個(gè)小程序頁面由四個(gè)文件組成韩脏，分別是：
文件類型 必填 作用
js 是 頁面邏輯
wxml 是 頁面結(jié)構(gòu)
wxss 否 頁面樣式表
json 否 頁面配置
3.2 主體部分的配置
app.json 配置項(xiàng)解釋
屬性 類型 必填 描述
pages String Array 是 設(shè)置頁面路徑
window Object 否 設(shè)置默認(rèn)頁面的窗口表現(xiàn)
tabBar Object 否 設(shè)置底部 tab 的表現(xiàn)
networkTimeout Object 否 設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間
debug Boolean 否 設(shè)置是否開啟 debug 模式
3.3 子頁面APP.JSON
每一個(gè)小程序頁面也可以使用.json文件來對本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡單得多铸磅，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容赡矢，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。 頁面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng)阅仔，以決定本頁面的窗口表現(xiàn)吹散，所以無需寫 window 這個(gè)鍵
4.解決方案
4.1 HTML標(biāo)簽
視圖容器：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樣式
基本和我們平常的一樣，有兩個(gè)拓展特性：尺寸單位薇宠，樣式導(dǎo)入
尺寸單位：rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)偷办。規(guī)定屏幕寬為750rpx。如在 iPhone6 上昼接，屏幕寬度為375px爽篷，共有750個(gè)物理像素，則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 中的樣式為全局樣式，作用于每一個(gè)頁面髓涯。在 page 的 wxss 文件中定義的樣式為局部樣式袒啼，只作用在對應(yīng)的頁面，并會(huì)覆蓋 app.wxss 中相同的選擇器。
4.3 事件
類型 觸發(fā)條件
touchstart 手指觸摸動(dòng)作開始
touchmove 手指觸摸后移動(dòng)
touchcancel 手指觸摸動(dòng)作被打斷蚓再，如來電提醒滑肉，彈窗
touchend 手指觸摸動(dòng)作結(jié)束
tap 手指觸摸后馬上離開
longtap 手指觸摸后，超過350ms再離開
5.編碼實(shí)戰(zhàn)
6.更多討論
小程序能否使用windows對象的方法摘仅？
小程序中沒有原生js中的window對象靶庙，因此現(xiàn)暫時(shí)無法使用第三方框架以及使用window對象中的方法
1 除了指定的路由頁可以進(jìn)行頁面跳轉(zhuǎn)，還有其他頁面跳轉(zhuǎn)方法么娃属？
wx.navigateTo(OBJECT)方法:保留當(dāng)前頁面六荒，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面矾端。
2 從電腦上可否訪問到相應(yīng)小程序掏击？
小程序相當(dāng)于一個(gè)app工具，并不是一個(gè)網(wǎng)址秩铆，所以無法訪問砚亭。
7.參考文獻(xiàn)
8.視頻資料
今天的分享就到這里啦，歡迎大家點(diǎn)贊豺旬、轉(zhuǎn)發(fā)钠惩、留言柒凉、拍磚~
請點(diǎn)擊鏈接【修真院】
來源：簡書
著作權(quán)歸作者所有族阅。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處膝捞。
