智_超:小程序进阶实战进阶:豆瓣电影demoJS逻辑

大括号由{{}}用来绑定JS和wxml之间的事件，比如数据更新、显示规则等等。

然后我们需要参考这个机制来更新图像和文本控件的数据。

很高兴知道这些。剩下的让JS来做。

现在，分析步骤，(前三个步骤是集成的，第四个步骤分为两部分。)

1、

首先，必须有一个向网络发送请求的功能。这一步取决于发送请求的官方文件。

2、

注意文档中的三个关键词，url、页眉、成功、

Url，更不用说网络请求了，不知道的一定要先知道。

Header，一个不熟悉HTTP协议的朋友，在文档中看到这个属性的时候会很困惑。他解析网页中的内容，比如文档中header方法的代码：‘content-type’:‘application/json’将内容解析成JSON格式。如果您将其更改为“内容类型”:“应用程序/xml”，它会将网页内容解析为xml格式。现在你应该明白了，json是微信自己指定的文件格式，所以我们只要按照它的编写方法就可以了，等等都会直接复制使用。

成功，一个读取数值数据的函数，(阅读文档时看它的类型函数)

3.(这一步的操作对后面理解有点帮助)

我们需要分别使用他的电影API，即Hot Show、Top250、电影搜索和三个界面。

https://api.douban.com/v2/movie/in_theaters视图界面被列为高亮显示。因为这个页面的内容太复杂了，我们可以做一些简化。

打开此链接，按F12出现调试框，复制页面中的所有内容，然后输入var a=将复制的内容粘贴到调试框中的等号后面，输入，然后输入一个回车。现在这个页面的内容已经组织好了。

4、

考虑到以上步骤，最后，我们应该考虑数据读取和数据格式处理(这里的格式不同于header，我们将数据格式化以供用户查看)。

所以：我们需要两个函数。一种是遍历网络数据，另一种是格式化数据。因为这两个函数也可以用于top250的后续页面，所以我使用封装来封装它们，用于以下逻辑。

5、

关联wxml中的数据。

考虑到这四个步骤，我们开始研究JS代码的实现。恐怕你晕倒了！别担心。我认为您会更容易看到前面步骤的代码。)

因为前三步相对简单，让我们从第四步的两个功能开始：

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