必发365乐趣网投手机版[转]灯灯小程序支付手记:仿今日条长(上)

by admin on 2018年10月17日

4、硬件信息

继而上同样篇

 上一样篇稿子被,我们曾好了条久之情报列表、新闻详情功能了,但是还留存有值得优化的地方,以及评论功能没有增长。
 欢迎Star
Github开源地址:https://github.com/winterfeel/Wxapp\_Toutiao
视频教程地址:http://study.163.com/course/introduction.htm?courseId=1003606050
 所以在马上等同首被我们进行以下优化:

  • 下拉刷新、无限加载
  • 评论显示
  • 收藏功能

 说明下干什么非做收藏功能,其实是计划性及用户登陆功能暂时还无开了,包括上评论。原因:

微信小序登陆需要发出appid,appid需要商家资质去申请,每个公司申请之数来限制(好像是30独),每个身份证啊只能最多绑定5个。
虽然网上流传在个人就是申请破产呢得获取appid,但是就是这去了千篇一律糟糕绑定机会,个人建议要不要浪费。所以有些序中之登陆、评论、收藏功能此处暂时未做。

咱俩不再只是被动的给伤害吧,通过这意义,也克主动反击那些扰乱的刀兵。许多单”我”贡献的一次次记,会赞助防骚扰系统重新完善地全面数据,进而于咱们团结享受到又多清静。

率先是首页,即新闻列表

 布局上,顶部一个漂固定的分类条,用横向的scroll-view即可实现。下面是列表,循环渲染每个item即可。

必发365乐趣网投手机版 1

顶部分类效果

分类布局代码如下:

<scroll-view class="segments" scroll-x="true">
  <view wx:for="{{sections}}" class="section {{item.active ? 'active' : ''}}" data-sid="{{item.section_id}}" bindtap="onSectionClicked">
    <text>{{item.name}}</text>
  </view>
</scroll-view>

分拣样式代码如下:

.segments{
  width:100%;
  height:35px;
  background: #f6f6f6;
  white-space: nowrap;
  font-size:15px;
  position: fixed;
  top: 0;
  z-index:1;
}

.section{
  width:20%;
  height:100%;
  text-align: center;
  color:#000;
  display: inline-block;
  line-height: 35px;
}

.section.active{
  color:#d43d3d;
}

在意这边发个active类,就是目前入选的归类,我将书颜色设为了革命,当然你吧足以加个横线。

章列表布局如下:

<!--文章列表-->
<view class="articles">
  <view wx:for="{{articles}}" class="article" data-aid="{{item.article_id}}" bindtap="onArticleClicked">
            <view class="left">
                <view class="title">
                    {{item.title}}
                </view>
                <view class="subTitle">
                    <!--这边可以加副标题-->
                </view>
                <view class="date">
                    <text>{{item.date}}</text>
                </view>
                <view class="cnt">
                    <text>阅读:{{item.read_cnt}}</text>
                </view>
            </view>
            <view class="right">
                <image src="{{item.cover1}}"/>
            </view>
            <view style="clear:both"></view>
        </view>
</view>

Js逻辑代码如下:

var app = getApp()
var sectionData = null
var currentSectionIndex = 0
Page({
  data: {},
  onLoad: function () {
    var that = this
    //获取分类信息
    wx.request({
        url : 'http://你的服务器/news/section',
        data : {},
        success : function(res){
          sectionData = res.data.sections;
          sectionData[0]['active'] = true //默认选中第一个分类
          that.loadArticles(sectionData[0]['section_id'])
          that.setData({
              sections : sectionData
          });
        }
    })
  },
  onSectionClicked: function(e){
    var sid = e.currentTarget.dataset.sid;
    //刷新选中状态
    for(var i in sectionData){
      if(sectionData[i]['section_id'] == sid){
        sectionData[i]['active'] = true
        currentSectionIndex = i
      }
      else
        sectionData[i]['active'] = false
    }
    this.setData({
        sections : sectionData
    });
    //加载文章
    if(sectionData[i]['articles']){
      this.setData({
          articles : sectionData[i]['articles']
      });
    }else{
      this.loadArticles(sid)
    }   
  },
  loadArticles: function(section_id){
    var that = this
    //获取文章列表
    wx.request({
        url : 'http://你的服务器/news/article',
        method: 'POST',
        data : {
          section_id:section_id,
          start_id:0,
          limit:10
        },
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success : function(res){
          var articleData = res.data.articles;
          sectionData[currentSectionIndex]['articles'] = articleData
          that.setData({
              articles : articleData
          });
        }
    })
  },
  onArticleClicked: function(e){
    var aid = e.currentTarget.dataset.aid
    wx.navigateTo({
      url: '/pages/detail/detail?article_id='+aid
    })
  }
})

