小程序进价(2)豆瓣电影_JS逻辑篇

从上一篇小程序进阶(1)豆瓣电影_布局搭建中我们知道了

双大括号是{{}}用来JSwxml绑定事件的,比如,数据更新,显示规则,等等的一些有规则有章法的操作。

那么我们就需要引用这种机制,为我们的imagetext控件做数据更新的操作。

很好知道这点,后面的事情都交给JS去完成。

现在开始,分析步骤,(前面三步为一体,第四步则分出来讲。)

1

首先要有一个函数用来向网络发送请求这一步看官方文档发送请求

2

关注文档中的三个关键字,url、header、success,

url,就不多说了网络请求,不了解的必须先了解一下

header,不熟悉HTTP协议的朋友,在看到文档中这个属性时一定会迷惑看的云里雾里的,他是将网页中的内容进行解析比如文档中的 header 方法中的代码:‘Content-Type‘:‘application/json‘ 是把内容解析为json格式的,如果把它换成‘Content-Type‘:‘application/xml‘ 那么它就会将网页的内容解析为xml格式的,现在你应该明白了,json是微信自己指定的文件格式,我们按照它的写法就可以了,so等会直接复制过来使用。

success,读取数数据用的函数、(看文档时看他的类型Function)

3、(这一步的操作对后面的理解有些许帮助)

豆瓣电影API 我们分别要使用到他的 , 正在热映 ,Top250 , 电影搜索,三个接口。

https://api.douban.com/v2/movie/in_theaters 查看接口 以正在热映为列 由于此页面的内容太复杂,我们可以做一些简化

打开此链接,按F12出现调试框,将页面中的所有内容复制,而后在调试框中输入 var a = 将复制的内容粘贴在等号后面,回车,然后输入 a 回车,现在此页面的内容就有条理了。

4

有了以上步骤思路,最后要想到,数据的读取,以及数据格式处理(这里的格式化与header不同,我们是将数据格式化编排给用户看的)。

so:我们需要两个函数,一个用来循环遍历读取网络数据,另一个则把数据格式化。由于这两个函数的也可以为后面top250的页面使用,所以我使用封装把他们俩封装起来供后面的逻辑使用。

5、

把数据在wxml中进行关联。



有了这四步的思路,我们开始看JS代码的实现。(我怕你已经晕了!别急有了前面的步骤做铺垫我想你看起代码来会更得心应手。)

由于前三步相对简单所以先从第四步的两个函数开始说 :

在Utils中创建subjectUtills.js (文件名不是固定的。)

接下来在 写第一个循环获取数据的函数。

现在来写数据格式的函数,由于代码有点多就想着给你节约点时间下面给出可复制的文字。

// 获取数据并格式

function provessSubject( subject ) {

//电影名

var title = subject.title;

//导演信息

var directors = subject.directors;

var directorStr = "";

for( var index in directors ) {

directorStr = directorStr + directors[ index ].name + " / ";

}

if( directorStr != "" ) {

directorStr = directorStr.substring( 0, directorStr.length - 2 );

}

//演员信息

var casts = subject.casts;

var castStr = "";

for( var index in casts ) {

castStr = castStr + casts[ index ].name + " / ";

}

if( castStr != "" ) {

castStr = castStr.substring( 0, castStr.length - 2 );

}

//类型信息

var genres = subject.genres;

var genreStr = "";

for( var index in genres ) {

genreStr = genreStr + genres[ index ] + " / ";

}

if( genreStr != "" ) {

genreStr = genreStr.substring( 0, genreStr.length - 2 );

}

//发行的年份

var year = subject.year;

//将数据格式化

var text = "名称:" + title + "\n导演:" + directorStr + "\n演员:" + castStr + "\n类型:" + genreStr + "\n上映年份:" + year + "(中国大陆)"

//拿到格式化的数据

subject.text = text;

}

模块化(封装) 最后不要忘记封装

完成了这两个函数,现在我们来写网络请求的逻辑代码

第五步,完成wxml中的数据关联。

注意 {{item.images.medium}} 这串代码 和  {{item.text}} 后面细讲。这里添加了block循环和loading组件。

讲一下{{item.images.medium}} , 而 {{item.text}}应该不用多讲就是我们格式化的数据。

使用第三步的操作 你会得到这样的页面,看了之后你应该就不明觉厉了,

首页差不多就写好了现在看一下效果怎么样。

写到这里一个展示区差不多就写好了,后面还要继续深入。

时间: 2024-11-03 04:37:12

小程序进价(2)豆瓣电影_JS逻辑篇的相关文章

21小时精通微信小程序开发(仿猫眼电影App、微信小程序问答)|微信小程序开发视频教程

21小时精通微信小程序开发(仿猫眼电影App.微信小程序问答)网盘地址:https://pan.baidu.com/s/1GTpPX4A1U-w_3i6k7lLztQ 密码: 5pcz备用地址(腾讯微云):https://share.weiyun.com/5pzgU1y 密码:nmjyb8 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"×××"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

Python小爬虫——抓取豆瓣电影Top250数据

写LeetCode太累了,偶尔练习一下Python,写个小爬虫玩一玩~ 确定URL格式 先找到豆瓣电影TOP250任意一页URL地址的格式,如第一页为:https://movie.douban.com/top250?start=0&filter=,分析该地址: https:// 代表资源传输协议使用https协议: movie.douban.com/top250 是豆瓣的二级域名,指向豆瓣服务器: /top250 是服务器的某个资源: start=0&filter= 是该URL的两个参数,

小程序入门(0)项目创建篇

已经创建项目的可以看我另一篇讲解 小程序入门讲解 (1)项目结构篇. 官方下载地址 安装后扫描二维码登入. 添加项目 你应该是没有APPID的 选择无APPID 会缺少一项功能后面讲解(目前只发现一项). 好了项目创建好了,有点过分简单了点是不是,但这页面不是我自己创建的就很不舒服,特别想自己创建一个页面,所以去认识项目的结构,我在另一篇讲解的还算清晰.小程序入门讲解 (1)项目结构篇. 讲一下没有APPID 和 有APPID 的功能缺失在哪里,先看图然后自己做一下对比 目前我还没有发现其他的不

微信小程序购物商城系统开发系列-工具篇

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

微信应用号(小程序)开发IDE配置(第一篇)

2016年9月22日凌晨,微信宣布“小程序”问世,当然只是开始内测了,微信公众平台对200个服务号发送了小程序内测邀请.那么什么是“小程序”呢,来看微信之父怎么说 看完之后,相信大家大概都有些明白了吧,对于开发者来说或许都有些小激动吧,毕竟多关注一些新东西没什么不好.那么问题是“小程序”只有200个内测账号,怎么办?还好,天朝的人才太多了,在消息发布后的几小时内网上已经出了IDE的破解版,废话不多说,看配置步骤: 1. IDE下载 MAC版链接: http://pan.baidu.com/s/1

微信小程序豆瓣电影项目的改造过程经验分享

在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和改进的地方进行讨论介绍,希望给大家提供一个参考的思路,本篇随笔是基于前人小程序的项目基础上进行的改进,因此在开篇之前首先对原作者的辛劳致敬及感谢. 1.豆瓣电影接口的小程序项目情况 豆瓣电影接口提供了很多相关的接口给我们使用,豆瓣电影接口的API地址如下所示:https://developers.d

神技!微信小程序(应用号)抢先入门体验(附最新案例-豆瓣电影)持续更新

微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.g

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教