无需后台也能快速开发可演示的微信小应用（应用号）

如何快速开发可演示的微信小应用（应用号）

微信小程序最近刷爆朋友圈和微博，一个星期了就没消停过。于是我也出来打个酱油，尝试做了个小demo。本文演示了如何快速的快速开发一个事件提醒的微信小应用。

功能需求

首先先说说功能需求：

用户输入事件标题和提醒时间后保存

列出全部事件

对一条事件进行修改或删除

后端定时任务，到了时间指定的提醒时间后，发送短信给用户手机

创建应用号微信小应用

打开“微信web开发者工具”v0.9版本，添加项目，随便输入AppID，随便输入项目名称，选择一个本地项目目录。

选中“在当前目录中创建quick start项目”,可以生成一个快速启动的程序页面，便于修改。



点击“添加项目”按钮后，进入项目界面，可以看到初始的页面样子：



点击用户头像后，进入查看log的界面。我们先把标题改一下，点击“编辑”按钮，打开Pages-index-index.js文件。



把

motto: 'Hello
World'

改为我们的新标题。

motto: '我的事件提醒工具'

把点击头像跳转的页面改为eventList

bindViewTap: function()
wx.navigateTo({
url: '../logs/logs'
})
},

改为：

bindViewTap: function()
wx.navigateTo({
url: '../eventList/eventList'
})
},

下面我们添加一个“eventList”事件列表的页面，在Pages下面添加目录和相关的js,json,wxml,wxss文件。

注意，首先要在app.json中添加新的页面设置才能访问新的页面：

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/eventList/eventList"
],

设计一下事件列表的主界面eventList.wxml，用block循环显示事件列表：

<!--eventList.wxml-->
<view class="container">
<block wx:for="{{events}}" wx:for-item="event">
<view class="event">
<text>{{event.time}} - {{event.name}}</text>
</view>
</block>
</view>

编写eventList.js代码，访问后端mashupcloud的API返回事件列表。

首先用http://baidu.com来测试网络连接：

//eventList.js
var util = require('../../utils/util.js')
Page({
data: {
},
onLoad: function () {
var that = this
url = 'http://baidu.com/'
wx.request({
url: url,
success: function(res) {
console.log(res.data)
},
fail: function() {
console.log('fail to request')
},
complete: function() {
console.log('request complete url='+url)
}
})
}
})

点击“重启”按钮后点击“调试”按钮，运行小程序，然后点击用户头像，进入事件列表页，此时控制台console中会显示用wx.request抓取到的网页的内容：



前端开发过程中，可以先用模拟数据来代替后端数据，以便快速完成前端开发。

我们在eventList.js中添加一段模拟的events数据：

