Preface

This is a relatively simple small program demo that can simply record text notes. I wrote it two months ago. I was busy with the exam not long after I finished it... From the beginning It took less than a day from being exposed to small programs to writing this project. The server is my own cloud server (don’t mess with it!), written in PHP. I won’t go into details, just watch the demo~

github

mycloudnote client
mycloudnote server

Note: Since I did not apply for the appid, I cannot get the user’s WeChat account id. I use the user The nickname of WeChat is used as the primary key of the database, so if you use the same name, there may be bugs. In addition, since there is no appid, there is no real device test...

Screenshot

# Personal information about the mini program Insights

This thing is html+css+js. If you are familiar with the front-end, it will be really fast to get started.........

Each page of the mini program consists of 4 files, respectively. Yes.wxml .json .js .wxss

• wxml file is very similar to html, and is also an xml-like language. It should be said wxml It is html adapted for small programs. Remove some

  html tags and add some new tags. If you understand html, it is very easy to master. Just look at the official api. Here is a wxml page in the demo. Code.........

  <!--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>

  Copy after login
  corresponds to the following page

##wxss file is a small program The version of css is also very simple, just read the official document ~ like this (combined with the wxml above):

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

Copy after login

• js file is the usual
javascript
• , It is used to process business logic and data. The difference is that some methods built into small programs are called, and almost all business logic processing is written in a method called Page(). Please refer to the official documentation for details~

  //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)
    {
  
    }
  })

  Copy after login

json file is used to configure some attributes of the page such as page name, etc., and is not used to store data (the data storage operation is performed in the js file)... ……

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

  Copy after login
  Some personal opinions on the small program

I don’t know how to evaluate it well…………It is not perfect yet and has many bugs, but development is not considered Trouble, it's very convenient. The APIs that should be there are basically all available now. Anyway... I don't know if this thing can turn everything around, but it's not bad if I have time to learn multiple technologies...

[Related recommendations]

1.

Complete source code download of WeChat mini program

2. WeChat mini program demo: Kaka Auto

3. Takeaway: Implement similar anchor function

The above is the detailed content of Share a simple small program demo. For more information, please follow other related articles on the PHP Chinese website!