🎀 文章作者：二土電子

🌸 關注公眾號獲取更多資料！

🐸 期待大家一起學習交流！

---

??這里對之前的微信記事本小程序進行了重新編寫，增加了更加詳細的步驟描述，將全部圖片都改成了本地圖片，針對一些細節進行了補充，本文完整工程可關注文末公眾號獲取。

一、安裝開發工具

注冊這里就不再贅述了，可以直接到微信公眾平臺注冊賬號。注冊完成后進入頁面，點擊左側的“開發工具”，下載自己所需的版本即可。

二、新建小程序項目

新建時我們選擇不使用云服務，選擇TS-基礎模板。

三、文件夾詳解

第二步點擊確定后，我們就進入了微信小程序開發的頁面。其中有許多文件夾，這里我們簡單介紹一下各個文件夾的作用。

• pages
  存放所有的小程序頁面，這里只有兩個頁面，分別是index和logs。
• utils
  用來存放工具性質的模塊，比如時間格式化。
• app.json
  小程序的全局配置文件。
• app.ts
  小程序的全局邏輯文件
• app.wxss
  小程序的全局樣式文件

除了上述描述的文件，每一個頁面都有自己的.jison、.ts、.wxml和.wxss文件

• .jison
  jison是一種數據格式，并不是編程語言，在小程序中，JSON扮演的靜態配置的角色。值得注意的是，.jison文件中不能添加注釋。
• .wxml
  類似于.html，我們看到的一些控件都是在這里添加的。
• .ts
  邏輯文件，一些功能的函數實現。
• .wxss
  樣式文件，用來調整整體頁面一些控件或文字的樣式。

四、新建/刪除頁面

我們要設計的記賬本主要有個頁面

• index
  引導頁面，有一個日記本圖標，點擊可進入下一個頁面。
• list
  全部日記列表頁面，可在本頁面點擊添加日記、刪除日記或者進入日記詳情。
• add
  添加日記頁面。
• details
  日記詳情頁面。

我們首先需要刪除掉原先自帶的logs頁面，然后新建其他幾個頁面。

4.1 刪除頁面

刪除比較簡單，我們選中logs頁面的文件夾，右鍵刪除即可，但是不要忘記，我們還需要在app.jison文件中將logs頁面的路徑刪掉。

4.2 添加頁面

添加頁面也非常簡單，并不需要我們手動新建文件夾，添加文件夾下面的其他文件。我們只需要在app.jison文件中寫入我們想要添加的頁面，保存之后就會自動在pages文件夾中生成頁面文件夾，非常的方便。這里給大家演示一下。

五、新建圖標文件夾

此次設計的日記本，使用的是本地圖標，因此這里介紹的是如何添加本地圖標，當然也可以自己去網上找一些網頁圖片添加進來，這里就不再做詳細介紹了。

如果想使用本地圖標，我們需要給所有的圖標準備一個文件夾，這里我們直接新建到微信小程序工程文件所在的文件夾里。

六、全局配置

首先我們簡單的對我們小程序全局進行簡單的美化，實際也就是在app.jison文件中，修改窗口的一些參數。

我們修改了導航欄的背景顏色，導航欄的文字和字體顏色。

這里貼一下程序，方便復制粘貼

  "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#c8b4eb","navigationBarTitleText": "ertu電子","navigationBarTextStyle": "white"},

七、index頁面設計

7.1 設置頁面背景

我們上面說了，本次使用的圖片全部是本地圖片，這里準備了一個背景圖片，存放在images文件夾，添加進來即可。

.wxml文件程序

<view><image class="bg-image" src="/images/background.jpg"></image>
</view>

.wxss文件程序

/* 背景圖片樣式 */
.bg-image{width: 100%;height: 100%;position: fixed;z-index: -1;   /* 放在最底層 */
}

至此，背景圖片添加完成，可以看一下效果。

7.2 添加日記本圖標

添加日記圖標與上面的操作類似，下載好圖標后，創建樣式，添加到頁面。程序如下

.wxml程序

<image class="appicon" src="/images/diaryicon.png"></image>

.wxss程序

/* App圖標樣式 */
.appicon{margin: 5%;   /* 設置上、下、左、右間距 */width: 100rpx;height: 100rpx;position: fixed;
}