解释一下,就是打服务器获取分类信息,然后因分类的section_id再去抱分类下的篇章列表,这边照理说是要促成下拉刷新和极端加载的,第一本子暂时无开,所以参数里面start_id和limit我形容很了。
这边我以防备再请求服务器,把每次分类请求了的数码还记录下来了,详情见onSectionClicked事件的拍卖。

顾:POST请求时,header参数要写成’Content-Type’:
‘application/x-www-form-urlencoded’,不然服务器得不至post参数,很奇怪

随即边发个问题是横向的scroll-view不克隐藏滚动条,非常难看,我未曾查到解决办法,希望知晓之恋人留言说下。

末段效果图(数据是自原先开的一个珍藏文化App的数,不要见怪哈哈):

文章列表

总她便在那里,没必要再经历专门去开拓浏览器,搜索XX电话是微是麻烦的流水线。

讲评功能

 虽然非打算开上评论功能了,但是布局我或者加了上来,效果使图:

必发365乐趣网投手机版 2

评说功能图

 评论列表还是用for循环渲染每个item即可,当然就边我加加了一个不怎么细节,当没评论的时会来得一个拖欠提示:

必发365乐趣网投手机版 3

暂无评论

 只需要一个简易的if判断即便可以啊:

    <view wx:if="{{commentList}}">
        <view class="comment" wx:for="{{commentList}}">
            <view class="avatar">
                <image src="{{item.avatar}}" mode="scaleToFill"></image>
            </view>
            <view class="commentInfo">
                <view class="userName">{{item.username}}<view class="time">{{item.time}}</view></view>
                <view class="commentContent"><text class="reply" wx:if="{{item.parent_username}}">回复@{{item.parent_username}}:</text>{{item.content}}</view>
            </view>
        </view>
    </view>
    <view class="noComment" wx:else>
        <text>暂无评论,赶快抢沙发吧!</text>
    </view>
</view>

 这边还有一个细节是,可以展示回复XX。当时以统筹后台的当儿许恢复他人,即评论可以生出一个parent_userid字段,代表你所恢复的之用户的id,当然最终服务器返回的下会回到用户称。
 所以判断下wx:if=”{{item.parent_username}}”
即可得出该评论是直评价或者过来他人的评价。
 其实发表评论的代码我啊勾勒了,很粗略即是一个post请求,但是由于无法登陆,并不曾真正去调用。

鉴于微信没有提供要素得到功能,所以想只要取得评论框里的始末不好直接get,只能于输入框绑定change事件,然后以波里拿内容复制给一个变量才实施。如果发其它办法,欢迎留言指。

正文由科技星河原创,未经允许不可转载,但迎接转发朋友围。

使举行只什么

 首先我们只要确定举行一个哟小程序,我操先开一个死健康的新闻App练练手,样式就模仿头久啦!
 开发分为两不成进行,第一次于好情报列表、内容看这简单个常规功能,不涉及用户交互。第二次到职能,加上评论、收藏等相互效应。
 本文就跟豪门并来打造第一单无用户系统版本。
 应用构架非常简单,就是2个页面:新闻列表、新闻详情。

必发365乐趣网投手机版 4

