Runlin微信小程序系列教程一：从零开始写一个demo《上》

本文已赢得原作者许可

微信小程序公测至今也存有20天左右，也存有很多人做出了很多极好的DEMO并公布至github了。前几日看到了豆瓣电影这个demo，感觉很极好，也跟著搞了一个，做为备考稳固文档API用。

第一节只写下一个首页的展现，数据用的就是自己写下的交互式的数据

新建一个demo，不要采用微信自带的DEMO，轻易从零开始写下起至：

首先建立3个文件：

app.json

app.js

apps.wxss

app.json : 主要写下布局项：内容如下，具体内容的每个key值对应的意思，这里就不再细说了，可以看看我之前的布局指南，

{

"pages":[

"pages/index/index",

"pages/rank/rank",

],

"window":{

"enablePullDownRefresh":true,

"backgroundColor":"#eee",

"navigationBarTitleText": "上导航系统标题文字",

"navigationBarTextStyle":"white"

},

"tabBar": {

"color": "#d7ced5",

"selectedColor": "#535f71",

"borderStyle": "white",

"backgroundColor": "#f9f9f9",

"list": [

{

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

"text": "所推荐电影",

"iconPath": "images/board.png",

"selectedIconPath": "images/board-actived.png"

},

{

"pagePath": "pages/rank/rank",

"text": "北美票房",

"iconPath": "images/note.png",

"selectedIconPath": "images/note-actived.png"

}

]

},

"networkTimeout": {

"request": 10000,

"downloadFile": 9000,

"uploadFile":8000,

"connectSocket":7000

},

"debug": true

}

app.js : 主要用以登记注册一个小程序的实例

App({

onLaunch: function () {

},

onShow: function () {

},

onHide: function () {

},

globalData: 'I am global data'

});

app.wxss : 公用样式，基本等同于CSS，暂时不须要写下内容。

建立不好3个文件后，就可以已经开始写下页面的内容了：

新创建2个文件夹images和pages，一个摆图片一，个摆页面。

目前只pages下面再建立2个文件夹index和rank，每个文件下分别建立json,js,wxml,wxss文件，此时目录如下：

虽然不一定4个文件类型都须要使用，但为了之后便利，建议还是先建立不好，须要使用的时候就比较便利了，不必再回去建立。

首先写下index.js: (为了演示循环数组，data下面的moivelist还须要多激活几份，这里只写下了一份出，imgsrc路径必须写下不好)

Page({

data:{

moivelist:[{

imgsrc: "../../images/AN2.jpg",

title: "肖申克的救赎",

introduce: "The shrakwos RedenpeTion(1994)",

author: "弗兰克*德拉立邦",

rank: "9.6"

}

]

}

,

onLoad: function(options) {

console.log(1);

},

onReady: function() {

// Do something when page ready.

},

onShow: function() {

// Do something when page show.

},

onHide: function() {

// Do something when page hide.

},

onUnload: function() {

// Do something when page close.

},

onPullDownRefresh: function() {

// Do something when pull down

},

// Event handler.

viewTap: function() {

this.setData({

text: 'Set some data for updating view.'

})

}

})

这里发生了很多on函数事件，对应页面的生命周期每个过程对应的事件，这里暂时先高度关注data对象

小程序就是以数据驱动的，页面进去的时候通过动态获取数据，通过{{xxx}}将数据存取，并将数据图形至视图层，这里先以一个交互式的data数据演示

然后写下index.wxml文件：

从上面表明的首页的图片来看，主要就是1个标题，以及下面一个列表，列表用过循环去图形出来所有的数据

标题: 标题比较简单，主要就是写下css

豆瓣电影top250

这里主要谈下面的列表循环，可以辨认出我们只要写下不好列表中的第一个就可以了，其他的通过循环去展现

列表主要分成左中右三块，分别为图片，内容，以及评分3块

//循环图形，wx:for="{{ xxx }}" 代表循环js文件里面的data数据中的xxx

//微信循环时会得出每个项目的内容以及每个项目的负号，预设为item和index，item.imgsrc意指对象的（imgsrc） key值

图片：

内容：

{{item.title}}

{{item.introduce}}

< text >{{item.author}}

评分：

{{item.rank}}

基本都这里wxml就完结了，样式主要通过wxss去操作方式，样式比较简单，就不写下了，主要谈一下左中右这三块

通过将左中右这三块的父级设置为display:flex;

左边和右边都设置为紧固rpx，中间设置为flex:1。

这样写下代表中间这一块的内容填满：左边和右边布局后生下来的空间 ，即为左右布局不好后，剩下多少，flex：1就等同于多少。

第一节项目代码见到：demo1

https://github.com/linrunzheng/wx-samll-demo