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

mycloudnote客戶端
mycloudnote服務器端

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

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

• wxml文件和html很像，也是一種類xml的語言，應該說wxml就是為了小程序而改編的html，去掉一些html標簽添加一些新標簽，懂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="輸入記錄的內容" maxlength="-1"/><view class="submit"><button form-type="submit">添加</button></view></view></form>

  對應以下頁面

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

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

• js文件就是平時的javascript，用于處理業務邏輯和數據，不同的是這里面都是調用一些小程序內置的方法，而且幾乎所有的業務邏輯處理都寫在一個叫Page()的方法里，具體參照官方文檔～

//addNote.jsvar 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文件是用來配置頁面的一些屬性如頁面名稱等，并不是用于存儲數據的（存儲數據操作在js文件中操作）…………

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

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

【相關推薦】

1. 微信小程序完整源碼下載

2. 微信小程序demo:卡卡汽車

3. 外賣：實現類似錨點功能

以上就是分享一個簡單的小程序demo的詳細內容，更多請關注 其它相關文章！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。