iOS學小程式從0到釋出(適合iOS開發看)

摘要： Emmmm，最近一波失業潮。富某康、某團、摩某、京某、知某、某浪、58 某大面積裁員，那麼在這個千鈞一髮之際，單純iOS開發也著實不好過，回過頭看一下，裁掉的都是單一選手，為了節約成本公司留下的都是身兼多職的全棧開發工程師。 那麼iOS, 有些選手就要找對方向再學一手以備下次被裁員的不是自...

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="輸入來搜尋:mag:" 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檔案有了這一步，鹹魚變活魚，介面搭好了，就等渠裡通水了。

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方法裡進行網路請求去獲取資料就好。

說到網路請求，微信小程式的封裝那是厲害的一批，

看圖

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，點選匯入按鈕。

大功告成，現在就可以跑專案了