小程序模板網

微信小程序實戰(zhàn)案例三個:今日頭條,記事本,機器人

發(fā)布時間:2017-11-29 17:50 所屬欄目:小程序開發(fā)教程

一:記賬小應用var util = require("../../utils/util.js");//獲取應用實例var app = getApp();Page({ data: { userInfo: {}, buttonLoading: false, accountData:, accountTotal:0 }, ...

 
 
 

 

一:記賬小應用

  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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17985.html 復制鏈接 如需定制請聯系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