iOS学小程序从0到发布(适合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

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文件有了这一步，咸鱼变活鱼，界面搭好了，就等渠里通水了。

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方法里进行网络请求去获取数据就好。

说到网络请求，微信小程序的封装那是厉害的一批，
看图

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

到此首页搜索界面的实现介绍完毕。下班了，先回家吃饭了，饿死。回来继续

感谢各位看官！

代码地址:https://git.dev.tencent.com/cong_Wang/xcx.git