iOS开发者怎么花半天从微信小程序文盲到编写一个简单页面

241 阅读3分钟

首先说明一下,本人从来没有写过微信小程序,但不得不承认微信小程序平台是一个很优秀的平台,它其实是为“轻应用”时代开辟了一个先河。于是在自身的知识理解能力和查阅微信小程序开发文档的基础上花了半天的时间编辑了一个超级简单的小程序页面。

这里主要想说的是iOS开发如何转变思维去融入小程序开发逻辑,当然这里也只是个人观点,大家觉得有用的可以阅读一下,觉得废话连篇的,嗯嗯,你是大佬,大佬请高抬贵手。这篇文章获取不是技术文章,更多的是原生与小程序的对比。

废话多说无用,直接进入主题

小程序的更多的是配置,而不是像iOS的对对象进行操作,不过话又说回来,iOS对象的本质也是结构体,难道它就不是配置了吗?

配置tabbar

在app.json里进行配置

"tabBar": {

"color": "#707070",

"selectedColor": "#d81e06",

"list": [

{

"pagePath": "pages/home/home",

"text": "首页",

"selectedIconPath": "images/homeSelect.png",

"iconPath": "images/home.png"

},

{

"pagePath": "pages/mine/mine",

"text": "我的",

"selectedIconPath": "images/mineSelect.png",

"iconPath": "images/mine.png"

}

]

}

这里可以看到,其实跟iOS原生的语义上是一致的。

创建home首页

image.png

在pages文件夹下,创建一个home文件夹,直接右键选择创建page,快速的生成对应的.js (生命周期、属性定义、方法列表).json(页面配置) .wxml(页面) .wxss(样式)四个文件。

好了,创建完了别忘了在app.json 下的pages里面注册一下。

轮播图

home.wxml 编写轮播图

<swiper indicator-dots="true" autoplay="true" circular="true" interval="2000" class="banner">

<swiper-item wx:for="{{banners}}" wx:key="id" wx:for-item="banner">

<cover-image class="coverImage" src="{{banner.src}}"></cover-image>

</swiper-item>

</swiper>

直接用的是微信平台提供的swiper 组件。里面添加swiper-item。然后再包裹一个图片显示组件cover-image。

自定义组件开发

里面的商品组为自定义组件,这里其实如果是iOS开发的话,tableView、collectView应该是大家的首选了。但是这里常用的实现列表的方法就是自定义组件,通过循环语法赋值item进行简化代码量。

这里可以创建一个组件文件夹,在里面右键选择“新建Component”,这个就是自定义组件的意思。

properties: {

item:{type:Object,value:null}

},

在自定义组件的js文件里,添加properties声明,这个是用来父组件对子组件赋值的属性。

<ShowShopInfoSection wx:for="{{shopIntroduceSections}}" wx:key="id" wx:for-item="item" item="{{item}}"></ShowShopInfoSection>

可以看到在父组件里遍历数据集合创建子组件,并将“item”属性赋值给子组件。这样子组件就能通过该属性就行页面赋值了。

比如 给“时尚童装”lab赋值。

<text class="sectionTitle">{{item.name}}</text>

item 对象结构如下

{

id: '1',

name: "时尚童装",

list: []
}

这里没有必要展示出全部的代码(代码质量垃圾心里知道,不敢丢人),其实完成上面的的小页面,需要css、vue组件化开发上有一定的理解。文章纯属个人开发总结,不存在任何技术点分析,记个流水账,加深下个人理解。大神、大佬见怪莫怪([抱拳])