微信小程序在近期比较火热,作者在闲暇之余研究后决定做一个今日头条的小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/[email protected]",
"text": "首页"
}, {
"pagePath": "pages/video/video",
"iconPath":"imges/tabbar/video_tabbar_22x22_.png",
"selectedIconPath":"imges/tabbar/[email protected]",
"text": "视频"
},{
"pagePath": "pages/attention/attention",
"iconPath":"imges/tabbar/newcare_tabbar_night_22x22_.png",
"selectedIconPath":"imges/tabbar/[email protected]",
"text": "关注"
},{
"pagePath": "pages/mine/mine",
"iconPath":"imges/tabbar/mine_tabbar_22x22_.png",
"selectedIconPath":"imges/tabbar/[email protected]",
"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
共91个文件
js:51个
png:17个
json:7个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 182 浏览量
2023-09-05
13:30:05
上传
评论
收藏 206KB ZIP 举报
温馨提示
小程序是一种轻量级的应用程序,可以在微信等平台上运行,具有快速、便捷和跨平台的特点。因此,我们选择开发小程序项目源码,以满足开发人员的需求。 首先,我们的小程序项目源码提供了丰富的功能和模块,可以满足各种类型的小程序应用需求。无论是电商、社交、教育还是娱乐,我们的项目源码都提供了相应的功能和界面设计,使得开发人员可以快速构建符合需求的小程序应用。 其次,我们的小程序项目源码具有良好的可扩展性和可定制性。我们将项目源码设计为模块化的结构,开发人员可以根据自己的需求选择和定制所需的功能模块。同时,我们还提供了丰富的文档和示例代码,以帮助开发人员理解和使用项目源码。 我们的小程序项目源码还采用了一些常用的技术和工具,以提高开发效率和代码质量。例如,我们使用了微信小程序开发框架,它提供了一系列的API和组件,使得开发人员可以快速构建小程序应用。我们还使用了Vue.js作为前端开发框架,它提供了一种简洁而灵活的方式来构建交互式界面。 此外,我们的小程序项目源码还注重用户体验和界面设计。我们提供了一系列的界面模板和样式库,使得开发人员可以轻松创建漂亮而用户友好的小程序界面。我们还提供了一些常用的交互组件和动画效果,以增加小程序的交互性和吸引力。 总之,我们的小程序项目源码旨在帮助开发人员快速构建各种类型的小程序应用。无论是电商、社交、教育还是娱乐,我们相信我们的项目源码将能够提供强大的支持和帮助。感谢您对我们项目的关注和支持!
资源推荐
资源详情
资源评论
收起资源包目录
新闻资讯-今日头条.zip (91个子文件)
今日头条
pages
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
未命名.txt 0B
node_modules
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
mine
tabbar
[email protected] 635B
[email protected] 176B
home_tabbar_22x22_.png 868B
mine_tabbar_22x22_.png 1005B
[email protected] 957B
[email protected] 801B
[email protected] 583B
video_tabbar_22x22_.png 926B
newcare_tabbar_night_22x22_.png 1KB
background
[email protected] 20KB
README.md 5KB
共 91 条
- 1
资源评论
Java码库
- 粉丝: 1654
- 资源: 3928
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功