微信小程序开发日记（2）

嗨嗨（vtuber式招呼），各位朋友们，在鸽了N久之后我回来继续写日记啦。上篇日记虽然有2个转发和3个收藏，可是得不到各位的反馈啊（硬币和评论你们在哪？）。

咳咳，现在进入正片。

上次的日记中，我教大家安装了微信小程序开发工具，教大家用一个按钮获取新闻API。

今天呢，我们进行一波史诗级加强，添加一个导航栏，并且每一个新闻可以点进去，每一类别新闻可以下拉刷新，刷新后的新的新闻数据会叠加在旧新闻的上方，具体的话如下图。

忘记说了，如果各位注册了自己的小程序码，想在自己的手机上运行这个小程序的话，需要点击开发工具的上方“真机调试”。而且要在小程序后台网址信任添加你购买的新闻api网址。

如果没有在后台添加网址且在开发者工具里勾选了“不校验合法域名的话”，在开发者工具的编译查看效果是没有问题的，但是手机直接普通调试是获取不到新闻数据的，因为你用电脑的网络访问新闻API此时“不校验第三方网址”，手机用的是蜂窝数据（连wifi也没用），解决方法就是点真机调试。

如果在后台添加了网址信任，过半个小时，手机数据也能获取新闻API数据了。

如果你想分享这个小程序给朋友的话（是分享不了的，真机调试，不是你的账号也无法调试），还需要进一步的实名小程序，比较麻烦，所以还是自己用吧。

又多说了一些东西╮(╯▽╰)╭   看图：

emmm再补充一个东西，这个小程序的标题栏在这里修改。

那么我们先来讲新闻内容点击，进入详情界面吧。

上次的日记中我谈到了navigator url这个东西，我们就是利用这个，新建一个网页，把我们的新闻详情的链接地址用url传到新建的网页中去，执行打开。这个“国内”tab结构如下图

记得在json里添加创建的信息

新建的网页，项目结构如图

新建了一个web文件夹和index文件夹平级

在新的文件夹新建网页的时候，会一次性生成4个文件，js，json，wxml，wxss

现在来讲“国内tab”里的navigator url

navigator url="../web/newsweb?weburl={{item.url}}"

由于web文件夹和index文件夹平级所以，地址开头是  ../

？这个符号后面写传输过去的变量名和变量值，此时的变量名是weburl，值为index.js里data里的{{item.url}}，这个url是api返回的具体新闻数据，相当于res.data.result.data.url

我们用navigator url传过去给newsweb，所以要在newsweb.js里写接收方法

此时的function(options)里的options就包含着刚才传过去的数据变量weburl，利用setData方法更新newsweb.js的data数据，然后在newsweb.wxml里写对应的结构。

你没有看错，这个wxml里就只有这一行，我们利用web-view这个方法打开一个内置的浏览器，跳转我们想要的网页。

当我们在index.wxml里点击一个新闻时，触发navigator url，此时界面跳转到了newsweb.wxml并且newsweb.js获得了数据，利用web-view内置打开了新闻网页（这个网页是外来的，就和你手动点击uc之类的浏览器看新闻一样，所以是有广告植入的，但是不同的是可以内置打开这个网页，通过小程序标题栏左侧的箭头返回）

接下来讲这个tab切换。

这一次我们不能像上次日记那样开发写一个结构，因为上一次我们只有一个按钮获取一类新闻，这次我们有5个tab有5种新闻。（当然一种也可以，只不过我比较懒，复制粘贴最快了233）在我的项目中panel结构是在tab下的，你可以只写一个panel在tab外，然后通过判断点击哪个tab就直接覆盖data里的新闻类型数据就OK了。

这种tab是通过

这个来切换的，当data里的activeIndex != 1时这个tab结构里的东西就显示。

利用这个e.currentTarget.id获取点击的值，type修改新闻请求类型

我们利用onPullDownRefresh这个方法来下拉刷新，记得在index.json里添加下拉刷新的权限开放。

if ((that.data.list_data.title) != (res.data.result.data.title))

可以看到，在下拉刷新时，我们请求一次新闻数据，判断data里的数据和新返回的数据随机一个是否相同（30个新闻的顺序是固定的，随便判断一个就好了），如果相同就wx.showToast提示“数据已是最新”，如果不同我们就用concat方法把新的数据连接在旧数据后面。

但是有一个问题如果数据顺序是（大娃，二娃，三娃）concat之后就会出现（大娃，二娃，三娃，四娃，五娃，DIO）

那么在加载新闻的时候，虽然把数据加到了原来的数据里，可是显示新闻的顺序还是从大娃开始到dio，用户需要拉到30个以后才能看到新的新闻数据。

因此在concat之后，需要用reverse()这个方法调转顺序，然后我们就能看到DIO突然出现在了第一位，reverse之后数据为（DIO，五娃，四娃，三娃，二娃，大娃），当然如果你有强迫症的话，你可以先reverse旧数据再concat到新数据后面。

大概就讲这些了。

原项目链接：

链接：https://pan.baidu.com/s/1u6zI-e4MB3PAHMem3I1dOg 提取码：27q5