Emmmm，最近一波失業潮。富某康、某團、摩某、京某、知某、某浪、58 某大面積裁員，那么在這個千鈞一發之際，單純iOS開發也着實不好過，回過頭看一下，裁掉的都是單一選手，為了節約成本公司留下的都是身兼多職的全棧開發工程師。
那么iOS, 有些選手就要找對方向再學一手以備下次被裁員的不是自己。HTML，CSS, JS,小程序，React， React Native浮現在選手面前。 好，進入正題，今天開始從0入門小程序。咦，等等，為什么叫選手呢，因為當前環境下經濟不景氣都是去競爭口飯吃的，就像是在比賽，故本文稱之為選手。
首先，學習小程序開發對於學習iOS開發成本實在是低，低到什么程度呢？低到你單看這篇文章就可以開發並發布小程序。
一：小程序注冊
注冊小程序帳號
在微信公眾平台官網首頁（mp.weixin.qq.com）點擊右上角的“立即注冊”按鈕。
關於小程序賬號注冊填寫從相關的各位選手可以去微信公眾平台自己看官方文檔這里不做詳細介紹https://developers.weixin.qq.com/miniprogram/introduction/index.html
二：這篇文章重點要介紹的是開發工具和代碼方面的知識。
微信開發工具下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
那么現在我已經下載好了
點擊小程序項目，進入
如圖，我這是之前已經創建好的項目，會顯示在圖上右邊，如果是本地沒有小程序項目，則創建就可以了，相信我們的iOS開發們這些都不是事，emm不行，怕有些 人還是不會，老規矩上圖
好，終於看到代碼了，到這里才是本文接下來要講的重點。
先來看下我們今天要實現的效果。
再來整體看下代碼架構
先來看四種文件，.js, .json,.wxss,.wxml。
.js處理邏輯，數據，獲取網絡請求的數據即在這里面
.json 配置文件，比如tabbar的配置，navigationbar的配置等
.wxml創建的控件，比如view，button，map組件
.wxss控件的修飾，比如frame，backgroudcolor等
看到這里是不是感覺有點跟MVVM設計模式相似呀,不同功能的代碼分文件來寫，一目了然。
好，先看示例首頁搜索頁面的輸入框。
.wxml里
<input class="searchPut" bindconfirm="shouldDone" placeholder="輸入來搜索🔍" type="text" confirm-type="Search"> </input> <view class="table"> <view class='contentview' wx:for="{{searchResults}}" wx:for-index="bindex"> <view class="listitem" bindtap='didSelectCell' data-bindex='{{bindex}}'> <image class="img" src="{{item.cover_path}}"></image> <view class="right"> <view class="name">{{item.title}}</view> <view class="nameDes">{{item.intro}}</view> <view class="bottomView"> <view class='playtimes'>播放次數:{{item.play}}</view> <view class='length'>總共:{{item.tracks}}集</view> </view> </view> </view> </view> </view> 如圖不同顏色框對應不同UI組件
.wxss
.searchPut { margin-left: 20rpx; margin-right: 20rpx; height: 60rpx; border: 2rpx ridge black; } .table { top: 80rpx; width: 100vw; margin-bottom: 0rpx; } .contentview { padding: 0; } .listitem{ display: flex; flex-direction: row; padding:20rpx; } .img { width: 100rpx; height: 100rpx; } .right { flex: 1; width: 590rpx; margin-left: 20rpx; display: flex; flex-direction: column; } .name { font-size: 35rpx; } .nameDes { font-size: 30rpx; } .bottomView { flex: 1; display: flex; flex-direction: row; justify-content:space-between; } .playtimes { font-size: 30rpx; color: gray; vertical-align: center; } .length { font-size: 30rpx; color: gray; } 1.searchPut ：margin-left ：距離左邊， 那距離右邊同理margin-right
講下border：border: 2rpx ridge black; 代表邊框寬2rpx，樣式ridge，顏色黑色
2..table： width: 100vw;代表鋪滿寬，即100%
3..listitem： display：flex；采用flex彈性布局，flex-direction: row; 即豎向布局，即我們熟悉的tableview樣式，同理flex-direction: column; 橫向布局。padding:20rpx;即向里周邊都縮進20rpx
4..bottomView ： justify-content:space-between;justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
| flex-start | 默認值。項目位於容器的開頭。 | 測試 » |
| flex-end | 項目位於容器的結尾。 | 測試 » |
| center | 項目位於容器的中心。 | 測試 » |
| space-between | 項目位於各行之間留有空白的容器內。 | 測試 » |
| space-around | 項目位於各行之前、之間、之后都留有空白的容器內。 | 測試 » |
| initial | 設置該屬性為它的默認值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
5.其他諸如：color，font-size這些不多做解釋。
下面來到了.js文件有了這一步，咸魚變活魚，界面搭好了，就等渠里通水了。
Page({
/** * 頁面的初始數據 */ data: { searchResults:[], }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, shouldDone: function (event) { var searchkey = event.detail.value; var that = this; wx.request({ url: 'http://search.ximalaya.com/front/v1?core=all&device=iPhone&is_paid=true&live=true&page=1&paidFilter=false&rows=3&spellchecker=true&version=5.4.45&kw='+searchkey, method:"get", success: function (res) { var results = res.data.album.docs; console.log(results); for (var i in results) { var playtimes = results[i].play; var playStr = String(playtimes); if (playtimes > 10000) { playtimes = playtimes/10000; playStr = playtimes.toFixed(1)+"萬"; } results[i].play = playStr; } that.setData({ searchResults: results, }) } }) }, didSelectCell: function (event) { var that = this; var index = event.currentTarget.dataset.bindex; console.log(index); var list = that.data.searchResults; var albumID = list[index].id; console.log(albumID); wx.navigateTo({ url: 'index?albumId=' + albumID, }) } }) 首先輸入搜索的內容后，點擊搜索，iOS里應該是有個textfieldshouldReturn，這個事件。那么小程序同理，我們之前已經在wxml里綁定過了，那就是bindconfirm="shouldDone"這行代碼，bindconfirm就是這個事件，我們綁定上之后，在js文件里實現這個shouldDone方法，然后再shouldDone方法里進行網絡請求去獲取數據就好。
說到網絡請求，微信小程序的封裝那是厲害的一批，
看圖
wx.request就是調網絡請求，url是請求的鏈接，method是請求的方法get，post。
post需要傳參的話下面再加個data參數傳進去就好。
success就是請求成功的回調，res就是response，更神奇的是，返回數據的解析如圖上：var results = res.data.album.docs; 竟然直接點語法就把json給解析了，如圖所示的格式
是不是太方便了。
有了數據了，下面來處理數據，如圖
播放次數，實際服務器返回的“play”這個字段播放次數是64168345，那我們要轉為6416.8萬，這該怎么轉呢，如果是OC代碼那我們就得心應手，但這里是小程序。
首先這是一個列表，每條數據里都有play這個字段，兩種方案：1.就是要遍歷下數組，然后把數組中的這個字段對應的值做下修改。2.直接在對控件賦值的時候做轉換（也就是對應iOS里cellforrow里給控件賦值的時候）。那我們現在wxml里已經寫好了，直接取的就是play這個字段的值，並沒有做轉換，如圖
所以我們現在采用第一種方法
遍歷數組
那么現在數據就修改完了，要顯示了
that.setData({ searchResults: results, }) 這句話就是把我們得到的返回的數據賦值給我們在data里定義的searchResults
同時，wxml里綁定的searchResults，就會刷新出來界面。
到此首頁搜索界面的實現介紹完畢。下班了，先回家吃飯了，餓死。回來繼續
感謝各位看官！
代碼地址:https://git.dev.tencent.com/cong_Wang/xcx.git
git clone 即可下載下來代碼。
如圖：已經下載下來了
那么怎么跑這個代碼呢？我們打開微信開發工具，
點擊+號，即新建項目，導入項目，選擇代碼的目錄，選擇測試號，即會為你生成一個測試appid，點擊導入按鈕。
大功告成，現在就可以跑項目了
