一：記賬小應用

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. method: typeof param.method == 'string' && param.method.length > 0 ? param.method.toUpperCase() : 'GET',
7. header: typeof param.header == 'object' ? param.header : {},
8. success: function(res) {
9. typeof param.success == 'function' && param.success(res);
10. },
11. fail: function(res){
12. typeof param.fail == 'function' && param.fail(res);
13. },
14. complete: function(res){
15. typeof param.complete == 'function' && param.complete(res);
16. }
17. };
18. wx.request(requestData);
19. },

列表頁:

 

1. //index.js
2. var app = getApp(),currentPage = 1;
3. const URL = "http://apis.baidu.com/showapi_open_bus/channel_news/search_news";
4.  
5. Page({
6. data:{
7. imgUrls: [
8. 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
9. 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
10. 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
11. ],
12. toView: "",
13. loadingHidden:true,
14. renderData:[],
15. },
16. onLoad:function(options){
17. this.loadDataFromServer();
18. },
19. //api讀取數據
20. loadDataFromServer: function(){
21. var that = this;
22. that.changeLoadingStatus(false);
23. app.req(URL,{
24. page : currentPage,
25. needContent : 1,
26. },{
27. header: { apikey: app.globalData.apikey },
28. success:function(resp){
29. console.log(resp);
30. console.log("成功加載頁數 "+currentPage);
31. var tempData = resp.data.showapi_res_body.pagebean.contentlist;
32. var toViewId = currentPage % 2 == 0 ? "top-id" : "top-id2"; //需要改變值頁面才會重新渲染
33. that.setData({
34. //renderData: that.data.renderData.concat(tempData), 合并數組容易超出長度,無法做到無限加載
35. renderData: tempData,
36. toView: toViewId,
37. });
38. that.changeLoadingStatus(true);
39. }
40. });
41.  
42. },
43. //加載上一頁或者下拉刷新
44. refresh:function(e){
45. currentPage = currentPage > 1 ? --currentPage : 1;
46. this.loadDataFromServer();
47. },
48. //加載下一頁
49. loadMore:function(e){
50. ++currentPage;
51. this.loadDataFromServer();
52. },
53. //改變loading狀態(tài)
54. changeLoadingStatus: function(bool){
55. this.setData({
56. loadingHidden: bool
57. });
58. },
59. onReady:function(){
60. // 頁面渲染完成
61. wx.setNavigationBarTitle({
62. title: '列表'
63. });
64. },
65. onShow:function(){
66. // 頁面顯示
67. },
68. onHide:function(){
69. // 頁面隱藏
70. },
71. onUnload:function(){
72. // 頁面關閉
73. }
74. });

 

1. //index.wxml
2. <loading hidden="{{loadingHidden}}">
3. 加載中...
4. </loading>
5.  
6. <scroll-view scroll-y="true" style="height: 100%;" scroll-into-view="{{toView}}" upper-threshold="5" lower-threshold="5" bindscrolltoupper="refresh" bindscrolltolower="loadMore">
7.  
8. <swiper indicator-dots="true" id="swiper-view" autoplay="true" interval="2000">
9. <block wx:for="{{imgUrls}}">
10. <swiper-item>
11. <image src="{{item}}" width="100%" height="150"/>
12. </swiper-item>
13. </block>
14. </swiper>
15.  
16. <view id="top-id"> </view>
17. <view id="top-id2"> </view>
18. <block wx:for="{{renderData}}">
19. <view class="container">
20. <view class="title">
21. <text class="title-text">{{item.title}}</text>
22. </view>
23.  
24. <view class="images" wx:if="{{item.imageurls.length > 0}}">
25. <block wx:for="{{item.imageurls}}" wx:for-item="imgItem" wx:for-index="imgIndex">
26. <image wx:if="{{imgIndex <= 2}}" src="{{imgItem.url}}"></image>
27. </block>
28. </view>
29. <view class="source">{{item.source}} {{item.pubDate}}</view>
30. </view>
31. </block>
32. </scroll-view>

項目地址：https://github.com/HowName/toutiao項目下載：toutiao-master.zip

 

