欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序实战案例三个:今日头条,记事本,机器人

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:736

高端HTML5响应式企业通用网

2020-05-06   浏览:517

html5响应式外贸网站英文版

2020-05-08   浏览:505

HTML5自适应律师工作室类网

2020-04-04   浏览:501

HTML5影视传媒文化公司类网

2020-05-12   浏览:495

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

发布时间:2021-01-10  

一:记账小应用var util = require("../../utils/util.js");//获取应用实例var app = getApp();Page({ data: { userInfo: {}, buttonLoading: false, accountData:, accountTotal:0 }, ...

 

 

 

 

一:记账小应用

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

var util = require("../../utils/util.js");

//获取应用实例

var app = getApp();

Page({

data: {

useo?rInfo: {},

buttonLoading: falseo?,

accountData:[],

accountTotal:0

},

onLoad: function () {

console.log('onLoad')

var that = this;

 

// 获取记录

var tempAccountData = wx.getStorageSync("accountData") || [];

this.caculateTotal(tempAccountData);

this.setData({

accountData: tempAccountData

});

 

},

// 计算总额

caculateTotal:function(data){

var tempTotal = 0;

for(var x in data){

tempTotal += parseFloat(data[x].amount);

}

this.setData({

accountTotal: tempTotal

});

},

//表单提交

formSubmit:function(e){

this.setData({

buttonLoading: true

});

 

var that = this;

setTimeout(function(){

var inDetail = e.detail.value.inputdetail;

var inAmount = e.detail.value.inputamount;

if(inDetail.toString().length <= 0 || inAmount.toString().length <= 0){

console.log("can not empty");

that.setData({

buttonLoading: false

});

return false;

}

 

//新增记录

var tempAccountData = wx.getStorageSync("accountData") || [];

tempAccountData.unshift({detail:inDetail,amount:inAmount});

wx.setStorageSync("accountData",tempAccountData);

that.caculateTotal(tempAccountData);

that.setData({

accountData: tempAccountData,

buttonLoading: false

});

 

},1000);

},

//删除行

deleteRow: function(e){

var that = this;

var index = e.target.dataset.indexKey;

var tempAccountData = wx.getStorageSync("accountData") || [];

tempAccountData.splice(index,1);

wx.setStorageSync("accountData",tempAccountData);

that.caculateTotal(tempAccountData);

that.setData({

accountData: tempAccountData,

});

}

})

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

二:今日头条案例

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

效果图:

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

//flash.js

onReady:function(){

// 页面渲染完成

var that = this,duration = 1500;

var animation = wx.createAnimation({

duration: duration,

});

 

//step() 方法表示一组动画的结束

animation.scale(2).rotate(360).step();

animation.scale(1).step();

 

this.setData({

animationData : animation.export()

});

 

var timestamp = new Date().getTime();

setTimeout(function(){

wx.redirectTo({

url: '../index/index?time='+timestamp

})

},duration*2.5);

 

},

//flash.wxml

<image class="flash-img" animation="{{animationData}}" src=http://www.yiyongtong.com/archives/"{{src}}" ></image>

网络请求方法:

//app.js

req: function(url,data,param){

var requestData = {

url: url,

data: typeof data == 'object' ? data : {},

method: typeof param.method == 'string' && param.method.length > 0 ? param.method.toUpperCase() : 'GET',

header: typeof param.header == 'object' ? param.header : {},

success: function(res) {

typeof param.success == 'function' && param.success(res);

},

fail: function(res){

typeof param.fail == 'function' && param.fail(res);

},

complete: function(res){

typeof param.complete == 'function' && param.complete(res);

}

};

wx.request(requestData);

},

列表页:

//index.js

var app = getApp(),currentPage = 1;

const URL = "";

 

Page({

data:{

imgUrls: [

'',

'',

''

],

toView: "",

loadingHidden:true,

renderData:[],

},

onLoad:function(options){

this.loadDataFromServer();

},

//api读取数据

loadDataFromServer: function(){

var that = this;

that.changeLoadingStatus(false);

app.req(URL,{

page : currentPage,

needContent : 1,

},{

header: { apikey: app.globalData.apikey },

success:function(resp){

console.log(resp);

console.log("成功加载页数 "+currentPage);

var tempData = resp.data.showapi_res_body.pagebean.contentlist;

var toViewId = currentPage % 2 == 0 ? "top-id" : "top-id2"; //需要改变值页面才会重新渲染

that.setData({

//renderData: that.data.renderData.concat(tempData), 合并数组容易超出长度,无法做到无限加载

renderData: tempData,

toView: toViewId,

});

that.changeLoadingStatus(true);

}

});

 

},

//加载上一页或者下拉刷新

refresh:function(e){

currentPage = currentPage > 1 ? --currentPage : 1;

this.loadDataFromServer();

},

//加载下一页

loadMore:function(e){

++currentPage;

this.loadDataFromServer();

},

//改变loading状态

changeLoadingStatus: function(bool){

this.setData({

loadingHidden: bool

});

},

onReady:function(){

// 页面渲染完成

wx.setNavigationBarTitle({

title: '列表'

});

},

onShow:function(){

// 页面显示

},

onHide:function(){

// 页面隐藏

},

onUnload:function(){

// 页面关闭

}

});

//index.wxml

<loading hidden="{{loadingHidden}}">

加载中...

</loading>

 

本文标签

:备案管家服务帮您把复杂流程变简单,解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名,企业500/5个域名,qq1650004.