微信小程序开发教程-从零开始（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的布局又是怎么写的呢？下面咱们先写贴下代码再作下解说。

<!--文章列表模板 begin-->
<template name="itmes"> <view class="imgs"><image src="{{imgURL}}" class="in-img" background-size="cover" model="scaleToFill"></image></view> <view class="infos"> <view class="title">{{title}}</view> <view class="date">{{time}}</view> <view class="classification">{{classification}}</view> </view> </template>
<!--文章列表模板 begin-->复制代码

在这段代码中<template name="items">...</template>是微信小程序中的模板，那什么是模板呢？官方文档是这样解释的。

模板

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中，代码以下。

<!--循环渲染列表 begin-->
<block wx:for="{{newList}}"> <template is="itmes" data="{{...item}}" /> </block> <!--循环渲染列表 end-->复制代码

com + s 再 编译一下能够看到以下的效果

到此微信小程序的列表功能已经作完了，固然咱们看到的布局都是很乱的，下一篇咱们将优化UI让他和咱们的效果图同样。

首发连接
第一时间收到文章推送