大家好，我是IT修真院深圳分院第02期學員孫劍立，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網JS任務11中如何開發小程序？
1.背景介紹
微信小程序，簡稱小程序，英文名mini program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。 全面開放申請后，主體類型為企業、政府、媒體、其他組織或個人的開發者，均可申請注冊小程序。小程序、訂閱號、服務號、企業號是并行的體系。 2017年1月9日，張小龍在2017微信公開課Pro上發布的小程序正式上線。
2.知識剖析
2.1 小程序是什么？它有著什么樣的功能？
小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。對于開發者而言，小程序開發門檻相對較低，難度不及APP，能夠滿足簡單的基礎應用，hishop小程序開發認為適合生活服務類線下商鋪以及非剛需低頻應用的轉換。小程序能夠實現消息通知、線下掃碼、公眾號關聯等七大功能。其中，通過公眾號關聯，用戶可以實現公眾號與小程序之間相互跳轉。
2.2 小程序的開發前準備：
①在微信公眾平臺官網首頁（mp.weixin.qq.com）點擊右上角的“立即注冊”按鈕；
②填寫郵箱和密碼:請填寫未注冊過公眾平臺、開放平臺、企業號、未綁定個人號的郵箱。
③綁定微信進行登錄：微信需要綁定銀行卡。
④綁定開發者:進入“設置-開發設置”，獲取AppID信息,添加項目必須要有AppId;個人主體小程序最多可綁定5個開發者，10個體驗者;
⑤下載小程序開發工具開發
3.常見問題
3.1 基本目錄結構
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
文件 必填 作用
app.js 是 小程序邏輯
app.json 是 小程序公共設置
app.wxss 否 小程序公共樣式表
一個小程序頁面由四個文件組成，分別是：
文件類型 必填 作用
js 是 頁面邏輯
wxml 是 頁面結構
wxss 否 頁面樣式表
json 否 頁面配置
3.2 主體部分的配置
app.json 配置項解釋
屬性 類型 必填 描述
pages String Array 是 設置頁面路徑
window Object 否 設置默認頁面的窗口表現
tabBar Object 否 設置底部 tab 的表現
networkTimeout Object 否 設置網絡超時時間
debug Boolean 否 設置是否開啟 debug 模式
3.3 子頁面APP.JSON
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。 頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵
4.解決方案
4.1 HTML標簽
視圖容器：view,scroll-view,swiper,movable-view
基本內容：icon,text,progress
表單組件：button，checkbox，form，input，label，picker，picker-view，radio，slider，switch，textarea
導航：navigator
媒體組件：audio，image，video
地圖：map
畫布：canvas
客服繪畫：contact-button
4.2 WXSS樣式
基本和我們平常的一樣，有兩個拓展特性：尺寸單位，樣式導入
尺寸單位：rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
樣式導入：使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
選擇器支持：class,id,element,:before,:after
全局樣式與局部樣式:定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。
4.3 事件
類型 觸發條件
touchstart 手指觸摸動作開始
touchmove 手指觸摸后移動
touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗
touchend 手指觸摸動作結束
tap 手指觸摸后馬上離開
longtap 手指觸摸后，超過350ms再離開
5.編碼實戰
6.更多討論
小程序能否使用windows對象的方法？
小程序中沒有原生js中的window對象，因此現暫時無法使用第三方框架以及使用window對象中的方法
1 除了指定的路由頁可以進行頁面跳轉，還有其他頁面跳轉方法么？
wx.navigateTo(OBJECT)方法:保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
2 從電腦上可否訪問到相應小程序？
小程序相當于一個app工具，并不是一個網址，所以無法訪問。
7.參考文獻
8.視頻資料
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
請點擊鏈接【修真院】
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
