1. 名称:
    TodayNews-wx
  2. 作者:
    zhaohaiq
  3. 来源:
  4. 浏览:
    34913
  5. 下载:
    19774
  6. 最新更新:
    2016-11-26
  7. 收藏5

blob.png

首页的开发过程。

   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": "我的"
    }]
  }
}

   1. 随后我们创建导航条。 布局:运用盒型布局即可。 思路:由于这个有动画效果,当时的想法是利用js来控制动画效果,配合微信的wx.createAnimation(OBJECT)来创建动画并且实现,当我点击当前的按钮的时候,用js来控制其大小变化,当我点击其他按钮的时候,遍历所有按钮然后设当前的按钮为变大状态,其他则缩小。但是在实现的时候发现在数据源用的是微信中数据绑定的形式渲染的,当前的按钮变大后其他按钮都随之变化,控制较难,所以作者放弃了这种思路

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

    1. 使用<scroll-view scroll-x="true" scroll-y="false" class="tpscview" scroll-left="-2">来对导航条进行横向设置。

    2. 使用BOOL型数据animation来控制当前的状态。

    3. 使用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>

最终完成了此页面。


共0 条评论
  1. 加载评论

评论内容:

发表评论
  1. 全部组件分类
  2. 瀑布流
  3. 示例
  4. 提示组件(ToolTip)
  5. 下拉刷新、上拉加载
  6. Toast
  7. 选项卡(tab)
  8. 图表
  9. 卡片切换
  10. 菜单
  11. 筛选
  12. 星级评分
  13. 选择器
  14. 滑动删除
  15. 手势密码
  16. Switch
  17. 搜索
  18. 游戏
  19. 弹幕
  20. 懒加载
  21. 布局
  22. 应用模仿
  23. Emoji
  24. 转盘抽奖
  25. 插件
  26. UI库
  27. 动画
  28. 下拉列表
  29. SnackBar
  30. HTML解析
  31. 日历
  32. 点餐小程序
  33. 购物效果
  34. 框架
  35. 渲染引擎
  36. 商城
  37. 吸顶停留
  38. 会议
  39. 分享
  40. 其他
最新评论