无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

微信小程序內(nèi)測至今也有20天左右，也有很多人作出了很多不錯的DEMO并發(fā)布到github了。前幾日看見了豆瓣電影這個demo，感覺很不錯，也跟著做了一個，作為復(fù)習(xí)鞏固文檔API用。

廢話不多說，直接進(jìn)入正題：

第一節(jié)只寫一個首頁的展示，數(shù)據(jù)用的是自己寫的虛擬的數(shù)據(jù)

新建一個demo，不要使用微信自帶的DEMO，直接從零開始寫起：

首先創(chuàng)建3個文件：

app.json

app.js

apps.wxss

app.json  : 主要寫配置項：內(nèi)容如下，具體的每個key值對應(yīng)的意思，這里就不再細(xì)說了，可以看我之前的配置指南，

{

"pages":[
"pages/index/index",
"pages/rank/rank",
],
"window":{
"enablePullDownRefresh":true,

"backgroundColor":"#eee",

"navigationBarTitleText": "上導(dǎo)航標(biāo)題文字",

"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，暫時不需要寫內(nèi)容。

創(chuàng)建好3個文件后，就可以開始寫頁面的內(nèi)容了：

新創(chuàng)建2個文件夾images和pages，一個放圖片一，個放頁面。

目前只pages下面再創(chuàng)建2個文件夾index和rank，每個文件下分別創(chuàng)建json,js,wxml,wxss文件，此時目錄如下：

雖然不一定4個文件類型都需要用到，但為了之后方便，建議還是先創(chuàng)建好，需要用到的時候就比較方便了，不用再去創(chuàng)建。

首先寫index.js:   (為了模擬循環(huán)數(shù)組，data下面的moivelist還需要多復(fù)制幾份，這里只寫了一份出來，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.'
})
}
})

這里出現(xiàn)了很多on函數(shù)事件，對應(yīng)頁面的生命周期每個過程對應(yīng)的事件，這里暫時先關(guān)注data對象

小程序是以數(shù)據(jù)驅(qū)動的，頁面進(jìn)來的時候通過動態(tài)獲取數(shù)據(jù)，通過{{xxx}}將數(shù)據(jù)綁定，并將數(shù)據(jù)渲染到視圖層，這里先以一個虛擬的data數(shù)據(jù)模擬

然后寫index.wxml文件：

從上面顯示的首頁的圖片來看，主要是1個標(biāo)題，以及下面一個列表，列表用過循環(huán)來渲染出所有的數(shù)據(jù)

標(biāo)題:  標(biāo)題比較簡單，主要是寫css

<view class="head-title">
<text>豆瓣電影top250</text>
</view>

這里主要講下面的列表循環(huán)，可以發(fā)現(xiàn)我們只要寫好列表中的第一個就可以了，其他的通過循環(huán)來展示

列表主要分為左中右三塊，分別為圖片，內(nèi)容，以及評分3塊

<block wx:for="{{moivelist}}">  //循環(huán)渲染，wx:for="{{ xxx }}" 代表循環(huán)js文件里面的data數(shù)據(jù)中的xxx

<view>

//微信循環(huán)時會給出每個項目的內(nèi)容以及每個項目的下標(biāo)，默認(rèn)為item和index，item.imgsrc意為對象的（imgsrc）  key值

圖片：

<image class="moive-img" style="" mode="" src="{{item.imgsrc}}" binderror="" bindload=""></image>

內(nèi)容：

<view class="moive-content">
     <view class="content-titile">
        <text >{{item.title}}</text>
    </view>

    <view class="content-introduce"> 
        <text >{{item.introduce}}</text>
    </view>

    <view class="content-author">
        < text >{{item.author}}</text>
    </view>
</view>

評分：

<text class="content-rank">{{item.rank}}</text>

</view>

</block>

基本都這里wxml就結(jié)束了，樣式主要通過wxss來操作，樣式比較簡單，就不寫了，主要講一下左中右這三塊

通過將左中右這三塊的父級設(shè)置為display:flex;

左邊和右邊都設(shè)置為固定rpx，中間設(shè)置為flex:1。

這樣寫代表中間這一塊的內(nèi)容占滿：左邊和右邊布局后生下來的空間 ，即左右布局好后，剩多少，flex：1就等于多少。

第一節(jié)項目代碼見：demo1

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