今日条长截图

 当然样式不肯定要是举行那么复杂先,比如我们就联合1帧封面预览图,暂时无做3轴图的item。

手机和一般游戏机相比,有个很怪的题材无法忽视:随时可能来一个对讲机,等回喽神,游戏就是跪了。

Todo
  • 长3幅图片的item样式
  • 多下拉刷新、无限加载
  • 加用户登陆
  • 搭收藏功能
  • 搭评论功能

 这些职能灯灯会在开发好后持续同豪门大快朵颐,目前源码由于力量不整暂时并未当Github上开源,等召开得了晚我再也一起开源。对了,整个后台系统是故ThinkPHP做的,其实并无为难,有趣味之同班可以自己上学。
Github开源地址:https://github.com/winterfeel/Wxapp\_Toutiao
视频教程地址:http://study.163.com/course/introduction.htm?courseId=1003606050

 

 

灯灯小程序支付手记:仿今日条修(下)

http://www.jianshu.com/p/b17933c238d7

“骚扰拦截”-“游戏不打扰”

总起来源

 至此,一个小头长就算做到了,当然由于缺少失了用户系统,功能肯定是不全面的,理论及吗是毫无用处之。所以真的略程序产品必定不应该是纯粹的始末展示,交互一定是单可怜要紧之环。
 我之代码可能于多地方还无足够严谨、不够细致,大家只要急需参考欢迎访问Github给个star。
 Github开源地址:https://github.com/winterfeel/Wxapp\_Toutiao
 我再分享的凡活的筹划过程,所以有些序一定会带动被自身多乐趣。后续我会继续打造还多多少序,并且发表片科目,喜欢的情人可以连续关注!
 注:此文为灯灯原创,可转载,注明出处即可。
 灯灯微信,添加请注明理由。小序商城解决方案,最低1000首届于即可拥有,欢迎联系!

视频教程地址:http://study.163.com/course/introduction.htm?courseId=1003606050

 

“清理加速” – “手机瘦身” – “微信清理”

总结

 至此,一个概括的峰长达的尽管支出了了。看起非常容易但是其实做的当儿会遇见多莫名的bug,主要缘由还是微信提供的那么同样套东西问题最为多矣。例如:不支持富文本、不支持外链、滚动条未克隐藏、百分比布局有时候出题目……
 当然我深信之后微信也会一次次迭代一次次修复加强的,所以啊非用最好操心,毕竟微信小程序的观点就是简单,设计得极其复杂就不曾意思了。

被这效果后,当家人收到诈骗电话还是短信时常,我们拿收到提醒。

正文转自:http://www.jianshu.com/p/a1e0b8abb12d

“(点击左上角菜单)” – “硬件信息”

动手开发

1、号码举报

然后是文章详情

 这边我当然要舍弃去开了,因为当时举行后台接口的下文章content是盖html代码形式记录之,然后客户端直接webview去分析。但是本微信小序并无支持富文本、也不支持iframe、也非支持外链视频。但是有时之中自己看见了一个神器:
wxParse微信小程序富文本分析 Github
正好实现了自我要之富文本解析功能,而且图片还从带懒加载、自带全屏浏览功能,感谢作者。

用详情页的JS代码非常简单:

var WxParse = require('../../wxParse/wxParse.js');//引入解析库
var article_id = ''
Page({
  data:{},
  onLoad:function(options){
    var that = this
    article_id = options.article_id // 获取文章id
    wx.request({
        url : 'http://你的服务器/news/detail',
        method: 'POST',
        data : {
          article_id: article_id
        },
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success : function(res){
          var _content = res.data.article['content']
          that.setData({
              article: res.data.article
          });
          WxParse.wxParse('content', 'html', _content, that,0);//富文本解析
        }
    })
  }
})

布局代码中:

<!--引入库-->
<import src="../../wxParse/wxParse.wxml"/> 
<!--...其他布局省略-->
<!--解析生成-->
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>

自然别忘了当体制代码里也引入:

