奇董的微信小程序--iOS弱鸡摸黑入门

作者：模板之家 2018-1-29 14:42 10641人关注

最近移动端的任务完成了，正好赶上小程序公测。作为一个iOS开发的弱鸡，已经准备接受web同行的疯狂吐槽了。首先，我们iOS程序程序的入口是main函数制定appdelegate进入程序循环=====

最近移动端的任务完成了，正好赶上小程序公测。作为一个iOS开发的弱鸡，已经准备接受web同行的疯狂吐槽了。

首先，我们iOS程序程序的入口是main函数制定appdelegate进入程序循环======在小程序中我们可以创建一个app.js文件，在其中调用app（）的方法

app.js

//app.js
App({
  onLaunch: function () {
  },
  getUserInfo:function(cb){
  },
  globalData:{
    userInfo:null
  }
})

看到onLaunch我们很容易联想到 appdelegate中的- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(nullable NSDictionary *)launchOptions都是程序加载的嘛
上面是 js 的语法，我稍微解释一下app()是程序的入口传入的app的一个对象
在js 中

{
  onLaunch: function () {
  },
  getUserInfo:function(cb){
  },
  globalData:{
    userInfo:null
  }
}

这就是一个对象， onLaunch不用说，下面的2个方法都市我们为这个对象添加的方法。
在其他地方我们可以获取这个全局对象

var app = getApp()

这个就和[UIApplication sharedApplication]差不多。
不过这里区别的是 iOS是指定了代理，而小程序这边是自己创建一个app的对象。

app.json

这个json文件就相当于配置文件，针对一些全局配置

{
  "pages":[
    "pages/index/index",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "24爱购",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_component.png",
      "selectedIconPath": "images/icon_component_HL.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "images/icon_API.png",
      "selectedIconPath": "images/icon_API_HL.png"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

1.pages 和iOS不同，在小程序中所有的页面都需要注册。不注册跳转的就会报错。
2.window和tabbar 这个就不用多说了，大家看上面的字面意思就能力理解
3.networkTimeout 网络请求的超时时间

app.wxss

这个就是一个css的加强版，在我们iOS中就是layout的代码。
在这里写的css 都是全局的

开始撸页面

我们知道我们在写iOS程序的时候一般都是分MVC的，在小程序对于一个页面一般有3类文件wxml,js,wxss . 对于wxml就等同于我们的view，js就等同于我们的model和controller，而wxss就是把view中的layout单独提取出来。
这样分，我感觉应该很清楚了。
我们现在就就撸一个tabbleview 练练手

按照我们iOS 的套路直接一个tableview 写好cell搞定。

可是在小程序中没有列表这种view，我们只有用for循环来渲染拉

<view class="mine-item-list">
            <block wx:for="{{itemArray}}">
                <view class="mine-item">
                    <image class="mine-item-img" src="{{item['img']}}"></image>
                    <text class="mine-item-name">{{item["name"]}}</text>
                    <image class="mine-item-arrow" src="../../images/arrowright.png"></image>
                </view>
            </block>
 </view>

对了，我要提一下。这个wxml就和html没什么区别，view看成div