脚本之家

从零开始写个一个豆瓣电影小程序

上一篇
微信小程序之ES6与事项助手源码
下一篇
微信小程序!火车票查询源码

微信小程序内测至今也有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

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

这里主要讲下面的列表循环,可以发现我们只要写好列表中的第一个就可以了,其他的通过循环来展示

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

<block wx:for="{{moivelist}}">  //循环渲染,wx:for="{{ xxx }}" 代表循环js文件里面的data数据中的xxx
<view>
//微信循环时会给出每个项目的内容以及每个项目的下标,默认为item和index,item.imgsrc意为对象的(imgsrc)  key值
图片:
<image class="moive-img" margin: 0px; padding: 0px;"/>     <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就结束了,样式主要通过wxss来操作,样式比较简单,就不写了,主要讲一下左中右这三块

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

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

这样写代表中间这一块的内容占满:左边和右边布局后生下来的空间 ,即左右布局好后,剩多少,flex:1就等于多少。

第一节项目代码见:demo1

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

以上就是从零开始写个一个豆瓣电影小程序的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

从零开始写个一个豆瓣电影小程序 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
微信小程序之ES6与事项助手源码
下一篇
微信小程序!火车票查询源码

您可能感兴趣的小程序源码教程

小程序源码

从0开始一步一步用Laravel5.2集成原生微信支付

目前微信支付集成到框架里面有太多的坑了,项目中刚好遇到一个,把经验和重要的坑写出来,一步一步从0开始,大家有什么不会的可以留言。1.首先,我们要去官方下载人家做好的DEMO,链接是https://pay.weixin.qq.com/w

小程序源码

微信小程序知乎日报完整版源码

小程序刚刚出来不就就火爆了整个前端圈,咱也不干落后的研究了一下,网上找了个”知乎日报API接口“做了个小项目练手,基本上还算完整的实现了整个项目,欢迎starfork,由于小程序对HTML的不支持,详情页做了些简单的过滤

小程序源码

仿QQ微信小程序!我趟过的微信小程序开发坑

我们都知道微信小程序第一天发布内测版,并没有公开官方开发文档和开发工具,但是这阻止不了技术人的好奇心,通过破解以及先安装旧版本再用新版本覆盖安装一系列流程,即可体验微信小程序的魅力,当时为了使更少的人

小程序源码

微信小程序!火车票查询源码

写在最前面微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了。我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心耕耘产品的阶段了,至少是静下

小程序源码

从零开始写个一个豆瓣电影小程序

微信小程序内测至今也有20天左右,也有很多人作出了很多不错的DEMO并发布到github了。前几日看见了豆瓣电影这个demo,感觉很不错,也跟着做了一个,作为复习巩固文档API用。

小程序源码

微信小程序之ES6与事项助手源码

由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中。好久没有写关于微信小程序的随笔了

小程序源码

微信小程序之知乎日报源码

上一次的《微信小程序之小豆瓣图书》制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识。而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多。在我编写这个DEMO之前,