我的第一个微信小程序（手机记事本）

写在前面--这里我借鉴了一位博客的代码，可惜我忘记他的名字了，只能匿名地道声“谢谢！". 如果你看到了感觉我侵犯了你"版权"，可以告诉我，我会及时删除相关代码。我在借鉴这位朋友的代码基础上做了部分修改，实现本程序。我做了测试，可以保证绝对可以运行。后面也许我还会完善，增加更多功能。各位读者，如果你有兴趣继续修改，我表示赞同。我发布在这里，只是希望大家一起学习进步！

本程序一共3页，Page1：Index (在原来默认的工具建立的Index页的基础上改编而成）Page2：NoteEdit（我新建立的一页）Page3：Logs （完全是原来程序工具建立项目时默认生成的，我没有做任何修改，所以我不打算提供Logs的代码）

运行效果

Page1：

Page2

关于背景，你可以上百度搜索"手机壁纸"，选择几张图你喜欢的，as you like. 然后保存到 \pages\image里，改名为 111.jpg 和 222.jpg

Page1-- Index.mxml

<!--背景-->
<image class="des-image" src="{{image}}"></image>

<!--底部滚动-->
<scroll-view class="des-scr" scroll-y="true" bindscroll="scroll">
<!--循环view-->
<block wx:for="{{desArr}}">
<navigator url="../NoteEdit/NoteEdit?des={{item.des}}&time={{item.time}}&image={{image}}&id={{item.id}}&revise=1">
<view class="des-view"  bindtap="toiletDetails" id="{{index}}">
<text class="des-text">{{item.des}}</text>
<text class="des-tiemText">{{item.time}}</text>
</view>
</navigator>
</block>
</scroll-view>

<!--添加按钮-->
<navigator url="../logs/logs?des=&time=2017-01-09&image={{image}}&id=-1&revise=0">
<button class="new-btn"  bindtap="newBtnDown">+</button>
</navigator>

Page1-- Index.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;
}

Page1-- Index.js

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
today: '',//当天日期
image: '/pages/image/111.jpg',//背景图片
desArr: []//数据源数组
},
//Zha: 取得时间日期信息
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 + strDate
return currentdate;
},
//Zha: 点击进入添加note的详细界面
newBtnDown() {
//跳转页面到 NoteEdit
wx.navigateTo({
url: '../NoteEdit/NoteEdit'
})
},

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

Page2-- NoteEdit.wxml

<!--背景-->
<image class="the-image" src="{{image}}"></image>

<!--按钮-->
<text class="the-text">{{time}}</text>
<button class="the-btn" bindtap="btnDown">保存</button>

<!--输入框-->
<view class="the-view">
<textarea class= "the-textarea"  bindinput="bindTextAreaBlur" style="  margin: 5%;width: 90%;height: 90%" auto-focus value="{{des}}"maxlength="-1" cursor-spacing="0">
</textarea>
</view>

Page2-- NoteEdit.wxss

/* pages/NoteEdit/NoteEdit.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;
}

Page2-- NoteEdit.js

Page({
data: {
time: '',//日期
image: '/pages/image/222.jpg',//背景
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.length; i++) {
var dic = oldText[i];
if (dic.id == this.data.id) {
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 }];
//保存id
wx.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' // 分享路径
}
}
})

最后，祝你测试顺利！ 阅读更多