微信小程序实战案例三个：今日头条，记事本，机器人

1. var util = require("../../utils/util.js");
2. //获取应用实例
3. var app = getApp();
4. Page({
5. data: {
6. useo?rInfo: {},
7. buttonLoading: falseo?,
8. accountData:[],
9. accountTotal:0
10. },
11. onLoad: function () {
12. console.log('onLoad')
13. var that = this;
14.  
15. // 获取记录
16. var tempAccountData = wx.getStorageSync("accountData") || [];
17. this.caculateTotal(tempAccountData);
18. this.setData({
19. accountData: tempAccountData
20. });
21.  
22. },
23. // 计算总额
24. caculateTotal:function(data){
25. var tempTotal = 0;
26. for(var x in data){
27. tempTotal += parseFloat(data[x].amount);
28. }
29. this.setData({
30. accountTotal: tempTotal
31. });
32. },
33. //表单提交
34. formSubmit:function(e){
35. this.setData({
36. buttonLoading: true
37. });
38.  
39. var that = this;
40. setTimeout(function(){
41. var inDetail = e.detail.value.inputdetail;
42. var inAmount = e.detail.value.inputamount;
43. if(inDetail.toString().length <= 0 || inAmount.toString().length <= 0){
44. console.log("can not empty");
45. that.setData({
46. buttonLoading: false
47. });
48. return false;
49. }
50.  
51. //新增记录
52. var tempAccountData = wx.getStorageSync("accountData") || [];
53. tempAccountData.unshift({detail:inDetail,amount:inAmount});
54. wx.setStorageSync("accountData",tempAccountData);
55. that.caculateTotal(tempAccountData);
56. that.setData({
57. accountData: tempAccountData,
58. buttonLoading: false
59. });
60.  
61. },1000);
62. },
63. //删除行
64. deleteRow: function(e){
65. var that = this;
66. var index = e.target.dataset.indexKey;
67. var tempAccountData = wx.getStorageSync("accountData") || [];
68. tempAccountData.splice(index,1);
69. wx.setStorageSync("accountData",tempAccountData);
70. that.caculateTotal(tempAccountData);
71. that.setData({
72. accountData: tempAccountData,
73. });
74. }
75. })

项目地址：https://github.com/HowName/account-note项目下载：account-note-master.zip

二：今日头条案例

项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有 封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多

效果图:

启动欢迎页,几行代码可实现旋转与缩放:

1. //flash.js
2. onReady:function(){
3. // 页面渲染完成
4. var that = this,duration = 1500;
5. var animation = wx.createAnimation({
6. duration: duration,
7. });
8.  
9. //step() 方法表示一组动画的结束
10. animation.scale(2).rotate(360).step();
11. animation.scale(1).step();
12.  
13. this.setData({
14. animationData : animation.export()
15. });
16.  
17. var timestamp = new Date().getTime();
18. setTimeout(function(){
19. wx.redirectTo({
20. url: '../index/index?time='+timestamp
21. })
22. },duration*2.5);
23.  
24. },

1. //flash.wxml
2. <image class="flash-img" animation="{{animationData}}" src="{{src}}" ></image>

网络请求方法:

1. //app.js
2. req: function(url,data,param){
3. var requestData = {
4. url: url,
5. data: typeof data == 'object' ? data : {},
6. 邀请