Home > Article > WeChat Applet > Share a simple small program demo
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~
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...
Each page of the mini program consists of 4 files, respectively. Yes.wxml .json .js .wxss
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>
corresponds to the following page
/*addNote.wxss*/ .log-list { display: flex; flex-direction: column; padding: 40rpx; } .submit { padding: 20rpx; } .hide { display: none; } .label { margin-left: 20px; }
//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) { } })
//addNote.json { "navigationBarTitleText": "编辑笔记" }Some personal opinions on the small program
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!