UDN-企业互联网技术人气社区

板块导航

浏览  : 1435
回复  : 0

[干货] 灯灯小程序开发手记:仿今日头条(上)

[复制链接]
开花包的头像 楼主
  写在前面

  新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变。因此灯灯决定凑热闹编写微信小程序啦!

  上一篇文章《记一次小程序开发过程》中,灯灯大致写了下自己第一次开发小程序的感受和流程。这一次灯灯会详细记录下自己制作一个小程序的思路、遇到的问题、涉及到的代码等和大家分享。

  要做个什么

  首先我们要确定做一个什么小程序,我决定先做一个很常规的新闻App练练手,样式就模仿头条啦!

  开发分为两次进行,第一次完成新闻列表、内容阅读这两个常规功能,不涉及用户交互。第二次完善功能,加上评论、收藏等互动功能。

  本文就和大家一起来制作第一个无用户系统版本。

  应用构架非常简单,就是2个页面:新闻列表、新闻详情。

7.png

  今日头条截图

  当然样式不一定要做那么复杂先,比如我们就统一1幅封面预览图,暂时不做3幅图的item。

  动手开发

  首先是首页,即新闻列表

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

8.png

  顶部分类效果

  分类布局代码如下:

  1. <scroll-view class="segments" scroll-x="true">
  2.   <view wx:for="{{sections}}" class="section {{item.active ? 'active' : ''}}" data-sid="{{item.section_id}}" bindtap="onSectionClicked">
  3.     <text>{{item.name}}</text>
  4.   </view>
  5. </scroll-view>
复制代码


  分类样式代码如下:

  1.   .segments{

  2.   width:100%;

  3.   height:35px;

  4.   background: #f6f6f6;

  5.   white-space: nowrap;

  6.   font-size:15px;

  7.   position: fixed;

  8.   top: 0;

  9.   z-index:1;

  10.   }

  11.   .section{

  12.   width:20%;

  13.   height:100%;

  14.   text-align: center;

  15.   color:#000;

  16.   display: inline-block;

  17.   line-height: 35px;

  18.   }

  19.   .section.active{

  20.   color:#d43d3d;

  21.   }
复制代码


  注意这边有个active类,就是当前选中的分类,我把字体颜色设为了红色,当然你也可以加个横线。

  文章列表布局如下:

  1. <!--文章列表-->
  2. <view class="articles">
  3.   <view wx:for="{{articles}}" class="article" data-aid="{{item.article_id}}" bindtap="onArticleClicked">
  4.             <view class="left">
  5.                 <view class="title">
  6.                     {{item.title}}
  7.                 </view>
  8.                 <view class="subTitle">
  9.                     <!--这边可以加副标题-->
  10.                 </view>
  11.                 <view class="date">
  12.                     <text>{{item.date}}</text>
  13.                 </view>
  14.                 <view class="cnt">
  15.                     <text>阅读:{{item.read_cnt}}</text>
  16.                 </view>
  17.             </view>
  18.             <view class="right">
  19.                 <image src="{{item.cover1}}"/>
  20.             </view>
  21.             <view style="clear:both"></view>
  22.         </view>
  23. </view>
复制代码


  Js逻辑代码如下:

  1.   var app = getApp()

  2.   var sectionData = null

  3.   var currentSectionIndex = 0

  4.   Page({

  5.   data: {},

  6.   onLoad: function () {

  7.   var that = this

  8.   //获取分类信息

  9.   wx.request({

  10.   url : 'http://你的服务器/news/section',

  11.   data : {},

  12.   success : function(res){

  13.   sectionData = res.data.sections;

  14.   sectionData[0]['active'] = true //默认选中第一个分类

  15.   that.loadArticles(sectionData[0]['section_id'])

  16.   that.setData({

  17.   sections : sectionData

  18.   });

  19.   }

  20.   })

  21.   },

  22.   onSectionClicked: function(e){

  23.   var sid = e.currentTarget.dataset.sid;

  24.   //刷新选中状态

  25.   for(var i in sectionData){

  26.   if(sectionData[i]['section_id'] == sid){

  27.   sectionData[i]['active'] = true

  28.   currentSectionIndex = i

  29.   }

  30.   else

  31.   sectionData[i]['active'] = false

  32.   }

  33.   this.setData({

  34.   sections : sectionData

  35.   });

  36.   //加载文章

  37.   if(sectionData[i]['articles']){

  38.   this.setData({

  39.   articles : sectionData[i]['articles']

  40.   });

  41.   }else{

  42.   this.loadArticles(sid)

  43.   }

  44.   },

  45.   loadArticles: function(section_id){

  46.   var that = this

  47.   //获取文章列表

  48.   wx.request({

  49.   url : 'http://你的服务器/news/article',

  50.   method: 'POST',

  51.   data : {

  52.   section_id:section_id,

  53.   start_id:0,

  54.   limit:10

  55.   },

  56.   header: {

  57.   'Content-Type': 'application/x-www-form-urlencoded'

  58.   },

  59.   success : function(res){

  60.   var articleData = res.data.articles;

  61.   sectionData[currentSectionIndex]['articles'] = articleData

  62.   that.setData({

  63.   articles : articleData

  64.   });

  65.   }

  66.   })

  67.   },

  68.   onArticleClicked: function(e){

  69.   var aid = e.currentTarget.dataset.aid

  70.   wx.navigateTo({

  71.   url: '/pages/detail/detail?article_id='+aid

  72.   })

  73.   }

  74.   })
