Home  >  Article  >  WeChat Applet  >  Share a simple small program demo

Share a simple small program demo

零下一度
零下一度Original
2018-05-19 16:22:4620082browse

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

Share a simple small program demo

Share a simple small program demo

Share a simple small program demo

Share a simple small program demo

# 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

Share a simple small program demo

Share a simple small program demo

##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;
    }
  • 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)
      {
    
      }
    })

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": "编辑笔记"
    }

    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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn