最近移动端的任务完成了，正好赶上小程序公测。作为一个iOS开发的弱鸡，已经准备接受web同行的疯狂吐槽了。
写给咱iOS开发者的小程序入门，肯定要按照iOS开发的流程走了啊😢
小程序文档https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
自己瞎写的demo：https://github.com/dongqihouse/wxappDemo
小程序demo.gif
首先，我们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 练练手
B742C497-D36B-48DF-A2B2-DE27572B08B4.png
按照我们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😁
我们首先渲染一个cell
<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>
我们先不管布局的事 这种事放在wxss 中，作为一个非web端开发者感觉好难受。
之后利用循环渲染多个cell
<block wx:for="{{itemArray}}">
</block>
for 循环要放在block 中
之后再js中声明数据源
itemArray:[
{
"name":"钱包",
"img":"../../images/mine_item_wallet.png"
},
{
"name":"优惠券",
"img":"../../images/mine_item_discount.png"
},
{
"name":"我的储值卡",
"img":"../../images/mine_item_valueCart.png"
},
{
"name":"帮助",
"img":"../../images/mine_item_help.png"
},
{
"name":"客服",
"img":"../../images/mine_item_service.png"
}
]
之后wxss 这边东西太多大家去看下基本的css就行了，我这边只写一个flexbox
这个就和我们的autolayout差不多
首先，我们如果要在上面cell中使用弹性盒布局的话，我们就要 声明
.cell-view{
display: flex;
}
cell-view就是容器，容器里面包含的view即使项目
容器属性
flex-direction : 布局排列方向
flex-wrap ： 是够换行
flex-flow： 上面2个属性的结合体
justify-content ： 项目项目 在x轴 对齐方式
align-items ： y轴对齐方式
align-content ： 综合上面2种对齐方式
项目属性
order ：排序顺序
flex-grow ：放大比例
flex-shrink ：输小比例
flex-basis ：
flex ： 上面3中的综合
align-self ：居中属性
具体细节可以看大神些的博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
网友评论