用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

君莫叹:微信小程序实战尝鲜:今日头条(附代码)

天下雪 2016-11-26 13:09

微信小程序在近期比较火热,作者在闲暇之余研究后决定做一个今日头条的小demo。 首先感谢此作者的接口提供。 首页的开发过程。 首先在app.json中配置每个页面 { "pages":, "window":{ "backgroundTextStyle":"lig ...

微信小程序在近期比较火热,作者在闲暇之余研究后决定做一个今日头条的小demo。

首先感谢此作者的接口提供。


首页的开发过程。

  1. 首先在app.json中配置每个页面

    {
    "pages":[
     "pages/index/index",
     "pages/attention/attention",
     "pages/mine/mine",
     "pages/video/video"
    ],
    "window":{
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#d75b5d",
     "navigationBarTitleText": "今日头条",
     "navigationBarTextStyle":"white"
    },
    "tabBar": {
     "color": "#959394",
     "selectedColor": "#959394",
     "backgroundColor": "#f0f0f0",
     "borderStyle": "white",
     "list": [{
       "pagePath": "pages/index/index",
       "iconPath":"imges/tabbar/home_tabbar_22x22_.png",
       "selectedIconPath":"imges/tabbar/home_tabbar_press_22x22_@2x.png",
       "text": "首页"
     }, {
       "pagePath": "pages/video/video",
       "iconPath":"imges/tabbar/video_tabbar_22x22_.png",
       "selectedIconPath":"imges/tabbar/video_tabbar_press_22x22_@2x.png",
       "text": "视频"
     },{
       "pagePath": "pages/attention/attention",
       "iconPath":"imges/tabbar/newcare_tabbar_night_22x22_.png",
       "selectedIconPath":"imges/tabbar/newcare_tabbar_press_22x22_@2x.png",
       "text": "关注"
     },{
       "pagePath": "pages/mine/mine",
       "iconPath":"imges/tabbar/mine_tabbar_22x22_.png",
       "selectedIconPath":"imges/tabbar/mine_tabbar_press_22x22_@2x.png",
       "text": "我的"
     }]
    }
    }
  2. 随后我们创建导航条。
    布局:运用盒型布局即可。
    思路:由于这个有动画效果,当时的想法是利用js来控制动画效果,配合微信的wx.createAnimation(OBJECT)来创建动画并且实现,当我点击当前的按钮的时候,用js来控制其大小变化,当我点击其他按钮的时候,遍历所有按钮然后设当前的按钮为变大状态,其他则缩小。但是在实现的时候发现在数据源用的是微信中数据绑定的形式渲染的,当前的按钮变大后其他按钮都随之变化,控制较难,所以作者放弃了这种思路

    最终思路: 利用css3动画配合一个Bool值来使当前的视图发生变化。

    • 使用<scroll-view scroll-x="true" scroll-y="false" class="tpscview" scroll-left="-2">来对导航条进行横向设置。
    • 使用BOOL型数据animation来控制当前的状态。
    • 使用css3代码来控制动画
.curPage {
     animation:myfirst 0.1s;
     animation-fill-mode:forwards;
}

@keyframes myfirst
{
    to {
       font-size: 50rpx;
    }
}

3. 获取内容

  • 作者封装了以下网络接口首先初始化数据端。
import  {
    device_id,
    iid,
    BASE_URL,
} from "./constant.js"
var net = require("./netLoad.js");
function fetchHeadName(){
    let url = BASE_URL + "article/category/get_subscribed/v1/?"
    let params = {"device_id": device_id,"aid": 13,"iid": iid}
     return net.fetchApi(url, params, "GET").then(data=>data)
}

function loadHomeCategoryNewsFeed(category){
     let url = BASE_URL + "api/news/feed/v39/?"
     let params = {"device_id": device_id,"category": category,"iid": iid}
     return net.fetchApi(url,params,"GET").then(data=>data);
}

function loadHomeCategoryMoreNewsFeed(category, lastRefreshTime){
     let url = BASE_URL + "api/news/feed/v39/?"
     let params = {"device_id": device_id,
                      "category": category,
                      "iid": iid,
                      "last_refresh_sub_entrance_interval": lastRefreshTime}
     return net.fetchApi(url, params, "GET").then(data=>data);
}

export {
    fetchHeadName,
    loadHomeCategoryNewsFeed,
    loadHomeCategoryMoreNewsFeed
}
  • 接下来通过NetLoad.js封装文件来对网络进行请求。
    import Promise from "../../bluebird/js/browser/bluebird.min.js"
    module.exports = {
    fetchApi (url,params,method) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${url}`,
        data: Object.assign({}, params),
        method:method,
        header: { 'Content-Type': 'application/json' },
        success: resolve,
        fail: reject
      })
    })
    }
    }
  • 接下来通过wx.loading 组件来对用户进行请求提示
    <loading hidden="{{loading}}">
          加载中...
    </loading>
    最终完成了此页面。

另外其他页面详见作者github上的代码。

  • 若觉得本文对您有帮助请给个star。
  • 若有改进欢迎一起讨论并学习。
鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: 君莫叹人生如若初见 来自: 授权地址

相关阅读

提示:本页有 2 个评论因未通过审核而被隐藏

  • 17600436010 2017-9-7 11:34
    想问一下这个bluebird这个文件夹是干嘛的?打包之后自动生成的吗