大家好，我是IT修真院北京分院web第29期學(xué)員吳昊杰，一枚正直純潔善良的web程序員遵堵。?
【js-11】如何開發(fā)小程序一睁？
分享人：吳昊杰
目錄
1.背景介紹
2.知識(shí)剖析
3.常見問題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
微信小程序，簡(jiǎn)稱小程序，英文名mini program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想路召，用戶掃一掃或搜一下即可打開應(yīng)用。
全面開放申請(qǐng)后波材，主體類型為企業(yè)股淡、政府、媒體廷区、其他組織或個(gè)人的開發(fā)者唯灵，均可申請(qǐng)注冊(cè)小程序。小程序隙轻、訂閱號(hào)早敬、服務(wù)號(hào)忌傻、企業(yè)號(hào)是并行的體系。
? ? ? ? ? ? ? ? ? ? 2017年1月9日搞监，張小龍?jiān)?017微信公開課Pro上發(fā)布的小程序正式上線水孩。
2.知識(shí)剖析
2.1 小程序是什么？它有著什么樣的功能琐驴？
先引用張小龍的一句話來看看啥是小程序俘种？
小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想绝淡，用戶掃一掃或者搜一下即可打開應(yīng)用宙刘。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題牢酵。應(yīng)用將無處不在悬包，隨時(shí)可用，但又無需安裝卸載馍乙。
2.2? 小程序的開發(fā)前準(zhǔn)備：
①在微信公眾平臺(tái)官網(wǎng)首頁（mp.weixin.qq.com）點(diǎn)擊右上角的“立即注冊(cè)”按鈕布近；
②填寫郵箱和密碼:請(qǐng)?zhí)顚懳醋?cè)過公眾平臺(tái)、開放平臺(tái)丝格、企業(yè)號(hào)撑瞧、未綁定個(gè)人號(hào)的郵箱。
③綁定微信進(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)目的根目錄酬诀，如下：
文件
必填
作用
是
小程序邏輯
是
小程序公共設(shè)置
否
小程序公共樣式表
一個(gè)小程序頁面由四個(gè)文件組成，分別是：
文件類型
必填
作用
是
頁面邏輯
是
頁面結(jié)構(gòu)
否
頁面樣式表
否
頁面配置
3.2 主體部分的配置
app.json 配置項(xiàng)解釋
屬性
類型
必填
描述
String Array
是
設(shè)置頁面路徑
Object
否
設(shè)置默認(rèn)頁面的窗口表現(xiàn)
Object
否
設(shè)置底部 tab 的表現(xiàn)
Object
否
設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間
Boolean
否
設(shè)置是否開啟 debug 模式
3.3 子頁面app.json
每一個(gè)小程序頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置骆撇。 頁面的配置比app.json全局配置簡(jiǎn)單得多瞒御，只是設(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物理像素。
選擇器支持：class,id,element,:before,:after
全局樣式與局部樣式:定義在 app.wxss 中的樣式為全局樣式乡括，作用于每一個(gè)頁面肃廓。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(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.擴(kuò)展思考
小程序能否使用windows對(duì)象的方法？
小程序中沒有原生js中的window對(duì)象呻澜，因此現(xiàn)暫時(shí)無法使用第三方框架以及使用window對(duì)象中的方法
7.參考文獻(xiàn)
參考一：微信簡(jiǎn)明教程
參考二：微信小程序原理
8.更多討論
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)址，所以無法訪問屏镊。
感謝觀看
BY :孫劍立|吳昊杰
課后提問部分:
提問:1.小程序是如何傳參的?
回答:https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html
其實(shí)官方文檔中寫的很好,可以參考...
小程序能否使用windows對(duì)象的方法依疼？
小程序中沒有原生js中的window對(duì)象，因此現(xiàn)暫時(shí)無法使用第三方框架以及使用window對(duì)象中的方法
提問:2.除了指定的路由頁可以進(jìn)行頁面跳轉(zhuǎn)而芥，還有其他頁面跳轉(zhuǎn)方法么律罢？
回答:wx.navigateTo(OBJECT)方法:保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面棍丐，使用wx.navigateBack可以返回到原頁面误辑。
提問:3. 從電腦上可否訪問到相應(yīng)小程序沧踏？
回答:小程序相當(dāng)于一個(gè)app工具，并不是一個(gè)網(wǎng)址巾钉，所以無法訪問翘狱。
git瀏覽地址:https://ptteng.github.io/WEB/ppt/如何開發(fā)小程序？.html#/
視頻地址:https://v.qq.com/x/page/m0608h3orec.html
