微信小程序入門實例之記事本

主要實現思想都在代碼的注釋中，項目源碼見github

首先上項目目錄

app.js文件代碼如下：

//app.js
App({
  onLaunch: function() {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },

  getUserInfo: function(cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //調用登錄接口
      wx.getUserInfo({
        withCredentials: false,
        success: function(res) {
          that.globalData.userInfo = res.userInfo
          typeof cb == "function" && cb(that.globalData.userInfo)
        }
      })
    }
  },

  globalData: {
    userInfo: null
  }
})

app.json文件代碼如下：

{
  "pages":[
    "pages/mylist/mylist",
    "pages/myadd/myadd"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

mylist.wxml文件代碼如下：

<view class="page">
<scroll-view scroll-y class="list-box">
      <block wx:for="{{mylists}}">
      <!--根據id確定 每一條內容-->
           <view class="list-i" bindtap="edit" data-id="{{item.id}}">
                    <view class="content">{{item.content}}</view>
                    <view class="date">{{item.time}}</view>
            </view>
      </block>
</scroll-view>
<view class="edit" bindtap="add">
      <image src="../../img/edit.png"></image>
</view>

</view>

mylist.js文件代碼如下：

var timeFormat=require("../../utils/util")


Page({
  onload:function(){
    initData(this);
  },
  onShow:function(){
    initData(this);
  },
  edit(e){
    // 修改原有的記事本內容
    console.log("myedit")
    var myid=e.currentTarget.dataset.id;
    console.log(myid);
    wx.navigateTo({
      url: '../myadd/myadd?id='+myid,
    })
  },
  add(){
    // 增加新的記事本內容
    console.log("my add");
    wx.navigateTo({
      url: '../myadd/myadd'
    })
  },
  data:{
    mylists:[]
  }
})

// 每次onload和onshow從本地存儲中獲取數據
function initData(page){
      var txt=wx.getStorageSync("txt");
      if(txt.length){
         txt.forEach(function(item,i){
          //  循環每一項數據，並格式化時間戳
             var t=new Date(Number(item.time));
             item.time=timeFormat.formatTime(t);
         })
      }
     page.setData({
      //  將獲取到的數據綁定到本頁面實例中
       mylists:txt
     })
}

myadd.wxml文件如下：

<view class="classname">
      <input class="txt-input" placeholder="請輸入內容" bindinput="change" value="{{content}}"/>
</view>
<view class="btn-box">
     <view class="cancel" bindtap="cancel">取消</view>
     <view class="sure" bindtap="sure">確定</view>
</view>

myadd.js文件如下：

Page({
  data:{},
  // bindinput 事件，內容修改后綁定到本頁面實例
  change(e){
    console.log(e);
    this.setData({
      content:e.detail.value
    })
  },
  // 點擊取消按鈕后返回上級頁面
  cancel(){
    wx.navigateBack();
  },
  // 點擊確定后更新數據
  sure(){
    // 點擊確定時 若內容為空格，直接返回上級
    var re = /^\s*$/g;
    if (!this.data.content || re.test(this.data.content)) {
      return;
    }
    //  點擊確定時，更新時間戳，並綁定到頁面實例（必須在 setValue之前調用）
    this.setData({
      time:Date.now()
    })
    // 將新內容更新到localstorage
    setValue(this);
    wx.navigateBack()
  },
  onLoad(e){
    // 頁面加載后首先獲取上級頁面傳來的id
     var id=e.id;
     if(id){
      //  若存在id 則為修改記事本內容
        getData(id,this);
     }else{
      //  不存在id則為新增記事本內容
       this.setData({
        //  為新增的記事本內容增加記事本id 並綁定到頁面實例
         id:Date.now()
       })
     }
  }
})


function getData(id,page){
  // 從本地存儲獲取數據
     var arr=wx.getStorageSync("txt");
     arr.forEach(function(item){
         if(arr.length){
          //  遍歷數據並根據id顯示當前記事本內容
           if(item.id==id){
               page.setData({
                //  匹配記事本后將id與content綁定到頁面實例
                 id:item.id,
                 content:item.content
               })
           }
         }
     })
}


function setValue(page){
    var arr=wx.getStorageSync("txt");
    var data=[],flag=true;
    // data數組用於存儲更新或新加的記事本內容
    if(arr.length){
      // 修改原有記事本內容
      arr.forEach(function(item){
        if(item.id==page.data.id){
            item.time=Date.now();
            item.content=page.data.content;
            // flag用於控制 是修改記事本內容還是新增記事本內容
            flag=false;
        }
        data.push(item);
      })
    }
    // 新增記事本內容
    if(flag){
       data.push(page.data)
    }
    // 最后將新的內容加至localStore中
    wx.setStorageSync("txt", data)
}

util.js文件代碼如下：

// 格式化時間函數
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
// 時間補零
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
// 對外提供接口
module.exports = {
  formatTime: formatTime
}

微信小程序，在摸索中前進，歡迎大家批評指正！