三：智能機器人

項目為智能應答機器人，使用了圖靈機器人接口，慢慢調戲吧

首頁，主要處理頁：

 

1.  
2. //index.js
3.  
4. var app = getApp();
5. var that;
6. var chatListData = [];
7.  
8. Page({
9. data: {
10. askWord: '',
11. userInfo: {},
12. chatList: [],
13. },
14. onLoad: function () {
15. that = this;
16. //獲取用戶信息
17. app.getUserInfo(function (userInfo) {
18. that.setData({
19. userInfo: userInfo
20. });
21. });
22. },
23. onReady: function () {
24. //問候語
25. setTimeout(function () {
26. that.addChat('你好啊！', 'l');
27. }, 1000);
28. },
29. sendChat: function (e) {
30.  
31. let word = e.detail.value.ask_word ? e.detail.value.ask_word : e.detail.value;//支持兩種提交方式
32. that.addChat(word, 'r');
33.  
34. //請求api獲取回答
35. app.req('post', 'openapi/api', {
36. 'data': { 'info': word, 'loc': '廣州', 'userid': '123' },
37. 'success': function (resp) {
38. that.addChat(resp.text, 'l');
39. if (resp.url) {
40. that.addChat(resp.url, 'l');
41. }
42. },
43. });
44.  
45. //清空輸入框
46. that.setData({
47. askWord: ''
48. });
49. },
50. //新增聊天列表
51. addChat: function (word, orientation) {
52. let ch = { 'text': word, 'time': new Date().getTime(), 'orientation': orientation };
53. chatListData.push(ch);
54. that.setData({
55. chatList: chatListData
56. });
57. }
58. })

頁面:

 

1. //index.wxml
2.  
3. <view class="container">
4. <scroll-view class="scrool-view" scroll-y="true">
5. <view class="chat-list">
6. <block wx:for="{{chatList}}" wx:key="time">
7. <view class="chat-left" wx:if="{{item.orientation == 'l'}}">
8. <image class="avatar-img" src="../../res/image/wechat-logo.png"></image>
9. <text>{{item.text}}</text>
10. </view>
11. <view class="chat-right" wx:if="{{item.orientation == 'r'}}">
12. <text>{{item.text}}{{item.url}}</text>
13. <image class="avatar-img" src="{{userInfo.avatarUrl}}"></image>
14. </view>
15. </block>
16. </view>
17. </scroll-view>
18. <form bindsubmit="sendChat">
19. <view class="ask-input-word">
20. <input placeholder="" name="ask_word" type="text" bindconfirm="sendChat" value="{{askWord}}" />
21. <button formType="submit" size="mini">發(fā)送</button>
22. </view>
23. </form>
24. </view>

網絡請求方法:

 

1. //app.js
2.  
3. req: function (method, url, arg) {
4. let domian = 'http://www.tuling123.com/', data = { 'key': '9d2ff29d44b54e55acadbf5643569584' }, dataType = 'json';//為方便廣大群眾，提供key
5. let header = { 'content-type': 'application/x-www-form-urlencoded' };
6.  
7. if (arg.data) {
8. data = Object.assign(data, arg.data);
9. }
10. if (arg.header) {
11. header = Object.assign(header, arg.header);
12. }
13. if (arg.dataType) {
14. dataType = arg.dataType;
15. }
16.  
17. let request = {
18. method: method.toUpperCase(),
19. url: domian + url,
20. data: data,
21. dataType: dataType,
22. header: header,
23. success: function (resp) {
24. console.log('response content:', resp.data);
25.  
26. let data = resp.data;
27.  
28. typeof arg.success == "function" && arg.success(data);
29. },
30. fail: function () {
31. wx.showToast({
32. title: '請求失敗,請稍后再試',
33. icon: 'success',
34. duration: 2000
35. });
36.  
37. typeof arg.fail == "function" && arg.fail();
38. },
39. complete: function () {
40. typeof arg.complete == "function" && arg.complete();
41. }
42. };
43. wx.request(request);
44. }

項目地址：https://github.com/HowName/smart-robot項目下載：smart-robot-master.zip