@import "/wxParse/wxParse.wxss";

末尾效果图,点击图片还支持全屏浏览,非常人性化:

必发365乐趣网投手机版 5

详情页

横流:腾讯手机管家 iOS版和安卓版 功能存在必然的距离,请大家利用时只顾。

刷新优化

 微信小程序原生提供了下拉刷新和加载重多事件,这或多或少要么比人性化的。
 首先得在配备文件,即页面.json,如index.json添加允许下拉刷新:

{
    "enablePullDownRefresh":true
}

下一场在js代码中丰富响应事件:

//下拉刷新
  onPullDownRefresh: function(){
    this.loadArticles(sectionData[currentSectionIndex]['section_id'],false)
  },
  //加载更多
  onReachBottom: function () {
    this.loadArticles(sectionData[currentSectionIndex]['section_id'],true)
  }

顾自己管加载重多与下拉刷新所用的请方法勾勒成了一个函数:

loadArticles: function(section_id,ifLoadMore) //分类id、是否是加载更多

斯ifLoadMore起分别的打算,如果是false,则将赢得的数码直接调换;如果是true,则用收获的多少多在初的多寡后。

          if(ifLoadMore){
            //加载更多
            if(articleData){
              sectionData[currentSectionIndex]['articles'] = sectionData[currentSectionIndex]['articles'].concat(articleData)//追加
            }else{
              wx.showToast({
                title: '暂无更多内容',
                icon: 'loading',
                duration: 2000
              })
            }   
          }else{
            sectionData[currentSectionIndex]['articles'] = articleData//刷新
          }

 这样就是未待分开写2种植要代码了。当然我们需要加上一个loading动画,有一样接触我不亮的凡微信把loading动画当初矣组件…只会强行用一个hidden参数来转它的藏匿和显示状态,太坑了。
 有同学说非是发出showToast吗?是的,showToast最多足显示10秒,虽然理论及是够了,但是这么总是很蛋疼,并无可知实际地去控制显示因此。

科技星河:发现科技新在,不止于APP,迎关注 🙂

描绘于前头

 新的均等年,祝大家新年快乐!当然对于程序员来说,新的同年,也如有新的改。因此灯灯决定凑热闹编写微信小序啦!
 上同一首文章《记一差稍程序支付过程》备受,灯灯大致写了生团结率先破支付小程序的感受及流程。这等同赖灯灯会详细记录下团结做一个多少序的笔触、遇到的题材、涉及到的代码等和豪门享受。
  
视频教程地址:http://study.163.com/course/introduction.htm?courseId=1003606050

为了更宁静的存,手机无论家类的施用就是来也咱缓解者防骚扰问题。管家类的APP不丢掉,这次科技星河要享用的是”腾讯手机管家“这款应用。

……

2、网络测速

这次,科技星河会讲一些它们平时不常用,但用起来非常有益之功能点。既然管家在大哥大上,为什么未更充分发挥它的价值啊?一起看吧
🙂

开之意义,我们玩游戏的早晚便可知免被打扰,来电会叫直接挡下来。

本条效应于家里的长辈或者小异常有因此,他/她们或无极端会分辨出骗信息,但是我们好。尤其是指向远离比较远的情侣,这为总算一栽来自远方的保障吧。

5、亲友防诈骗

及时是特别为手机略微白用户选的同样枚功能。假如想再度了解一些和谐的手机,这里列有了详实的硬件信息,手机型号、系统版本、处理器、尺寸、屏幕大小、分辨率等等。

除了防电话骚扰的万分题目,像安卓手机的平安检测、空间清理加速等力量吗是管家APP的大卖点。这些作用也人口所熟知,就不再多说。

顿时并无是专程的效力,而是一个时常因此对讲机清单,用底会见老少,但也是个待之下大便宜的东东。

8、微信空间清理

“您好呀,请问有没有来借款的用吗?”

9、日历广告清理

“喂,哪位?”(期待脸)

