微信小程序在近期比较火热,作者在闲暇之余研究后决定做一个今日头条的小demo。
---------
+ 微信小程序官方文档:http://wxopen.notedown.cn/
![TodayNews.gif](http://upload-images.jianshu.io/upload_images/1912827-ed2da16bb6bf6ff3.gif?imageMogr2/auto-orient/strip)
----------
首页的开发过程。
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;
}
}
```
![导航条](http://upload-images.jianshu.io/upload_images/1912827-61a8f73fd18a1066.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)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。
+ 若有改进欢迎一起讨论并学习。
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(源码+截图)(微信小程序毕业设计)今日头条(
资源推荐
资源详情
资源评论
收起资源包目录
(微信小程序毕业设计)今日头条(源码+截图).zip (95个子文件)
今日头条
.DS_Store 6KB
pages
.DS_Store 6KB
index
index.wxml 2KB
index.js 3KB
index.json 2B
index.wxss 2KB
attention
attention.js 115B
attention.wxss 0B
attention.wxml 209B
attention.json 2B
common
netTool.js 1KB
netLoad.js 883B
constant.js 214B
common.wxss 17B
datamissing.js 943B
mine
mine.js 1KB
mine.json 200B
mine.wxss 2KB
mine.wxml 2KB
video
video.wxml 56B
video.js 318B
video.json 2B
video.wxss 0B
node_modules
.DS_Store 6KB
app.json 1KB
app.js 719B
utils
util.js 481B
app.wxss 204B
package.json 323B
bluebird
changelog.md 87B
js
browser
bluebird.min.js 77KB
bluebird.core.min.js 54KB
bluebird.core.js 116KB
bluebird.js 174KB
release
errors.js 4KB
method.js 2KB
promise_array.js 5KB
props.js 3KB
join.js 8KB
bind.js 2KB
context.js 2KB
each.js 789B
reduce.js 5KB
synchronous_inspection.js 3KB
settle.js 1KB
assert.js 2KB
filter.js 314B
es5.js 2KB
async.js 4KB
finally.js 3KB
schedule.js 2KB
some.js 4KB
map.js 5KB
bluebird.js 291B
catch_filter.js 1KB
queue.js 2KB
promisify.js 12KB
direct_resolve.js 1KB
call_get.js 4KB
generators.js 8KB
debuggability.js 29KB
thenables.js 2KB
util.js 10KB
using.js 7KB
timers.js 2KB
any.js 421B
nodeback.js 2KB
nodeify.js 2KB
race.js 1KB
cancel.js 4KB
promise.js 25KB
LICENSE 1KB
package.json 3KB
README.md 3KB
imges
.DS_Store 6KB
mine
sinaicon_login_profile_78x78_@2x.png 3KB
weixinicon_login_profile_78x78_.png 3KB
favoriteicon_profile_24x24_@2x.png 1KB
set_title_profile_18x18_@2x.png 770B
qqicon_login_profile_78x78_@2x.png 4KB
nighticon_profile_24x24_@2x.png 2KB
cellphoneicon_login_profile_78x78_@2x.png 2KB
arrow_right_setup_12x16_@2x.png 527B
tabbar
video_tabbar_press_22x22_@2x.png 635B
add_channel_titlbar_16x16_@2x.png 176B
home_tabbar_22x22_.png 868B
mine_tabbar_22x22_.png 1005B
newcare_tabbar_press_22x22_@2x.png 957B
mine_tabbar_press_22x22_@2x.png 801B
home_tabbar_press_22x22_@2x.png 583B
video_tabbar_22x22_.png 926B
newcare_tabbar_night_22x22_.png 1KB
background
wallpaper_profile@2x.jpg 20KB
README.md 5KB
readme.txt 118B
共 95 条
- 1
资源评论
岛上程序猿
- 粉丝: 1888
- 资源: 3332
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功