更新：2016.12.21 完成 “框架” 所有詳情頁面搭建并封裝了各種模板 Github 歡迎star
一、前言
2016年11月初勺疼，微信公眾平臺發(fā)布公告戚宦，宣布微信小程序正式開放公測钢猛。允許開發(fā)者將產(chǎn)品提交至微信公眾平臺審核察郁，但是暫時不支持發(fā)布衍慎。
作者本人是從事iOS 開發(fā)的，但從小程序出來到開放公測皮钠，一直都想去研究研究稳捆，奈何各種"因素"沒有去試（上班有公司項目，下班就去夜跑麦轰，哈哈乔夯，反正就是借口）到 2016.12.11日，公司也有意做小程序開發(fā)款侵，終于定下心來研究一番末荐，在此分享一下。
學習首先肯定去看 官方文檔 新锈，當然只看不行鞠评，起碼敲一個Demo出來嘛，看著文檔還比較詳細壕鹉，結構層級還是很清晰的剃幌，而且官方也有一個Demo做部分功能演示,掃碼就行，既然功能不是很完善晾浴，那就自己寫一個 完整的小程序版 的 小程序官方文檔吧负乡！也算是個人項目！當然脊凰，代碼都是自己寫的抖棘，沒任何抄襲官方的Demo。
本來打算把功能完善了再開文章分享狸涌，但考慮到功能點比較多切省，遇到的坑肯定很多，而且作者也是新手帕胆，短時間內(nèi)是不可能完成朝捆，所以先分享文章，方便記錄 **開發(fā)小程序中遇到的各種問題 **懒豹，功能也能持續(xù)更新芙盘，經(jīng)歷兩天時間，目前已經(jīng)完成文檔的目錄搭建脸秽，看圖：
二、通過本文你能了解什么
1记餐、本文會簡單介紹一下小程序驮樊，有個大概了解，什么是小程序
2、可以大概知道小程序開發(fā)需要準備什么東西囚衔，并簡單說明開發(fā)的流程
3铝穷、可以先知道小程序開發(fā)過程中有什么哪些要注意的問題（我在前面踩坑呢）
4、有個持續(xù)更新的Demo佳魔，并有對應的注釋曙聂，看不懂代碼，還看不懂文字么
三鞠鲜、小程序
- 1宁脊、什么是小程序
其實小程序就是類似之前的服務號，公眾號的存在贤姆，看下圖榆苞，引用Allen Zhang 的話：“小程序是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想霞捡，用戶掃一掃或者搜一下即可打開應用坐漏。也體現(xiàn)了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題碧信。應用將無處不在赊琳，隨時可用，但又無需安裝卸載砰碴□锓ぃ”
- 2呈枉、小程序的影響
現(xiàn)在流量越來越來趁尼，手機網(wǎng)絡也是越來越好，網(wǎng)頁端現(xiàn)在確實越來越火了猖辫，原生移動端的小伙伴都開始不淡定了酥泞，我也是一直從事iOS 開發(fā)，說實話啃憎，我一點都不擔心芝囤，沒有為什么的，出來就學嘛荧飞！編程的東西凡人，原理思路都一樣名党，只不過實現(xiàn)代碼換了而已叹阔，到現(xiàn)在為止，小程序的開發(fā)工具一個大版本都沒有（最新版本是0.11.112301）传睹，發(fā)展還需要一段時間耳幢，這段時間夠你去學的啦
- 3、小程序究竟是用什么語言
個人認為是修改版的HTML、CSS睛藻、JS启上，因為它跟前端的很像，只是變了些東西店印，例如沒有HTML 的
div容器冈在，現(xiàn)在可以用view、scroll-view按摘，等下再分析包券；如果你是接觸過前端開發(fā)一段時間，那你上手估計只需要幾個小時炫贤，或者更短溅固，如果你是做其他開發(fā)，沒接觸過前端開發(fā)兰珍，那你就需要去熟悉一下HTML侍郭、CSS、JS 的語法了掠河，推薦幾個網(wǎng)站：(不分先后)
四、開發(fā)前的準備
1找默、熟悉HTML艇劫、CSS、JS 的語法（這點最重要）
2惩激、下載專門的 小程序開發(fā)工具 店煞，然后安裝
-
3、開發(fā)工具的使用
- 點擊打開风钻，需要掃二維碼顷蟀，界面就是這樣
創(chuàng)建項目界面- 添加新項目，填寫基本信息就進入開發(fā)界面了骡技，如果是點擊歷史項目鸣个，直接進入開發(fā)界面羞反，當然如果無 AppID 部分功能受限，例如跳轉效果就會很難受（這里就不作演示）
添加新項目- 進入開發(fā)界面
開發(fā)界面-編輯開發(fā)界面-調(diào)試
五囤萤、小程序的文件格式 文檔
- 1昼窗、js 文件是 數(shù)據(jù)獲取（其中Page必須是首字段涛舍，不能修改澄惊，數(shù)據(jù)都放data里面，自定義事件同級）
//獲取應用實例
var app = getApp()
Page({
// 數(shù)據(jù)富雅，在 WXML 中 通過 {{motto}} 就可以拿到對應 data 中的 motto 字段的值
data: {
motto: 'MiHome_Store',
userInfo: {},
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 100
},
//事件處理函數(shù)缤削，可以通過
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
}
})
-
2、wxml 文件是 數(shù)據(jù)界面展示 吹榴，跟HTML 一樣亭敢，只是標簽不一樣了，可參考官方文檔
WXML文件
-
3图筹、wxss 文件是 界面樣式修改帅刀，更CSS 差不多，貌似暫時不能完美兼容CSS3
WXSS 文件 4远剩、json 文件是 基本配置（導航欄扣溺、tabBar創(chuàng)建什么的）（如果是在app.json 中寫的就是全局配置；如果在對應頁面中寫就指定頁面的配置（比如設置子頁面的導航欄
navigationBarTitleText）瓜晤，但是pages只能寫在app.json 中）注意：app.json 中的pages 中一定要配置路徑锥余，對應你項目的文件真實路徑
不設置全局窗口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
}
}
單獨頁面中設置窗口配置信息痢掠，不需要添加window標簽
{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "gitkong",
"navigationBarTextStyle":"black"
}
六驱犹、我是怎么寫出來的（代碼比較多，只給出做法思路足画，詳細看Demo）
-
1雄驹、首先定好要顯示什么東西出來，當然要目錄名字 和 箭頭（有跳轉標志）淹辞，所以在對應
WXML中可以先創(chuàng)建一條帶有名字 和 圖片的 view医舆，其中 container 是 整個底部的view，承接目錄的
<view class="container">
<view bindtap="bindViewTap" class="frame-item">
<text class="frame-directory">目錄結構</text>
<image class="frame-directory-img" src="../../image/arrowright.png" />
</view>
</view>
> 保存編譯（command + s）象缀，然后就能顯示出來了
- 2蔬将、接下來就要去布局樣式了，在對應 `WXSS` 文件中 編寫 CSS 代碼
/指定子類布局央星，通過空格/
.container .frame-item{
background-color: lightcyan;
/內(nèi)邊距/
/padding-left: 20px;/
width: 100%;
height: 44px;
/保持一致霞怀，不管子控件/
flex: 1;
/有四個值，上右下左/
margin: 10rpx;
/素內(nèi)彈性盒元素的方向,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;
/內(nèi)邊距/
padding-left: 20px;
font-size: 16px;
}
image{
width: 20px;
height: 20px;
/外邊距/
margin-right: 20px;
}
> 保存編譯（command + s）凿蒜，然后你發(fā)現(xiàn)正常顯示了（新項目默認app.wxss 中有布局禁谦，將 `padding: 200rpx 0;` 注釋掉 就能顯示如下效果）
- 3胁黑、事件處理，可以通過 `bindtap="對應 js 里面的方法名"` 給 view 綁定一個 事件
> WXML 中 綁定了 事件
<view bindtap="bindViewTap" class="frame-item">
<text class="frame-directory">目錄結構</text>
<image class="frame-directory-img" src="../../image/arrowright.png" />
</view>
>對應 js 文件中的方法州泊，方法里面實現(xiàn)了跳轉丧蘸，通過 `wx.navigateTo` 跳轉，url 傳入的是 絕對路徑
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}
- 4遥皂、多條數(shù)據(jù)顯示力喷，當然只需要去拷貝、粘貼演训，只需要去改顯示的內(nèi)容弟孟，css 和 事件 都不需要去管，只要 class 是一樣样悟，樣式就一樣
- 5拂募、點擊顯示隱藏，這個可以在WXSS 通過 `display` 屬性或者在 WXML 通過 hidden屬性 來控制器窟她，作者使用的是display 方式實現(xiàn)的
> WXML 中添加 判斷陈症，通過在js 中獲取是否顯示，來決定是否需要布局顯示樣式
<view class="frame-detail-view {{frameItem.isShow ? 'frame-detail-view-show' : ''}}">
>WXSS 中實現(xiàn)兩種樣式震糖，顯示和隱藏
.frame-detail-view {
/不顯示/
display: none;
}
.frame-detail-view-show{
/顯示/
width: 100%;
/垂直布局/
display: flex;
flex-direction: column;
}
- 6录肯、優(yōu)化
- （1）小程序中，數(shù)據(jù)獲取是通過 `{{data中的對應字段名}}` 吊说，那么WXML 中的數(shù)據(jù)顯示可以在js文件中獲取论咏，實現(xiàn)動態(tài)修改，特別是列表數(shù)據(jù)颁井，只需要通過 `wx:for-items` 遍歷潘靖，有多少條數(shù)據(jù)就顯示多少個view，這點類似iOS 的 tableViewCell 和 model 蚤蔓，數(shù)據(jù)可以是多種多樣卦溢，顯示不同的數(shù)據(jù)就用不同的model，有多少個model 就有多少個cell 秀又。
- （2）綁定事件跳轉单寂，可以在js 對應方法中用 `wx.navigateTo` 實現(xiàn)，可以通過 data 或者 id 傳url進去吐辙，但這樣就變得麻煩了宣决，跳轉還可以利用 `navigator` 標簽，然后 設置 url 屬性就可以
- （3）層級結構比較多昏苏，具體點擊哪個view 是需要 告訴 js 尊沸，js 才能去處理威沫，一開始不知道data 可以傳入多個值，只通過id 傳入當前點擊的目錄名字洼专，然后js 方法里面遍歷尋找棒掠，從最底層開始往上遍歷，雖然能實現(xiàn)屁商，但效果很不好烟很，會卡；后來直接通過data 傳入當前點擊的各個層級對應的index 下標（`wx:for-items` 默認下標是 index 對應元素是 item 蜡镶，可以通過 `wx:for-index` 和 `wx:for-item` 修改）雾袱，然后就類似iOS 的代理方法，在方法內(nèi)獲取對應的層級index官还，然后通過 `this.setData(data)` 修改data （**注意：頁面數(shù)據(jù)更新都需要使用 `this.setData(修改的data)` **）
- （4）看[官方文檔](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html?t=20161122)可以知道芹橡，WXML 和 WXSS 都可以通過import 或者 include 導入引用，簡單來說就是模板嘛（這點類似iOS 的封裝）望伦，通過上面三個步驟優(yōu)化之后林说，就有 WXSS 和 WXML 模板了，在指定頁面通過 `@import '../index/index.wxss';`引入index.wxss 模板 和 `@import '../index/index.wxss';` 引入index.wxml 模板屡谐，此時只需要去修改指定頁面 js 文件的data 數(shù)據(jù)就可以了
#七述么、手機預覽
- 需要 **[注冊 AppID](https://mp.weixin.qq.com/cgi-bin/wx)** 才可以，而 注冊 是需要 是企業(yè) 或者 政府 或 媒體 或 其他組織愕掏，沒有個人的度秘，因此個人項目是沒辦法手機上預覽（類似真機調(diào)試）,如果你想試試真機效果，官方的Demo就可以
#八饵撑、總結
- 1剑梳、雖然入門才幾天，但是遇到的問題還是挺多的滑潘，為了避免本文章篇幅太長垢乙，影響閱讀，我在 **[小程序開發(fā)中的記錄【持續(xù)更新】](http://www.reibang.com/p/1052b4f7eb5b) ** 都會記錄下來语卤，歡迎 關注 & like
- 1追逮、作者一直使用Objective-c 編程，工作需要嘛粹舵，當然 swift 和 前端也有去學去寫钮孵，原理相通，只不過是換種寫法眼滤，這個作為個人項目巴席，會一直更新，直到功能完善诅需，Demo的最新更新會在文章開頭
- 2漾唉、寫的Demo 雖然挺簡單的荧库，思路應該也說清楚了，分享出來也應該能帶大家入門赵刑，**[Github 地址](https://github.com/gitkong/SmallProgram)** 如果大家還有什么不明白的或者上文有什么不正確的地方分衫，歡迎評論指教，謝謝
- 3料睛、歡迎大家關注我丐箩，喜歡給個like 和 star 摇邦，更新也需要動力喔~