当您的无绳电话机空间不足时,可以品尝用这个效果清理一下微信,删除不在乎的那些内容。尽管微信自带清理功能,但不曾此的直观、好用。

3、Wi-Fi体检

6、谣言骗局粉碎机

这边比人性化的地方是,除了直接堵住所有来电,也堪选择独自接听通讯录来电或者白名单里之对讲机。

“网络检测” – “立即测速”

“……”(内心草泥马脸)

当你的无绳电话机上网速度极慢,也许你晤面猜疑是手机的问题要么网络的题材,这时测测网速就一目了然。

用她,可以检查自己所并的凡未是钓鱼或冒用伪造等高风险
Wi-Fi。你还能够来看有的连天此 Wi-Fi 的装置,以确认是否有蹭网选手。

“骚扰拦截”-“号码查询”-“常用号码”

类之情大概我们还经历过,很多人口跟科技星河一样,对这些广告推销或诈骗电话深恶痛绝。

“骚扰拦截”-“日历广告清理”

名目繁多心理活动快速闪过,

当接过骚扰电话,我们可以采用”号码举报”功能前电号码标记,可选类型有”广告推销”、”房产中介”等。

“中奖了?”

科技星河非常喜欢是作用,不仅有些”解气”的表示,更得协助及再次多人。

“外卖到了?”

*
*

一经有关于这款应用的外想法,或者好打好用之APP,也欢迎您留言告知我们。


对这些污染源电话,如果老是要靠接通后的自己人工识别,就尽浪费生命。

“匿名表白?!”

“前两天在线购物的快递到了?”

公吧足以为此其来认可,自家的宽带是无是当真的能够上购买套餐的宽带级别。要是100MB/s的宽带始终就来只10MB/s的程度,你虽好跟运营商电话谈论感情了。

科技星河还是如重复谈同样句被说烂的说话,在外界尽量不要连接来路不明的Wi-Fi,甚至来路明的也硬着头皮少用,尤其是安卓设备,为投机之安康考虑。有的技术(大)公司真正好好难看。

10、常用号码

如上就是科技星河这次分享的装有内容,希望对大家有扶持,或者感受及一点点之童趣吧。

“骚扰拦截” – “号码举报”

文/ 科技星河

手机突然响起,一个生电话从来,接还是休接入?

这里见面列有大方热传的无稽之谈辟谣内容,你可因自己的景况展开一定话题之选,比如小发生长者、家发生儿童、正在上、喜欢网购等。

除此之外修改iCloud 账号邮箱或关闭 iCloud
日历同步,清理日历广告之行即使付给这意义吧,简单又保证。

这些广告以日历里,你还不可知随意操作,比如系统底层的几只功能按钮,点击后再行麻烦:广告商就知道这是个活人,更疯狂地推送。。让人口感到就世界满满的套路陷阱,防不胜防。

“骚扰拦截” – “亲友防诈骗”

“骚扰拦截” – “谣言骗局粉碎机”

咱每天会一再使用微信,抛开像相似应用程序在运转中发生的杂质,就独自说大气之闲谈信息,也会占用多空中,尤其是局部粗鄙还狂刷屏之群消息。

当我们看看朋友围里片谣言在疯传,特别是父母辈他/她们大量中转类似的音信经常,可能就是见面深刻感受及这功效的必要性。

“网络检测” – “Wi-Fi体检”

日历广告就是苹果手机用户无声之疼痛,iPhone
的原生日历竟无故弹出废物信息,简直莫名其妙。

不用啊额外的工具,用之力量就是得解各地网络的快慢如何。它见面显有网络延迟、下载速度、上传速度,并汇总评估出目前带富级别。

尽管我们好一直打手机自带的”设置”里找到相关参数,但是,操作过程还是麻烦了,这里更利于。当然,平时基本未见面为此到它们。

再说像咱这些有心理洁癖的人头,只是立刻挂掉它们还无太好听,接通之前便忽略甚至屏蔽掉才是实在解决之道。

7、游戏不打扰

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图