前言

這是一個比較簡單的小程序demo，就是簡單能記錄文字筆記而已，兩個月前寫的，寫好沒多久就忙著考試了……從我一開始接觸小程序到寫完這項(xiàng)目用了一天不到的時間，服務(wù)器是我自己的云服務(wù)器（別玩壞了！），用php寫的，不多說，你們看demo去吧～

github

mycloudnote客戶端
mycloudnote服務(wù)器端

注意：由于我并沒申請取得appid，所以我無法獲得用戶的微信賬號id，我里面用的是用戶微信的昵稱作為數(shù)據(jù)庫的主鍵，所以用重名的話可能戶出bug，另外由于沒有appid，所以所有并沒有試過真機(jī)測試……

截圖

關(guān)于小程序的個人感悟

這玩意就是html+css+js，如果你熟悉前端那么上手就真的是太快了………………
小程序每個頁面由4個文件組成，分別是 .wxml .json .js .wxss

• wxml文件和html很像，也是一種類xml的語言，應(yīng)該說wxml就是為了小程序而改編的html，去掉一些html標(biāo)簽添加一些新標(biāo)簽，懂html的話十分簡單掌握，看官方api就行,下面是demo中的一個wxml頁面代碼…………

<!--addNote.wxml-->
<form bindsubmit="save">
<label class="label">題目</label>
<view class="log-list">
<input name="title" type="text" value="{{title}}" placeholder="題目"/>
</view>
<label class="label">正文</label>
<view class="log-list">
<textarea name="context" value="{{context}}" auto-height placeholder="輸入記錄的內(nèi)容" maxlength="-1"/>
<view class="submit"><button form-type="submit">添加</button></view>
</view>
</form>

對應(yīng)以下頁面

• wxss文件是小程序版的css，也是很簡單，看官方文檔就行～就像這樣(和上面的wxml結(jié)合):

/*addNote.wxss*/
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.submit
{
  padding: 20rpx;
}
.hide
{
  display: none;
}
.label
{
  margin-left: 20px;
}

• js文件就是平時的javascript，用于處理業(yè)務(wù)邏輯和數(shù)據(jù)，不同的是這里面都是調(diào)用一些小程序內(nèi)置的方法，而且?guī)缀跛械臉I(yè)務(wù)邏輯處理都寫在一個叫Page()的方法里，具體參照官方文檔～

//addNote.js
var app = getApp()
Page({
  data: {
    title:'',
    context:'',
    noteID:'',
  }
  ,
  save: function(e)
  {
    app.getUserInfo(function(userInfo){
      wx.request({
      url: 'http://139.199.74.155/myCloudNote/addNote.php',
      data: {
        userid:userInfo.nickName,
        title:e.detail.value.title,
        context:e.detail.value.context
      },
      header: {'content-type':'application/x-www-form-urlencoded'},
      method: 'POST', 
      success: function(res){
        wx.redirectTo({
          url:'../list/list'
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  })
  },
  onLoad: function(options)
  {
     
  }
})

• json文件是用來配置頁面的一些屬性如頁面名稱等，并不是用于存儲數(shù)據(jù)的（存儲數(shù)據(jù)操作在js文件中操作）…………

//addNote.json
{
    "navigationBarTitleText": "編輯筆記"
}

對小程序的一些個人看法

也不知怎么評價好…………暫時還不完善，bug多，但開發(fā)也不算麻煩，挺方便的，現(xiàn)在該有的api基本都有了，反正…………我也不知道這玩意能不能翻云覆雨，只是有時間學(xué)多門技術(shù)也沒壞…………