### [分享一个简单的小程序demo](https://www.prosaas.cn/article/17571)

**Published:** 2018-05-19T08:22:46

**Author:** 5201314

**Excerpt:** 前言这是一个比较简单的小程序demo，就是简单能记录文字笔记而已，两个月前写的，写好没多久就忙着考试了……从我…

# 前言

这是一个比较简单的小程序demo，就是简单能记录文字笔记而已，两个月前写的，写好没多久就忙着考试了……从我一开始接触小程序到写完这项目用了一天不到的时间，服务器是我自己的云服务器（别玩坏了！），用php写的，不多说，你们看demo去吧～

# github

mycloudnote客户端  
mycloudnote服务器端

注意：由于我并没申请取得appid，所以我无法获得用户的微信账号id，我里面用的是用户微信的昵称作为数据库的主键，所以用重名的话可能户出bug，另外由于没有appid，所以所有并没有试过真机测试……

# 截图

![](https://img.php.cn/upload/article/000/001/506/67d95ef60ed490ce833163937ad03820-0.png)

![](https://img.php.cn/upload/article/000/001/506/67d95ef60ed490ce833163937ad03820-1.png)

![](https://img.php.cn/upload/article/000/001/506/230b3224da72a922ed0f5004990f045d-2.png)

![](https://img.php.cn/upload/article/000/001/506/230b3224da72a922ed0f5004990f045d-3.png)

# 关于小程序的个人感悟

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

![](https://img.php.cn/upload/article/000/001/506/f69e3c43459b85bd4395b2112d1da0c6-4.png)

-   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>
    
    对应以下页面
    

![](https://img.php.cn/upload/article/000/001/506/230b3224da72a922ed0f5004990f045d-3.png)

-   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.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文件是用来配置页面的一些属性如页面名称等，并不是用于存储数据的（存储数据操作在js文件中操作）…………
    

//addNote.json
{
    "navigationBarTitleText": "编辑笔记"
}

# 对小程序的一些个人看法

也不知怎么评价好…………暂时还不完善，bug多，但开发也不算麻烦，挺方便的，现在该有的api基本都有了，反正…………我也不知道这玩意能不能翻云覆雨，只是有时间学多门技术也没坏…………

【相关推荐】

1\. 微信小程序完整源码下载

2\. 微信小程序demo:卡卡汽车

3. 外卖：实现类似锚点功能

以上就是分享一个简单的小程序demo的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---