前言

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

github

mycloudnote客户端
mycloudnote服务器端

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

截图

程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步

关于小程序的个人感悟

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

• wxml文件和html很像，也是一种类xml的语言，应该说wxml就是为了小程序而改编的html，去掉一些html标签添加一些新标签，懂html的话十分简单掌握，看官方api就行,下面是demo中的一个wxml页面代码…………

  
  
  题目
  
  
  
  正文
  
  <view class="submit"><button form-type="submit">添加</button></view>
  </view>
  </form></pre>登录后复制</code><p>对应以下页面</p></li></ul><p class="image-package"><img src="https://img.zzsucai.com/202210/08/230b3224da72a922ed0f5004990f045d-3.png" width="330" height="482"/><br/></p><ul class=" list-paddingleft-2"><li><p>wxss文件是小程序版的css，也是很简单，看官方文档就行～就像这样(和上面的wxml结合):</p><code style="position:relative;"><pre class="brush:html;toolbar:false;">/*addNote.wxss*/
  .log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  }
  .submit
  {
  padding: 20rpx;
  }
  .hide
  {
  display: none;
  }
  .label
  {
  margin-left: 20px;
  }</pre>登录后复制</code></li><li><p>js文件就是平时的javascript，用于处理业务逻辑和数据，不同的是这里面都是调用一些小程序内置的方法，而且几乎所有的业务逻辑处理都写在一个叫Page()的方法里，具体参照官方文档～</p></li></ul><code style="position:relative;"><pre class="brush:html;toolbar:false;">//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)
    {
  
    }
  })</pre>登录后复制</code><ul class=" list-paddingleft-2"><li><p>json文件是用来配置页面的一些属性如页面名称等，并不是用于存储数据的（存储数据操作在js文件中操作）…………</p></li></ul><code style="position:relative;"><pre class="brush:html;toolbar:false;">//addNote.json
  {
      "navigationBarTitleText": "编辑笔记"
  }</pre>登录后复制</code><h1>对小程序的一些个人看法</h1><p>也不知怎么评价好…………暂时还不完善，bug多，但开发也不算麻烦，挺方便的，现在该有的api基本都有了，反正…………我也不知道这玩意能不能翻云覆雨，只是有时间学多门技术也没坏…………</p><p>【相关推荐】</p><p>1. 微信小程序完整源码下载</p><p>2. 微信小程序demo:卡卡汽车</p><p>3. 外卖：实现类似锚点功能<p>以上就是分享一个简单的小程序demo的详细内容，更多请关注zzsucai.com其它相关文章！</p></span><p align="center"><img src="https://img.zzsucai.com/202210/08/phpgzh.png" style='width:100%;' /></p><div class="keyword"><i class="fa fa-tags"></i>  标签：
        <a class="tag" href="https://www.zzsucai.com/tag/8876.html" title="小程序，demo," target="_blank">小程序，demo,</a></div></div><div class="google-ad"><a href="/vip.html" target="_blank" title="VIP会员"><img src="https://img.zzsucai.com/202007/09/200709103447367.jpg"></a></div><div class="project-content"><div class="thumbile"><a class="nbtn nbtn-sc" id="favoriteBtn" onclick="favorite('15541')"><i class="fa fa-heart-o"></i> 收藏</a></div><div class="intsCon">      积分说明：注册即送10金币，每日签到可获得更多金币，成为VIP会员可免金币下载！ 
        <a href="https://www.zzsucai.com/member/index/recharge_index.html" target="_blank">充值积分</a><a href="https://www.zzsucai.com/vip.html" target="_blank">充值会员</a><a href="https://www.zzsucai.com/help/jifen.html" target="_blank">更多说明»</a></div></div><div class="project-content project-top-border"><link rel="stylesheet" type="text/css" href="https://www.zzsucai.com/static/js/share/share.min.css"><script src="https://www.zzsucai.com/static/js/share/jquery.share.min.js"></script><div id="share-1" data-weibo-title="2022分享一个简单的小程序demo" data-qq-title="2022分享一个简单的小程序demo"></div><script>    $('#share-1').share({sites: ['weibo','qq','qzone','wechat','douban']});
      </script></div><div class="project-content project-top-border"><div class="social"><div class="social-inner"><a class="social-left" href="https://www.zzsucai.com/biancheng/15540.html"><i class="fa fa-chevron-left" aria-hidden="true"></i><span>2022微信小程序 数组（增，删，改，查）等操作实例详解<span></span></span></a><div class="social-round"><div class="social-round-border"><span></span></div><i onclick="Backtop();" class="social-round-inner fa fa-arrow-up" aria-hidden="true"></i></div><a class="social-right" href="https://www.zzsucai.com/biancheng/15542.html"><span>2022微信小程序Page中data数据操作和函数调用详细介绍</span><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></div></div><div class="in2-tit"><h4><i class="fa fa-comments-o" aria-hidden="true"></i> 讨论这个素材（0）<span class="z14">回答他人问题或分享使用心得奖励金币</span></h4></div><div class="in2" id="meglist"><a name="anchor"></a><p id="no-m-data">〒_〒 居然一个评论都没有……</p></div><div class="message in2"><div class="alert-success" id="err"></div><textarea id="body" class="textarea" style="height:120px; width:100%;" placeholder="您有什么想法要说的吗？帮助他人、分享技术会获得积分奖励！">
  表情  文明上网，理性发言！  发表评论