小编教你如何在微信小程序制作\\\"文笔记+\\\"。

今天给大家讲的是如何在微信小程序制作\"文笔记+\"?对微信小程序很感兴趣的同学们就一起学习下吧!

一直说做个\"笔记类\"的小程序，今天终于发上来了，虽然\"文笔记+\"只有两个页面，但是笔记类的应用其实是很费时间的，因为要完成\"增删改查\"这几项功能，其实和数据库已经很类似了，下面还是老样子，注释和逻辑解析都已经写在代码里了。

哦对了，这只是个基础版和预想的还是有些差别的，毕竟一开始打算需要云和接口的支持，现在所有的记录全都存在了本地的缓存。删除的方法写在js里了，但是没有放按钮，是因为想了很久感觉放在哪里都很丑，所以这个基础版是没有删除功能的呦~，凑活着用修改功能先来代替吧。

$在微信小程序制作\\\\$

首页:

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:

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){

//当输入的文字改变走这个方法