复制代码


  解释一下,就是从服务器获取分类信息,然后根据分类的section_id再去获取分类下的文章列表,这边照理说是要实现下拉刷新和无限加载的,第一版暂时不做,所以参数里面start_id和limit我写死了。

  这边我为了防止重复请求服务器,把每次分类请求完的数据都记录下来了,详情见onSectionClicked事件的处理。

  注意:POST请求时,header参数要写成'Content-Type': 'application/x-www-form-urlencoded',不然服务器得不到post参数,很奇怪

  这边有个问题是横向的scroll-view不能隐藏滚动条,非常难看,我没有查到解决办法,希望知道的朋友留言说下。

  最终效果图(数据是我以前做的一个藏文化App的数据,不要见怪哈哈):

9.png

  文章列表

  然后是文章详情

  这边我本来要放弃去做了,因为当时做后台接口的时候文章content是以html代码形式记录的,然后客户端直接webview去解析。但是现在微信小程序并不支持富文本、也不支持iframe、也不支持外链视频。但是偶然间我看见了一个神器:

  wxParse微信小程序富文本解析 Github

  正好实现了我需要的富文本解析功能,而且图片还自带懒加载、自带全屏浏览功能,感谢作者。

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

  1.   var WxParse = require('../../wxParse/wxParse.js');//引入解析库

  2.   var article_id = ''

  3.   Page({

  4.   data:{},

  5.   onLoad:function(options){

  6.   var that = this

  7.   article_id = options.article_id // 获取文章id

  8.   wx.request({

  9.   url : 'http://你的服务器/news/detail',

  10.   method: 'POST',

  11.   data : {

  12.   article_id: article_id

  13.   },

  14.   header: {

  15.   'Content-Type': 'application/x-www-form-urlencoded'

  16.   },

  17.   success : function(res){

  18.   var _content = res.data.article['content']

  19.   that.setData({

  20.   article: res.data.article

  21.   });

  22.   WxParse.wxParse('content', 'html', _content, that,0);//富文本解析

  23.   }

  24.   })

  25.   }

  26.   })
复制代码


  布局代码中:

  1. <!--引入库-->
  2. <import src="../../wxParse/wxParse.wxml"/>
  3. <!--...其他布局省略-->
  4. <!--解析生成-->
  5. <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
复制代码

  当然别忘了在样式代码里也引入:

  1.   [url=home.php?mod=space&uid=45209]@Import[/url] "/wxParse/wxParse.wxss";
复制代码

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

a.png

  详情页

  总结

  至此,一个简单的头条的就开发完了。看起来很容易但实际做的时候会遇到很多莫名的bug,主要原因还是微信提供的那一套东西问题太多了。例如:不支持富文本、不支持外链、滚动条不能隐藏、百分比布局有时候有问题......

  当然我相信之后微信也会一次次迭代一次次修复加强的,所以也不用太担心,毕竟微信小程序的理念就是简单,设计得太复杂就没有意义了。

  Todo

  增加3幅图片的item样式

  增加下拉刷新、无限加载

  增加用户登陆

  增加收藏功能

  增加评论功能

  这些功能灯灯会在开发完成后继续和大家分享,目前源码由于功能不完整暂时没有在Github上开源,等做完后我再一起开源。对了,整个后台系统是用ThinkPHP做的,其实并不难,有兴趣的同学可以自己学学。

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部