2016年11月初，微信公眾平臺發(fā)布公告，宣布微信小程序正式開(kāi)放公測。允許開(kāi)發(fā)者將產(chǎn)品提交至微信公眾平臺審核，但是暫時(shí)不支持發(fā)布。
作者本人是從事iOS 開(kāi)發(fā)的，但從小程序出來(lái)到開(kāi)放公測，一直都想去研究研究，奈何各種因素沒(méi)有去試（上班有公司項目，下班就去夜跑，哈哈，反正就是借口）到 2016.12.11日，公司也有意做小程序開(kāi)發(fā)，終于定下心來(lái)研究一番，在此分享一下。
學(xué)習首先肯定去看 官方文檔 ，當然只看不行，起碼敲一個(gè)Demo出來(lái)嘛，看著(zhù)文檔還比較詳細，結構層級還是很清晰的，而且官方也有一個(gè)Demo做部分功能演示,掃碼就行，既然功能不是很完善，那就自己寫(xiě)一個(gè) 完整的小程序版 的 小程序官方文檔吧！也算是個(gè)人項目！當然，代碼都是自己寫(xiě)的，沒(méi)任何抄襲官方的Demo。
本來(lái)打算把功能完善了再開(kāi)文章分享，但考慮到功能點(diǎn)比較多，遇到的坑肯定很多，而且作者也是新手，短時(shí)間內是不可能完成，所以先分享文章，方便記錄 **開(kāi)發(fā)小程序中遇到的各種問(wèn)題 **，功能也能持續更新，經(jīng)歷兩天時(shí)間，目前已經(jīng)完成文檔的目錄搭建，看圖：
1、本文會(huì )簡(jiǎn)單介紹一下小程序，有個(gè)大概了解，什么是小程序
2、可以大概知道小程序開(kāi)發(fā)需要準備什么東西，并簡(jiǎn)單說(shuō)明開(kāi)發(fā)的流程
3、可以先知道小程序開(kāi)發(fā)過(guò)程中有什么哪些要注意的問(wèn)題（我在前面踩坑呢）
4、有個(gè)持續更新的Demo，并有對應的注釋?zhuān)床欢a，還看不懂文字么
1、什么是小程序
其實(shí)小程序就是類(lèi)似之前的服務(wù)號，公眾號的存在，看下圖，引用Allen Zhang 的話(huà)：“小程序是一種不需要下載安裝即可使用的應用，它實(shí)現了應用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或者搜一下即可打開(kāi)應用。也體現了“用完即走”的理念，用戶(hù)不用關(guān)心是否安裝太多應用的問(wèn)題。應用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載?！?/p>
2、小程序的影響
現在流量越來(lái)越來(lái)，手機網(wǎng)絡(luò )也是越來(lái)越好，網(wǎng)頁(yè)端現在確實(shí)越來(lái)越火了，原生移動(dòng)端的小伙伴都開(kāi)始不淡定了，我也是一直從事iOS 開(kāi)發(fā)，說(shuō)實(shí)話(huà)，我一點(diǎn)都不擔心，沒(méi)有為什么的，出來(lái)就學(xué)嘛！編程的東西，原理思路都一樣，只不過(guò)實(shí)現代碼換了而已，到現在為止，小程序的開(kāi)發(fā)工具一個(gè)大版本都沒(méi)有（最新版本是0.11.112301），發(fā)展還需要一段時(shí)間，這段時(shí)間夠你去學(xué)的啦
3、小程序究竟是用什么語(yǔ)言
個(gè)人認為是修改版的HTML、CSS、JS，因為它跟前端的很像，只是變了些東西，例如沒(méi)有HTML 的
div容器，現在可以用view、scroll-view，等下再分析；如果你是接觸過(guò)前端開(kāi)發(fā)一段時(shí)間，那你上手估計只需要幾個(gè)小時(shí)，或者更短，如果你是做其他開(kāi)發(fā)，沒(méi)接觸過(guò)前端開(kāi)發(fā)，那你就需要去熟悉一下HTML、CSS、JS 的語(yǔ)法了，推薦幾個(gè)網(wǎng)站：(不分先后)
菜鳥(niǎo)教程 ，作者也是在這學(xué)習的喔
W3school ,這個(gè)類(lèi)似菜鳥(niǎo)教程，挺全面的
1納米學(xué)習 ， 這個(gè)網(wǎng)站比較全面，總有你需要的
簡(jiǎn)書(shū) ，程序員很多都在簡(jiǎn)書(shū)開(kāi)源，我也是其中之一
Github ， 這個(gè)不解釋
sololearn，這個(gè)是純英文的，不過(guò)挺好的，一步一步學(xué)習
1、熟悉HTML、CSS、JS 的語(yǔ)法（這點(diǎn)最重要）
2、下載專(zhuān)門(mén)的 小程序開(kāi)發(fā)工具 ，然后安裝
3、開(kāi)發(fā)工具的使用
進(jìn)入開(kāi)發(fā)界面
添加新項目，填寫(xiě)基本信息就進(jìn)入開(kāi)發(fā)界面了，如果是點(diǎn)擊歷史項目，直接進(jìn)入開(kāi)發(fā)界面，當然如果無(wú) AppID 部分功能受限，例如跳轉效果就會(huì )很難受（這里就不作演示）
點(diǎn)擊打開(kāi)，需要掃二維碼，界面就是這樣
1、js 文件是 數據獲?。ㄆ渲蠵age必須是首字段，不能修改，數據都放data里面，自定義事件同級）
//獲取應用實(shí)例var app = getApp()Page({ // 數據，在 WXML 中 通過(guò) {{motto}} 就可以拿到對應 data 中的 motto 字段的值 data: { motto: MiHome_Store, userInfo: {}, indicatorDots: true, autoplay: true, interval: 3000, duration: 100 }, //事件處理函數，可以通過(guò) bindViewTap: function () { wx.navigateTo({ url: ../logs/logs }) }})2、wxml 文件是 數據界面展示 ，跟HTML 一樣，只是標簽不一樣了，可參考官方文檔
3、wxss 文件是 界面樣式修改，更CSS 差不多，貌似暫時(shí)不能完美兼容CSS3
4、json 文件是 基本配置（導航欄、tabBar創(chuàng )建什么的）（如果是在app.json 中寫(xiě)的就是全局配置；如果在對應頁(yè)面中寫(xiě)就指定頁(yè)面的配置（比如設置子頁(yè)面的導航欄navigationBarTitleText），但是pages只能寫(xiě)在app.json 中）注意：app.json 中的pages 中一定要配置路徑，對應你項目的文件真實(shí)路徑
不設置全局窗口window{ pages:[ pages/index/index, pages/logs/logs ]}設置全局窗口window，在app.json 中設置{ pages:[ pages/index/index, pages/logs/logs ], window: { navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black, navigationBarTitleText: 小程序, backgroundColor: #eeeeee, backgroundTextStyle: light, enablePullDownRefresh: false }}單獨頁(yè)面中設置窗口配置信息，不需要添加window標簽{ backgroundTextStyle:light, navigationBarBackgroundColor: #fff, navigationBarTitleText: gitkong, navigationBarTextStyle:black}1、首先定好要顯示什么東西出來(lái)，當然要目錄名字 和 箭頭（有跳轉標志），所以在對應 WXML中可以先創(chuàng )建一條帶有名字 和 圖片的 view，其中 container 是 整個(gè)底部的view，承接目錄的
目錄結構
> 保存編譯（command + s），然后就能顯示出來(lái)了- 2、接下來(lái)就要去布局樣式了，在對應 `WXSS` 文件中 編寫(xiě) CSS 代碼
/指定子類(lèi)布局，通過(guò)空格/
.container .frame-item{
background-color: lightcyan;
/內邊距/
/padding-left: 20px;/
width: 100%;
height: 44px;
/保持一致，不管子控件/
flex: 1;
/有四個(gè)值，上右下左/
margin: 10rpx;
/素內彈性盒元素的方向,row|row-reverse|column|column-reverse|initial|inherit;//row 是水平向右，默認的/
display: flex;
/flex-direction: row;/
/垂直對齊居中/
align-items: center;
/justify-content屬性定義了項目在主軸上的對齊方式 flex-start | flex-end | center | space-between | space-around;/
justify-content: space-between;
}
/不用選擇器，就是全部text 都設置/
text{
/左對齊/
text-align: left;
/內邊距/
padding-left: 20px;
font-size: 16px;
}
image{
width: 20px;
height: 20px;
/外邊距/
margin-right: 20px;
}
> 保存編譯（command + s），然后你發(fā)現正常顯示了（新項目默認app.wxss 中有布局，將 `padding: 200rpx 0;` 注釋掉 就能顯示如下效果）- 3、事件處理，可以通過(guò) `bindtap=對應 js 里面的方法名` 給 view 綁定一個(gè) 事件 > WXML 中 綁定了 事件
目錄結構
>對應 js 文件中的方法，方法里面實(shí)現了跳轉，通過(guò) `wx.navigateTo` 跳轉，url 傳入的是 絕對路徑
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: ../logs/logs
})
}
- 4、多條數據顯示，當然只需要去拷貝、粘貼，只需要去改顯示的內容，css 和 事件 都不需要去管，只要 class 是一樣，樣式就一樣 - 5、點(diǎn)擊顯示隱藏，這個(gè)可以在WXSS 通過(guò) `display` 屬性或者在 WXML 通過(guò) hidden屬性 來(lái)控制器，作者使用的是display 方式實(shí)現的 > WXML 中添加 判斷，通過(guò)在js 中獲取是否顯示，來(lái)決定是否需要布局顯示樣式>WXSS 中實(shí)現兩種樣式，顯示和隱藏
.frame-detail-view {
/不顯示/
display: none;
}
.frame-detail-view-show{
/顯示/
width: 100%;
/垂直布局/
display: flex;
flex-direction: column;
}
- 6、優(yōu)化- （1）小程序中，數據獲取是通過(guò) `{{data中的對應字段名}}` ，那么WXML 中的數據顯示可以在js文件中獲取，實(shí)現動(dòng)態(tài)修改，特別是列表數據，只需要通過(guò) `wx:for-items` 遍歷，有多少條數據就顯示多少個(gè)view，這點(diǎn)類(lèi)似iOS 的 tableViewCell 和 model ，數據可以是多種多樣，顯示不同的數據就用不同的model，有多少個(gè)model 就有多少個(gè)cell 。- （2）綁定事件跳轉，可以在js 對應方法中用 `wx.navigateTo` 實(shí)現，可以通過(guò) data 或者 id 傳url進(jìn)去，但這樣就變得麻煩了，跳轉還可以利用 `navigator` 標簽，然后 設置 url 屬性就可以- （3）層級結構比較多，具體點(diǎn)擊哪個(gè)view 是需要 告訴 js ，js 才能去處理，一開(kāi)始不知道data 可以傳入多個(gè)值，只通過(guò)id 傳入當前點(diǎn)擊的目錄名字，然后js 方法里面遍歷尋找，從最底層開(kāi)始往上遍歷，雖然能實(shí)現，但效果很不好，會(huì )卡；后來(lái)直接通過(guò)data 傳入當前點(diǎn)擊的各個(gè)層級對應的index 下標（`wx:for-items` 默認下標是 index 對應元素是 item ，可以通過(guò) `wx:for-index` 和 `wx:for-item` 修改），然后就類(lèi)似iOS 的代理方法，在方法內獲取對應的層級index，然后通過(guò) `this.setData(data)` 修改data （**注意：頁(yè)面數據更新都需要使用 `this.setData(修改的data)` **）- （4）看[官方文檔](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html?t=20161122)可以知道，WXML 和 WXSS 都可以通過(guò)import 或者 include 導入引用，簡(jiǎn)單來(lái)說(shuō)就是模板嘛（這點(diǎn)類(lèi)似iOS 的封裝），通過(guò)上面三個(gè)步驟優(yōu)化之后，就有 WXSS 和 WXML 模板了，在指定頁(yè)面通過(guò) `@import ../index/index.wxss;`引入index.wxss 模板 和 `@import ../index/index.wxss;` 引入index.wxml 模板，此時(shí)只需要去修改指定頁(yè)面 js 文件的data 數據就可以了#七、手機預覽- 需要 **[注冊 AppID](https://mp.weixin.qq.com/cgi-bin/wx)** 才可以，而 注冊 是需要 是企業(yè) 或者 政府 或 媒體 或 其他組織，沒(méi)有個(gè)人的，因此個(gè)人項目是沒(méi)辦法手機上預覽（類(lèi)似真機調試）,如果你想試試真機效果，官方的Demo就可以#八、總結- 1、雖然入門(mén)才幾天，但是遇到的問(wèn)題還是挺多的，為了避免本文章篇幅太長(cháng)，影響閱讀，我在 **[小程序開(kāi)發(fā)中的記錄【持續更新】](http://www.jianshu.com/p/1052b4f7eb5b) ** 都會(huì )記錄下來(lái)，歡迎 關(guān)注 & like- 1、作者一直使用Objective-c 編程，工作需要嘛，當然 swift 和 前端也有去學(xué)去寫(xiě)，原理相通，只不過(guò)是換種寫(xiě)法，這個(gè)作為個(gè)人項目，會(huì )一直更新，直到功能完善，Demo的最新更新會(huì )在文章開(kāi)頭- 2、寫(xiě)的Demo 雖然挺簡(jiǎn)單的，思路應該也說(shuō)清楚了，分享出來(lái)也應該能帶大家入門(mén)，**[Github 地址](https://github.com/gitkong/SmallProgram)** 如果大家還有什么不明白的或者上文有什么不正確的地方，歡迎評論指教，謝謝- 3、歡迎大家關(guān)注我，喜歡給個(gè)like 和 star ，更新也需要動(dòng)力喔~聯(lián)系客服
