最近要涉及微信移动端项目,所以尝试学习一些移动端的实用技能,这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字符串。有兴趣的小伙伴可以自己尝试下。
1.Node+express -- 服务搭建
由于该demo是在服务器端实现,所以需要通过npm包引入express模块,用来搭建简易服务。
2.命令行输入:npm install express -g //安装express模块
3.在项目中新建server.js //起服务
rush:js;">
//server.js代码部分
require("express")().get("*",function(req,res){
res.sendFile(__dirname + req.path);
}).listen(8888,function(){//访问demo的端口为8888
console.log(" 服务已启动")
})
//这样,一个简易的浏览器端服务就搭建起来了。
2.新建文件保存数据--count.json
在项目目录下面建立一个data文件夹,里面新建一个count.json(名字可任意起)
rush:js;">
//data.json代码部分
[{
"month":"3月","record":[
{
"action":"充值","pay":"12546.00","balance":"3445.00","time":"2015-03-15 15:03"
},.........//这里省略了部分数据
{
"action":"充值","pay":"2546.00","balance":"3444.00",{
"action":"充值","pay":"3546.00","balance":"343.00",{
"action":"腾讯游戏","pay":"1846.00","balance":"344.00","time":"2015-03-15 15:03"
}
]
},{
"month":"4月","pay":"88888.00",..........//省略数据
{
"action":"充值","pay":"99999.00","pay":"354346.00","pay":"18463242.00","time":"2015-03-15 15:03"
}
]
},{
"month":"5月","pay":"2323232.00","pay":"324234.00","time":"2015-03-15 15:03"
}
]
}
]
//该文件中的数据,就是即将渲染在页面中的数据
3.HTML
rush:xhtml;">
<Meta charset="UTF-8">
我的账户
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">//别忘记加上移动端这个属性
//dropload.css为下拉加载样式
//wechat.css文件为自己定义样式的文件
//monthselect为刚进入页面时为该section添加样式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。