嗨嗨（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是通过
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">
这个来切换的，当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
网友评论