php diy小程序,分享一个简单的小程序demo

前言

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

github

mycloudnote客户端

mycloudnote服务器端

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

截图

关于小程序的个人感悟

这玩意就是html+css+js，如果你熟悉前端那么上手就真的是太快了………………

小程序每个页面由4个文件组成，分别是 .wxml .json .js .wxss

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

题目

正文

添加

对应以下页面

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基本都有了，反正…………我也不知道这玩意能不能翻云覆雨，只是有时间学多门技术也没坏…………

【相关推荐】