美文网首页
微信小程序开发日记(2)

微信小程序开发日记(2)

作者: 一缕风小童鞋 | 来源:发表于2019-03-28 04:06 被阅读0次

    嗨嗨(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 

    相关文章

      网友评论

          本文标题:微信小程序开发日记(2)

          本文链接:https://www.haomeiwen.com/subject/dkffbqtx.html