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
image
二：這篇文章重點要介紹的是開發工具和代碼方面的知識。
微信開發工具下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
那麼現在我已經下載好了
image
點擊小程序項目，進入
image
如圖，我這是之前已經創建好的項目，會顯示在圖上右邊，如果是本地沒有小程序項目，則創建就可以了，相信我們的iOS開發們這些都不是事，emm不行，怕有些 人還是不會，老規矩上圖
image
好，終於看到代碼了，到這裏纔是本文接下來要講的重點。
先來看下我們今天要實現的效果。
image
再來整體看下代碼架構
image
先來看四種文件，.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組件
image.png
.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文件有了這一步，鹹魚變活魚，界面搭好了，就等渠裏通水了。
age({
/**
* 頁面的初始數據
*/
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方法裏進行網絡請求去獲取數據就好。
說到網絡請求，微信小程序的封裝那是厲害的一批，
看圖
image.png
wx.request就是調網絡請求，url是請求的鏈接，method是請求的方法get，post。
post需要傳參的話下面再加個data參數傳進去就好。
success就是請求成功的回調，res就是response，更神奇的是，返回數據的解析如圖上：var results = res.data.album.docs; 竟然直接點語法就把json給解析了，如圖所示的格式
image.png
是不是太方便了。
有了數據了，下面來處理數據，如圖
image.png
播放次數，實際服務器返回的“play”這個字段播放次數是64168345，那我們要轉爲6416.8萬，這該怎麼轉呢，如果是OC代碼那我們就得心應手，但這裏是小程序。
首先這是一個列表，每條數據裏都有play這個字段，兩種方案：1.就是要遍歷下數組，然後把數組中的這個字段對應的值做下修改。2.直接在對控件賦值的時候做轉換（也就是對應iOS裏cellforrow裏給控件賦值的時候）。那我們現在wxml裏已經寫好了，直接取的就是play這個字段的值，並沒有做轉換，如圖
suo
所以我們現在採用第一種方法
遍歷數組
image.png
那麼現在數據就修改完了，要顯示了
that.setData({
searchResults: results,
})
這句話就是把我們得到的返回的數據賦值給我們在data裏定義的searchResults
image.png
同時，wxml裏綁定的searchResults，就會刷新出來界面。
image.png
到此首頁搜索界面的實現介紹完畢。下班了，先回家吃飯了，餓死。回來繼續
感謝各位看官！