Emmmm佑菩，最近一波失業(yè)潮盾沫。富某康、某團(tuán)殿漠、摩某赴精、京某、知某凸舵、某浪祖娘、58 某大面積裁員，那么在這個(gè)千鈞一發(fā)之際啊奄，單純iOS開發(fā)也著實(shí)不好過渐苏，回過頭看一下，裁掉的都是單一選手菇夸，為了節(jié)約成本公司留下的都是身兼多職的全棧開發(fā)工程師琼富。

那么iOS, 有些選手就要找對方向再學(xué)一手以備下次被裁員的不是自己。HTML庄新，CSS, JS,小程序鞠眉，React， React Native浮現(xiàn)在選手面前择诈。 好械蹋，進(jìn)入正題，今天開始從0入門小程序羞芍。咦哗戈，等等，為什么叫選手呢荷科，因?yàn)楫?dāng)前環(huán)境下經(jīng)濟(jì)不景氣都是去競爭口飯吃的唯咬，就像是在比賽，故本文稱之為選手畏浆。

首先胆胰，學(xué)習(xí)小程序開發(fā)對于學(xué)習(xí)iOS開發(fā)成本實(shí)在是低，低到什么程度呢刻获？低到你單看這篇文章就可以開發(fā)并發(fā)布小程序蜀涨。

一：小程序注冊

注冊小程序帳號

在微信公眾平臺(tái)官網(wǎng)首頁（mp.weixin.qq.com）點(diǎn)擊右上角的“立即注冊”按鈕。

關(guān)于小程序賬號注冊填寫從相關(guān)的各位選手可以去微信公眾平臺(tái)自己看官方文檔這里不做詳細(xì)介紹https://developers.weixin.qq.com/miniprogram/introduction/index.html

image

二：這篇文章重點(diǎn)要介紹的是開發(fā)工具和代碼方面的知識(shí)。

微信開發(fā)工具下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

那么現(xiàn)在我已經(jīng)下載好了

image

點(diǎn)擊小程序項(xiàng)目勉盅，進(jìn)入

image

如圖佑颇，我這是之前已經(jīng)創(chuàng)建好的項(xiàng)目，會(huì)顯示在圖上右邊草娜，如果是本地沒有小程序項(xiàng)目挑胸，則創(chuàng)建就可以了，相信我們的iOS開發(fā)們這些都不是事宰闰，emm不行茬贵，怕有些 人還是不會(huì)，老規(guī)矩上圖

image

好移袍，終于看到代碼了解藻，到這里才是本文接下來要講的重點(diǎn)。

先來看下我們今天要實(shí)現(xiàn)的效果葡盗。

image

再來整體看下代碼架構(gòu)

image

先來看四種文件螟左，.js, .json,.wxss,.wxml。

.js處理邏輯觅够，數(shù)據(jù)胶背，獲取網(wǎng)絡(luò)請求的數(shù)據(jù)即在這里面

.json 配置文件，比如tabbar的配置喘先，navigationbar的配置等

.wxml創(chuàng)建的控件钳吟，比如view，button窘拯，map組件

.wxss控件的修飾红且，比如frame，backgroudcolor等

看到這里是不是感覺有點(diǎn)跟MVVM設(shè)計(jì)模式相似呀,不同功能的代碼分文件來寫涤姊，一目了然暇番。

好，先看示例首頁搜索頁面的輸入框思喊。

.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'>播放次數(shù):{{item.play}}</view>
           <view class='length'>總共:{{item.tracks}}集</view>
          </view>
      </view>
    </view>
  </view>
</view>

如圖不同顏色框?qū)?yīng)不同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; 代表邊框?qū)?rpx，樣式ridge搔涝，顏色黑色
2..table： width: 100vw;代表鋪滿寬，即100%
3..listitem： display：flex和措；采用flex彈性布局庄呈，flex-direction: row; 即豎向布局，即我們熟悉的tableview樣式派阱，同理flex-direction: column; 橫向布局诬留。padding:20rpx;即向里周邊都縮進(jìn)20rpx
4..bottomView ： justify-content:space-between;justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
| flex-start | 默認(rèn)值。項(xiàng)目位于容器的開頭文兑。 | 測試 ? |
| flex-end | 項(xiàng)目位于容器的結(jié)尾盒刚。 | 測試 ? |
| center | 項(xiàng)目位于容器的中心。 | 測試 ? |
| space-between | 項(xiàng)目位于各行之間留有空白的容器內(nèi)绿贞。 | 測試 ? |
| space-around | 項(xiàng)目位于各行之前因块、之間、之后都留有空白的容器內(nèi)籍铁。 | 測試 ? |
| initial | 設(shè)置該屬性為它的默認(rèn)值涡上。請參閱 initial。 | 測試 ? |
| inherit | 從父元素繼承該屬性拒名。請參閱 inherit吩愧。 |
5.其他諸如：color，font-size這些不多做解釋增显。

下面來到了.js文件有了這一步雁佳，咸魚變活魚，界面搭好了同云，就等渠里通水了糖权。

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    searchResults:[],

  },
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  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,
    })
  }
})

首先輸入搜索的內(nèi)容后，點(diǎn)擊搜索梢杭，iOS里應(yīng)該是有個(gè)textfieldshouldReturn温兼，這個(gè)事件。那么小程序同理武契，我們之前已經(jīng)在wxml里綁定過了募判，那就是bindconfirm="shouldDone"這行代碼，bindconfirm就是這個(gè)事件咒唆，我們綁定上之后届垫，在js文件里實(shí)現(xiàn)這個(gè)shouldDone方法，然后再shouldDone方法里進(jìn)行網(wǎng)絡(luò)請求去獲取數(shù)據(jù)就好全释。

說到網(wǎng)絡(luò)請求装处，微信小程序的封裝那是厲害的一批，
看圖

image.png

wx.request就是調(diào)網(wǎng)絡(luò)請求浸船，url是請求的鏈接妄迁，method是請求的方法get，post李命。
post需要傳參的話下面再加個(gè)data參數(shù)傳進(jìn)去就好登淘。
success就是請求成功的回調(diào)，res就是response封字，更神奇的是黔州，返回?cái)?shù)據(jù)的解析如圖上：var results = res.data.album.docs; 竟然直接點(diǎn)語法就把json給解析了耍鬓，如圖所示的格式

image.png

是不是太方便了。
有了數(shù)據(jù)了流妻，下面來處理數(shù)據(jù)牲蜀，如圖

image.png

suo

遍歷數(shù)組

image.png

那么現(xiàn)在數(shù)據(jù)就修改完了横漏，要顯示了

 that.setData({
          searchResults: results,
        })

這句話就是把我們得到的返回的數(shù)據(jù)賦值給我們在data里定義的searchResults

image.png

同時(shí)，wxml里綁定的searchResults熟掂，就會(huì)刷新出來界面缎浇。

image.png

感謝各位看官指厌！

代碼地址:https://git.dev.tencent.com/cong_Wang/xcx.git
git clone 即可下載下來代碼。
如圖：已經(jīng)下載下來了

image.png

image.png

image.png

image.png