IOS开发者试水：微信小程序开发教程-从零开始（1）

前言

微信小程序暂时处在公测期间，公司小的版本刚好上线了，闲来无事，看一看微信小程序的文档，顺带自学自学，在此期望和大家一起奋发，发现自己越来越自私了，越活越没有上进心了，有点危险，给自己新切警钟吧。废话不多说道，已经开始记录下这些天自学至的一些科学知识，期望对正在写作的你有所协助！ 本文为iOS开发者Bison自学微信小程序所写下，所以很多东西都和iOS展开了一下对照。

上开搞出

建立项目在此粘滞，坚信大家看著官方文档就可以搞掂

首先我们先把整个app的架构乘出来

通常市面上的app都已tabbar展现的方式居多，今天我就仿原生的IT Blog下面使我们看看IT blog长什么样吧！

首先就是TABBAR

下面我将直观的了解一下微信小程序一些不容失的目录结构。

下面借予官方的表述

WXSS(WEIXIN STYLE SHEETS)就是一套样式语言，用作叙述 WXML 的组件样式。

WXSS 用以同意 WXML 的组件必须怎么表明。为了适应环境社会各界的前端开发者，我们的 WXSS 具备 CSS 大部分特性。 同时为了更适宜研发微信小程序，我们对 CSS 展开了扩展以及修正。

APP.JSON 文件去对微信小程序展开全局布局，同意页面文件的路径、窗口整体表现、设置网络超时时间、设置多 TAB 等。

文件去对微信小程序展开全局布局，同意页面文件的路径、窗口整体表现、设置网络超时时间、设置多 tab 等。相等于iOS研发中的AppDelegate

APP.JS 就是小程序逻辑部分

根据上面的目录结构的表述不难看出，我们的tabbar就是写下在哪的，要说就是app.json，下面使我们看看下代码

{

"pages":[

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

},

"tabBar": {

"backgroundColor":"#000000",

"list": [{

"iconPath":"image/icon_API.png",

"selectedIconPath":"image/icon_API_HL.png",

"pagePath": "pages/index/index",

"text": "首页"

}, {

"iconPath":"image/icon_component.png",

"selectedIconPath":"image/icon_component_HL.png",

"pagePath": "pages/about/about",

"text": "我的"

}]

}

}

上图框出的地方就是我们的tabbar，tabbar里面可以传一个数组list，想要表明多少个tab就至这里提就行及，当然个数就是存有管制的最少5个，一个的话就没有必要了。这点和iOS研发里面十分相近。 下面我们按下com + s 再 编程一下，就可以看见如下结果了

iconPath为预设图片路径，selectedIconPath为页面时的图片路径，text的话我想要不说道大家也已经猜出了，对，要说就是图片下面表明的title了。

我们这暂时只写下了俩个Tab，在此主要也就是同时实现我们的首页效果。 由我们的效果图可以窥见，iOS研发中我们的布局主要用的就是tabview，而在微信小程序中相似tabviewCell的布局又就是怎么写下的呢？下面我们先写下张贴下代码再搞下解说员。

在这段代码中就是微信小程序中的模板，那什么就是模板呢？官方文档就是这样表述的。

模板

WXML提供更多模板（template），可以在模板中定义代码片段，然后在相同的地方调用。

我的认知这个相等于iOS研发中的cell，cell存有了的话， 那就只缺乏一个数据源了，下面我们暂时搞一个本地的数据源。

数据主要就是写下在js代码当中的，下面来看下代码

//index.js

//以获取应用领域实例

var app = getApp()

Page({

data: {

newList:[{url:"baidu.com",title:"sdsadsadasdas",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdassss",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"12",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"333",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"32",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"123",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"456",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},

{url:"baidu.com",title:"sdsadsadasdas",classification:"454",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}

]

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

}

})

其中的newList为我们的数据源,数组里面涵盖多个字典，字典里面存有我们所须要的5个字段。 cell 和数据源都存有了，那就只差一个表明了， 表明在微信小程序当中用的就是列表图形

列表图形

在组件上采用wx:for掌控属性存取一个数组，即可采用数组中各项的数据重复图形该组件。 预设数组的当前项的负号局部变量预设为index，数组当前项的局部变量预设为item

下面我们去看一看这个列表图形就是怎么做的,首先转换至index.wxml中，代码如下。