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

写于前

 新的一模一样年,祝大家新年快乐!当然对于程序员来说,新的均等年,也使产生新的更改。因此灯灯决定凑热闹编写微信小序啦!
 上同首文章《记一差稍序支付过程》饱受,灯灯大致写了产自己首先糟支付小程序的感触与流程。这同样赖灯灯会详细记录下自己打造一个不怎么序的思路、遇到的题目、涉及到的代码等与豪门享用。
  
视频教程地址:http://study.163.com/course/introduction.htm?courseId=1003606050

若举行只什么

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

json 1

今天条长长的截图

 当然样式不自然要是开那么复杂先,比如我们尽管合1轴封面预览图,暂时不举行3幅图的item。

动手开发

率先是首页,即新闻列表

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

json 2

顶部分类效果

分类布局代码如下:

<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的数据,不要见怪哈哈):

文章列表

然后是文章详情

 这边我当然要放弃去开了,因为及时开后台接口的时文章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";

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

json 3

详情页

总结

 至此,一个简短的条长达之就算出了了。看起非常易但是实则做的早晚会逢不少莫名的bug,主要缘由要微信提供的那无异法东西问题最多了。例如:不支持富文本、不支持外链、滚动条不克隐藏、百分比搭架子有时候出问题……
 当然我信任以后微信为会见一次次迭代一次次修复加强之,所以啊非用极担心,毕竟微信小程序的看法就是简,设计得最为复杂就从不意义了。

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

随即上同篇

 上一样篇稿子中,我们就好了腔长长的的讯息列表、新闻详情功能了,但是还存在有值得优化的地方,以及评价功能尚未长。
 欢迎Star
Github开源地址:https://github.com/winterfeel/Wxapp\_Toutiao
视频教程地址:http://study.163.com/course/introduction.htm?courseId=1003606050
 所以在当下无异首被我们开展以下优化:

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

 说明下为何未做收藏功能,其实是计划性及用户登陆功能暂时还不开了,包括上评论。原因:

微信小序登陆需要有appid,appid需要商家资质去报名,每个公司申请之数据来限制(好像是30单),每个身份证啊只能最多绑定5只。
虽然网上流传在个人就是申请破产呢得获取appid,但是即使这去了一样差绑定机会,个人建议要不要浪费。所以有些程序中的登陆、评论、收藏功能此处暂时无开。

刷新优化

 微信小程序原生提供了下拉刷新和加载重多事件,这或多或少要于人性化的。
 首先需要在部署文件,即页面.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秒,虽然理论及是够了,但是这么连充分蛋疼,并无可知真地去控制显示因此。

评论功能

 虽然未打算开上评论功能了,但是布局我要么加了上去,效果使图:

json 4

评功能图

 评论列表还是用for循环渲染每个item即可,当然就边我补偿加了一个稍微细节,当没评论的时候会显得一个缺损提示:

json 5

暂时无评论

 只需要一个大概的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事件,然后于事变里将内容复制给一个变量才行。如果起任何方法,欢迎留言指。

小结起来源

 至此,一个小头长条就形成了,当然由于缺少失了用户系统,功能肯定是无健全的,理论及吧是毫不用处之。所以真的稍程序产品必定不应是彻头彻尾的始末展示,交互一定是单非常关键之环。
 我之代码可能当广大地方还无足够严谨、不够细致,大家只要欲参考欢迎访问Github给个star。
 Github开源地址:https://github.com/winterfeel/Wxapp\_Toutiao
 我更分享的凡成品的统筹过程,所以小序一定会带来被自家多乐趣。后续我会继续打还多多少序,并且发表片科目,喜欢的爱侣可持续关心!
 注:此文为灯灯原创,可转载,注明出处即可。
 灯灯微信,添加请注明理由。小程序商城解决方案,最低1000第一由即可拥有,欢迎联系!

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

 

相关文章

网站地图xml地图