實現效果如下

為了提示該圖標功能為日記本，這里添加一個文字提示，.wxml文件添加下面的程序

  <text style="color: white; font-size: medium; position: relative; left: 36rpx; top: 145rpx">日記本</text>

7.3 點擊圖標跳轉

接下來我們需要實現，點擊日記本圖標，跳轉到日記列表頁面。實際就是給日記本圖標添加一個點擊事件的處理函數。

首先修改.wxml文件程序，給圖片的點擊事件添加一個處理函數。

<image class="appicon" src="/images/diaryicon.png" bind:tap="gotolistpage"></image>

然后在.ts文件中編寫詳細的函數實現。

  gotolistpage(){wx.navigateTo({url: '../list/list'   //跳轉鏈接})}
})

實現效果如下

八、list頁面設計

8.1 添加日記按鈕

首先按照上面介紹的方法，修改list頁面的背景，添加一個添加日記的圖標，給圖標的點擊事件添加一個跳轉功能，跳轉到添加日記頁面。實現效果如下

8.2 顯示全部日記

顯示全部日記首先需要在.wxml文件中添加一個滾動的控件用來顯示全部日記列表，程序如下

  <!--底部滾動--><scroll-view class="des-scr" scroll-y="true"><!--循環顯示所有日記內容--><block wx:for="{{totalDiaryConcent}}"><!-- 利用data-將當前的索引傳遞到刪除或者打開詳情的函數 --><view class="des-view" bindtap="diary_detail" bindlongtap="delet" data-content="{{item}}" data-saveid="{{index}}"><text class="des-text">{{item.des}}</text><text class="des-tiemText">{{index + 1}}</text></view><!-- </navigator> --></block></scroll-view>

通過上面的程序我們可以看出，我們給每一條日記增加了一個點擊事件處理函數和長按事件處理函數，功能會在后面介紹。

然后在.ts文件中，實現獲取當前本地緩存的全部日記功能。首先在.ts文件中添加用到的數據

  data: {id: '',totalDiaryConcent: []   // 全部日記},

然后實現獲取全部本地緩存日記功能

  // 全部日記顯示onShow: function () {// 獲取當前全部日記內容// 必須要新定義一個再賦值才能正常顯示，原因未知var arryTemp = wx.getStorageSync('totalDiaryConcent');this.setData({totalDiaryConcent: arryTemp})},

8.3 刪除日記

長按日記，會彈出提示框，點擊確定后會刪除對應日記，這里有兩個重點問題，首先是如何知道用戶選擇的是哪一條日記，其次是如何刪除用戶選擇的日記。

首先說一下如何知道用戶選擇的哪一條日記，這里利用data-將用戶選中的日記ID傳給.ts文件。

其次說一下知道了用戶想要刪除哪一條日記之后如何將該條日記刪除掉，這里用的方法個人覺得比較巧妙。定義一個新的數組，獲取到傳遞過來的日記ID后利用for循環將除了想要刪除的日記外的之前的本地緩存日記全部重新緩存到新的數組，然后緩存到本地緩存中。

但是需要注意的是，這樣雖然在本地緩存中刪除了想要刪除的日記，但是會發現主頁面中它并沒有消失，此時需要我們在刪除完成后重新渲染一次頁面。

  // 刪除日記內容delet:function(e:any){// 進行作用域外部指向let that = this;wx.showModal({title: '溫馨提示',content: '是否要刪除這條日記？',// 點擊確定后刪除掉對應緩存success (res) {if (res.confirm) {// 獲取傳遞過來的索引var curId = e.currentTarget.dataset.saveid;// 獲取全部日記內容var arryTemp = wx.getStorageSync('totalDiaryConcent');// 設置一個新的數組var newDiaryContent = [];// 利用for循環將不需要刪除的存儲起來for (var i = 0;i < arryTemp.length;i ++) {if (i != curId) {newDiaryContent.push(arryTemp[i])}}// 重新更新全部日記內容，其中不包含要刪除的日記// 一定注意這里不要將新的日記內容用單引號引起來，否則會出現刪除一條日記后冒出來很多條空日記// 而且之后也不能再添加新日記wx.setStorageSync('totalDiaryConcent',newDiaryContent);}// 利用onShow中同樣的方法重新渲染頁面var arryTemp = wx.getStorageSync('totalDiaryConcent');that.setData({totalDiaryConcent: arryTemp})}})},

九、add頁面設計

下面我們來設計一下添加日記的頁面。

9.1 添加文本輸入框

.wxml程序如下

  <!-- 輸入長度默認限制為140，maxlength為-1時表示不限制最大長度 --><textarea class= "the-textarea"  bindinput="getInputText" style="  margin: 5%;width: 90%;height: 90%" maxlength="-1"></textarea>

文本輸入框的輸入時間由函數“getInputText”來處理，用來回去輸入的內容，函數實現在.ts文件。

  // 文字輸入框getInputText(e:any) {//記錄輸入的文字   this.setData({inputText: e.detail.value})},

9.2 添加保存按鈕

  <!-- 保存按鈕 --><button class="the-btn" bindtap="saveButton">保存心情</button>

保存按鈕的點擊事件由“saveButton”函數來處理，函數實現在.ts文件，注釋比較明確，這里就不再贅述了。

  // 保存按鈕saveButton() {// 如果輸入是空if (this.data.inputText.length == 0) {return;}// 輸入內容不為空else {// 獲取本地緩存的之前的所有日記內容var diaryContent = wx.getStorageSync('totalDiaryConcent');// 如果之前有日記內容if (diaryContent != null && diaryContent != '') {// 獲取當前日記總條數var curTotalNum = wx.getStorageSync('totalDiaryNum');// 日記總條數加1作為下一條日記idvar nextDiaryId = curTotalNum + 1;// 添加新日記，id為之前日記總條數加1diaryContent.push({ 'des': this.data.inputText, 'diaryid': nextDiaryId });// 存儲新日記總條數wx.setStorageSync('totalDiaryNum', 'nextDiaryId');}// 之前沒有日記內容，是第一條日記else {diaryContent = [{ 'des': this.data.inputText, 'diaryid': 0 }];// 保存第一條日記wx.setStorageSync('totalDiaryNum', '0');this.setData({id: '0'})}}// 將輸入內容存入緩存wx.setStorageSync('totalDiaryConcent', diaryContent);// 跳轉回上一頁面wx.navigateBack({})},

在.ts文件中，需要先定義好用到的數據

  data: {inputText: '',   // 存儲輸入內容diaryid: ''},

至此，我們來看一下目前實現的效果

十、details頁面設計

最后我們來設計日記詳情頁面，也就是點擊日記，會跳轉到日記詳情。

10.1 跳轉實現

在日記列表也就是list頁面，點擊日記我們應該能夠跳轉到日記詳情頁面。所以我們給每一條日記都增加一個點擊函數“diary_detail”，函數實現是在list的.ts文件中。

  // 查看日記詳情diary_detail:function(e:any){// 獲取點擊的日記的內容var item = e.currentTarget.dataset.content// 將點擊到的日記的內容傳遞到下一個頁面var url = '/pages/details/details?des=' + item.deswx.navigateTo({url: url,})},

10.2 詳情頁面實現

日記詳情顯示較為簡單，需要解決的問題主要有兩個，一個是如何確定用戶想要查看的是哪條日記內容，這個在刪除日記中已經解決。第二個就是如何將用戶想要查看的日記詳情顯示出來，這里說白了就是如何實現頁面間的傳值，將獲取到的日記內容從主頁傳遞到詳情頁面，然后把它渲染到頁面就好啦。

.wxml文件程序如下

<view class="diary-detail"><text>{{showContent}}</text>
</view>

.wxss文件程序如下

.diary-detail{font-size: large;color: #8B4513;/* 多文本自動換行 */word-break:break-all;
}

.ts文件中加入獲取日記內容的函數

  /*** 生命周期函數--監聽頁面加載* 獲取點擊的日記內容*/onLoad(options) {this.setData({showContent: options.des})}

十一、注意事項

• 本地圖片路徑中不要有中文！
• 當前的一些樣式布局是根據IPhon5布局，對于其他機型某些地方可能會出現比例失調或者錯位的情況，可以自行根據需要修改。
• 本程序中的日記全部存儲在本地緩存中，只能本機看到，其他用戶無法看到。