今天给大家讲的是如何在微信小程序制作"文笔记+"?对微信小程序很感兴趣的同学们就一起学习下吧!
一直说做个"笔记类"的小程序，今天终于发上来了，虽然"文笔记+"只有两个页面，但是笔记类的应用其实是很费时间的，因为要完成"增删改查"这几项功能，其实和数据库已经很类似了，下面还是老样子，注释和逻辑解析都已经写在代码里了。
哦对了，这只是个基础版和预想的还是有些差别的，毕竟一开始打算需要云和接口的支持，现在所有的记录全都存在了本地的缓存。删除的方法写在js里了，但是没有放按钮，是因为想了很久感觉放在哪里都很丑，所以这个基础版是没有删除功能的呦~，凑活着用修改功能先来代替吧。
![](http://mydown-img1.yesky.com/2017-06-09/4316e428d7b7d61260834e2d1c0bc7d1.png "如何在微信小程序制作\")
![](http://mydown-img1.yesky.com/2017-06-09/17457e2a28c1db15825f94f8631b9c81.png "如何在微信小程序制作\")
首页:
js:
Page({
data:{
today:\'\',//当天日期
image:\'/pages/image/111.jpg\',//背景图片
desArr:[]//数据源数组
},
getNowFormatDate(){
//获取当天日期
var date = new Date();
var seperator1 = "-";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDatereturn currentdate;},onLoad:function(options){//-监听页面加载
//获取缓存内容
this.setData({
desArr:wx.getStorageSync(\'oldText\')
})
if(this.data.desArr == null && this.data.desArr ==\'\'){//如果没有缓存则为空this.setData({desArr:[]
})
}
//获取当天日期
var day = this.getNowFormatDate()
this.setData({
today:day
})
},
onShow:function(){
// 生命周期函数--监听页面显示
//获取当前缓存
var arrayA = wx.getStorageSync(\'oldText\');var isChange = wx.getStorageSync(\'isChange\');if (arrayA.length != this.data.desArr.length){//如果数量改变从新赋值this.setData({desArr:arrayA})
}else if (isChange == 1){
wx.setStorageSync(\'isChange\', 0);
this.setData({
desArr:arrayA
})
}
},
onShareAppMessage: function() {
// 用户点击右上角分享
return {
title: \'文笔记+\', // 分享标题
desc: \'我们的功能不仅笔记\', // 分享描述
path: \'path\' // 分享路径
}
},
cancelTap(e){
//删除按钮
console.log(e)
}
})
wxml:
{{item.des}}
{{item.time}}
+
{{item.des}}
{{item.time}}
+
wxss:
page{
height: 100%;
}
.des-image{
position:absolute;
width: 100%;
height: 100%;
}
.des-scr{
width: 100%;
height: 100%;
}
.des-view{
margin: 5%;
width: 90%;
height: 180rpx;
border:1px solid orange;
}
.des-text{
display: block;
margin:20rpx;
height: 80rpx;
overflow: hidden;
}
.des-tiemText{
display: block;
margin-right: 20rpx;
margin-bottom: 20rpx;
height: 40rpx;
text-align: right;
}
.new-btn{
position:absolute;
bottom: 200rpx;
right: 0rpx;
width: 80rpx;
height: 80rpx;
background: darkorange;
border-radius: 50%;
font-size: 48rpx;
line-height:80rpx;
}
详情页：
js:
Page({
data:{
time:\'\',//日期
image:\'\',//背景
textAreaDes:\'\',//输入的内容
revise:\'\',//是不是修改
id:\'\'
},
btnDown(){
//保存按钮
if (this.data.textAreaDes.length == 0){
return;
}
//获取本地缓存
var oldText = wx.getStorageSync(\'oldText\');if(oldText != null && oldText !=\'\'){if(this.data.revise == \'1\'){//如果是修改的，循环缓存数组，找到相应id更改console.log(oldText)for (var i=0;i
oldText[i]={\'des\':this.data.textAreaDes,time:dic.time,\'id\':dic.id};console.log(oldText)//存入缓存wx.setStorageSync(\'oldText\', oldText);wx.setStorageSync(\'isChange\', 1);
return;
}
}
}else{
//记录是内容的id
var numID = wx.getStorageSync(\'oldTextID\');if(numID == this.data.id){return;}
//添加更多缓存
oldText.push({\'des\':this.data.textAreaDes,time:this.data.time,\'id\':numID});//id自增numID++;wx.setStorageSync(\'oldTextID\', numID);this.setData({
id: numID
})
}
}else{
//如果没有缓存
oldText = [{\'des\':this.data.textAreaDes,time:this.data.time,\'id\':0}];//保存idwx.setStorageSync(\'oldTextID\', 1);this.setData({id: 1
})
}
//存入缓存
wx.setStorageSync(\'oldText\', oldText);
},
bindTextAreaBlur(e){
//当输入的文字改变走这个方法
//记录输入的文字
this.setData({
textAreaDes: e.detail.value
})
},
onLoad:function(options){
// 生命周期函数--监听页面加载
this.setData({
des: options.des,
time:options.time,
image:options.image,
revise:options.revise,
id:options.id
})
},
onShareAppMessage: function() {
// 用户点击右上角分享
return {
title: \'文笔记+\', // 分享标题
desc: \'爱的再多也记录不够\', // 分享描述
path: \'path\' // 分享路径
}
}
})
wxml:
{{time}}
保存
wxss:
page{
height: 100%;
}
.the-image{
position:absolute;
width: 100%;
height: 100%;
}
.the-text{
position:absolute;
left: 5%;
top: 3.5%;
font-size: 28rpx;
text-align: left;
}
.the-btn{
font-size: 24rpx;
position:absolute;
right: 5%;
top: 2%;
height: 5%;
width: 20%
}
.the-view{
position:absolute;
top: 7%;
width: 100%;
height: 86%;
}
.the-textarea{
overflow:hidden;
}
以上就是如何在微信小程序制作"文笔记+"的全部内容了，大家都学会了吗?
End