Page({
data: {
events: [
{name:'去上班', time: '2016-09-25 12:34:56'},
{name:'接孩子', time: '2016-09-25 15:00:00'},
{name:'去健身', time: '2016-09-25 18:30:00'}
]
},

重新运行后，可以看到效果：



下一步，我们给事件项添加点击事件处理：

<!--eventList.wxml-->
<view class="container event-list">
<block wx:for="{{events}}" wx:for-item="event">
<text id="{{event.id}}" bindtap="bindEventItemTap" class="event-item">{{event.time}} - {{event.name}}</text>
</block>
</view>

注意，要给text设置id，以便点击后访问，此处绑定了bindEventItemTap方法。

回到eventList.js中添加这个方法：

Page({
…
onLoad: function () {
…
},
bindEventItemTap: function(obj) {
console.log(obj)
var id = obj.target.id
wx.navigateTo({
url: '../event/event?id='+id
})
}
})

点击一个事件项后，跳转到编辑页面event，同时传递id参数表示选中的事件。

我们新建一个编辑事件的页面event，其中有form表单和输入框和按钮等：

<!--event.wxml-->
<view class="container">
<form bindsubmit="formSubmit">
<view class="section">
<view class="section__title">事件名称</view>
<input name="name" placeholder="请输入事件名称" />
</view>
<view class="section">
<view class="section__title">提醒时间</view>
<input name="time" placeholder="请输入提醒时间" />
</view>
<view class="btn-area">
<button formType="submit">保存</button>
</view>
</form>
</view>

别忘记在app.json中添加新的页面event：

"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/eventList/eventList",
"pages/event/event"
],

我们编写新的event.js如下：

Page({
data:{
options:{}
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({options: options})
},
formSubmit: function(e) {
//console.log(e.detail.value)
var id = this.data.options.id
var name = e.detail.value.name
var time = e.detail.value.time
console.log('submit id='+id+', name='+name+', time='+time)
//提交数据到后端
wx.request({
url: '待定',
data: {
id: id,
name: name,
time: time
},
success:function(res) {
console.log('ok')
//返回事件列表页
wx.navigateBack();
},
fail: function() {
console.log('fail')
//返回事件列表页
wx.navigateBack();
}
});
}
})

至此，前端基本功能框架都实现了，细节代码，比如样式布局什么的，大家可以自行完善。但是这个小程序还不能达到演示的要求，因为后端代码还没实现。目前应该很有很多前端不会写后端代码，为了更快的实现后端接口，让DEMO演示起来更加贴近现实，找个简单快速的后端接口平台最节省时间。

连接mashupcloud后端

这个小程序中有2个地方要连接后端：

得到事件列表

提交保存事件信息

我们现在使用免费的后端云平台mashupcloud.cn（聚云）来快速实现后端功能。

打开浏览器访问 http://mashupcloud.cn/ 登陆进入聚云平台：



创建一个应用，名称是“我的事件提醒”，点击进入这个应用的界面中：

用mashupcloud后端建模和API调用

下面，点击“我的模型”菜单，我们创建数据模型Event，然后，给数据模型添加字段id, name, time，如下图：



在mashupcloud中，创建好一个数据模型后，就相当于创建了一个数据库表，同时还自动生成了这个数据模型相关的常用CRUD功能的API，可以对表结构和表数据进行管理，同时还可以调试API。

我们先手工添加几条测试数据，如下图：



可以点击“我的API”菜单查看常用的API功能使用说明。

对于我们小程序前端的连接需求，我们使用3个相关的API即可：

得到事件列表，使用LIST的API

提交保存事件信息，添加使用ADD，修改使用EDIT

在访问mashupcloud的API之前，首先要用app的appkey和appsecret进行认证，得到token。

我们在app.js中进行app认证，并把得到的token保存到globalData中。

返回数据示例：[“OK”, “GpjDmxKMBNlpGcHdXpjQlRyDQlzsTOPX”]

//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
//mashupcloud的app认证
auth()
},
auth: function() {
var that = this;
var url = 'http://hw.mashupcloud.cn/mcloud/developer/auth.do'
wx.request({
url: url,
data: {
appkey: '替换为你的appkey',
appsecret: '替换为你的appsecret'
},
success: function(res) {
console.log(res.data)
//返回格式：[“OK”, “token”]
var token = res.data[1]
this.globalData.token = token
}
})
},
globalData:{
userInfo:null,
token:''
}

然后，修改eventList中的url，访问LIST的API。

先获取应用实例：

//获取应用实例
var app = getApp()
Page({
…

然后，修改url为LIST的API，传递token参数：

onLoad: function () {
var that = this
url = 'http://hw.mashupcloud.cn/mcloud/LIST/Event/'
wx.request({
url: url,
data: {
token: app.globalData.token
},
success: function(res) {
console.log(res.data)
//返回格式：["OK", [翻页数据], [实体列表]]
//把事件列表保存到data中显示
that.data.events = res.data[2]
},

同时，把之前的demo数据去掉：

Page({
data: {
events: []
},

重新启动小程序调试，运行结果如下图，可以看到事件列表数据已经从后端API返回了：



最后，我们再修改一下保存事件的url。

//event.js
Page({
data:{
options:{}
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({options: options})
},
formSubmit: function(e) {
//console.log(e.detail.value)
var id = this.data.options.id
var name = e.detail.value.name
var time = e.detail.value.time
console.log('submit id='+id+', name='+name+', time='+time)
var url = ''
if (id == undefined) {
//添加
url = 'http://hw.mashupcloud.cn/mcloud/ADD/Event/'
}elseelse{
//修改
url = 'http://hw.mashupcloud.cn/mcloud/EDIT/Event/'
}
//提交数据到后端
wx.request({
url: url,
data: {
id: id,
name: name,
time: time
},
success:function(res) {
console.log('ok')
//返回事件列表页
wx.navigateBack();
},
fail: function() {
console.log('fail')
//返回事件列表页
wx.navigateBack();
}
});
}
})

保存后，返回列表页面，数据已经更新了。

完成小程序，结果展示

至此，一个完整的微信公众号小程序就完成了，包括前端和后端的功能都实现了。可以看出，用mashupcloud来实现后端，只要创建数据模型后，甚至都不用写后端代码就能直接调用CRUD等基本功能的API了，这极大的提高了app开发效率。

demo源代码下载：https://pan.baidu.com/s/1bo34IAz