首页 > 资讯 > 微信公众平台开发 > 正文

教你如何快速开发可演示的微信小应用

18-04-27 来源：[db:作者]

收藏我要投稿

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

功能需求

首先先说说功能需求：
用户输入事件标题和提醒时间后保存
列出全部事件
对一条事件进行修改或删除
后端定时任务，到了时间指定的提醒时间后，发送短信给用户手机
创建应用号微信小应用

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

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

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

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

把motto: 'Hello World'改为我们的新标题。
1. motto: '我的事件提醒工具'
把点击头像跳转的页面改为eventList
1. bindViewTap: function()
2. wx.navigateTo({
3. url: '../logs/logs'
4. })
5. },
改为：
1. bindViewTap: function()
2. wx.navigateTo({
3. url: '../eventList/eventList'
4. })
5. },
下面我们添加一个“eventList”事件列表的页面，在Pages下面添加目录和相关的js,json,wxml,wxss文件。

注意，首先要在app.json中添加新的页面设置才能访问新的页面：
1. {
2. "pages":[
3. "pages/index/index",
4. "pages/logs/logs",
5. "pages/eventList/eventList"
6. ],
设计一下事件列表的主界面eventList.wxml，用block循环显示事件列表：
5. {{event.time}} - {{event.name}}
编写eventList.js代码，访问后端mashupcloud的API返回事件列表。

首先用http://baidu.com来测试网络连接：
1. //eventList.js
2. var util = require('../../utils/util.js')
3. Page({
4. data: {
5. },
6. onLoad: function () {
7. var that = this
8. url = 'http://baidu.com/'
9. wx.request({
10. url: url,
11. success: function(res) {
12. console.log(res.data)
13. },
14. fail: function() {
15. console.log('fail to request')
16. },
17. complete: function() {
18. console.log('request complete url='+url)
19. }
20. })
21. }
22. })
点击“重启”按钮后点击“调试”按钮，运行小程序，然后点击用户头像，进入事件列表页，此时控制台console中会显示用wx.request抓取到的网页的内容：

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

我们在eventList.js中添加一段模拟的events数据：
1. Page({
2. data: {
3. events: [
4. {name:'去上班', time: '2016-09-25 12:34:56'},
5. {name:'接孩子', time: '2016-09-25 15:00:00'},
6. {name:'去健身', time: '2016-09-25 18:30:00'}
7. ]
8. },
重新运行后，可以看到效果：

下一步，我们给事件项添加点击事件处理：
4. {{event.time}} - {{event.name}}
注意，要给text设置id，以便点击后访问，此处绑定了bindEventItemTap方法。

回到eventList.js中添加这个方法：
1. Page({
2. …
3. onLoad: function () {
4. …
5. },
6. bindEventItemTap: function(obj) {
7. console.log(obj)
8. var id = obj.target.id
9. wx.navigateTo({
10. url: '../event/event?id='+id
11. })
12. }
13. })
点击一个事件项后，跳转到编辑页面event，同时传递id参数表示选中的事件。

我们新建一个编辑事件的页面event，其中有form表单和输入框和按钮等：
```
<ol class="linenums">
<li class="L0" value="1"></li>
<li class="L1"><view class="container"></view></li>
<li class="L2">
<form bindsubmit="formSubmit">
	<ul>
	<li class="L3"><view class="section"></view></li>
	<li class="L4"><view class="section__title">事件名称</view></li>
	<li class="L5"><input name="name" placeholder="请输入事件名称" /></li>
	<li class="L6">&nbsp;</li>
	<li class="L7"><view class="section"></view></li>
	<li class="L8"><view class="section__title">提醒时间</view></li>
	<li class="L9"><input name="time" placeholder="请输入提醒时间" /></li>
	<li class="L0">&nbsp;</li>
	<li class="L1"><view class="btn-area"></view></li>
	<li class="L2"><button formtype="submit">保存</button></li>
	<li class="L3">&nbsp;</li>
	<li class="L4">&nbsp;</li>
	</ul>
</form>
</li>
<li class="L5">&nbsp;</li>
</ol>
```
别忘记在app.json中添加新的页面event：
1. "pages":[
2. "pages/index/index",
3. "pages/logs/logs",
4. "pages/eventList/eventList",
5. "pages/event/event"
6. ],
我们编写新的event.js如下：
1. Page({
2. data:{
3. options:{}
4. },
5. onLoad:function(options){
6. // 页面初始化 options为页面跳转所带来的参数
7. this.setData({options: options})
8. },
9. formSubmit: function(e) {
10. //console.log(e.detail.value)
11. var id = this.data.options.id
12. var name = e.detail.value.name
13. var time = e.detail.value.time
14. console.log('submit id='+id+', name='+name+', time='+time)
15. //提交数据到后端
16. wx.request({
17. url: '待定',
18. data: {
19. id: id,
20. name: name,
21. time: time
22. },
23. success:function(res) {
24. console.log('ok')
25. //返回事件列表页
26. wx.navigateBack();
27. },
28. fail: function() {
29. console.log('fail')
30. //返回事件列表页
31. wx.navigateBack();
32. }
33. });
34. }
35. })
至此，前端基本功能框架都实现了，细节代码，比如样式布局什么的，大家可以自行完善。但是这个小程序还不能达到演示的要求，因为后端代码还没实现。目前应该很有很多前端不会写后端代码，为了更快的实现后端接口，让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”]
    1. //app.js
    2. App({
    3. onLaunch: function () {
    4. //调用API从本地缓存中获取数据
    5. var logs = wx.getStorageSync('logs') || []
    6. logs.unshift(Date.now())
    7. wx.setStorageSync('logs', logs)
    8. //mashupcloud的app认证
    9. auth()
    10. },
    11. auth: function() {
    12. var that = this;
    13. var url = 'http://hw.mashupcloud.cn/mcloud/developer/auth.do'
    14. wx.request({
    15. url: url,
    16. data: {
    17. appkey: '替换为你的appkey',
    18. appsecret: '替换为你的appsecret'
    19. },
    20. success: function(res) {
    21. console.log(res.data)
    22. //返回格式：[“OK”, “token”]
    23. var token = res.data[1]
    24. this.globalData.token = token
    25. }
    26. })
    27. },
    28. globalData:{
    29. userInfo:null,
    30. token:''
    31. }
    然后，修改eventList中的url，访问LIST的API。
    
    先获取应用实例：
    1. //获取应用实例
    2. var app = getApp()
    3. Page({
    4. …
    然后，修改url为LIST的API，传递token参数：
    1. onLoad: function () {
    2. var that = this
    3. url = 'http://hw.mashupcloud.cn/mcloud/LIST/Event/'
    4. wx.request({
    5. url: url,
    6. data: {
    7. token: app.globalData.token
    8. },
    9. success: function(res) {
    10. console.log(res.data)
    11. //返回格式：["OK", [翻页数据], [实体列表]]
    12. //把事件列表保存到data中显示
    13. that.data.events = res.data[2]
    14. },
    同时，把之前的demo数据去掉：
    1. Page({
    2. data: {
    3. events: []
    4. },
    重新启动小程序调试，运行结果如下图，可以看到事件列表数据已经从后端API返回了：
    
    最后，我们再修改一下保存事件的url。
    1. //event.js
    2. Page({
    3. data:{
    4. options:{}
    5. },
    6. onLoad:function(options){
    7. // 页面初始化 options为页面跳转所带来的参数
    8. this.setData({options: options})
    9. },
    10. formSubmit: function(e) {
    11. //console.log(e.detail.value)
    12. var id = this.data.options.id
    13. var name = e.detail.value.name
    14. var time = e.detail.value.time
    15. console.log('submit id='+id+', name='+name+', time='+time)
    16. var url = ''
    17. if (id == undefined) {
    18. //添加
    19. url = 'http://hw.mashupcloud.cn/mcloud/ADD/Event/'
    20. }elseelse{
    21. //修改
    22. url = 'http://hw.mashupcloud.cn/mcloud/EDIT/Event/'
    23. }
    24. //提交数据到后端
    25. wx.request({
    26. url: url,
    27. data: {
    28. id: id,
    29. name: name,
    30. time: time
    31. },
    32. success:function(res) {
    33. console.log('ok')
    34. //返回事件列表页
    35. wx.navigateBack();
    36. },
    37. fail: function() {
    38. console.log('fail')
    39. //返回事件列表页
    40. wx.navigateBack();
    41. }
    42. });
    43. }
    44. })
    保存后，返回列表页面，数据已经更新了。
    
    完成小程序，结果展示
    
    至此，一个完整的微信公众号小程序就完成了，包括前端和后端的功能都实现了。可以看出，用mashupcloud来实现后端，只要创建数据模型后，甚至都不用写后端代码就能直接调用CRUD等基本功能的API了，这极大的提高了app开发效率。
    
    demo源代码下载：https://pan.baidu.com/s/1bo34IAz

点击复制链接与好友分享!回本站首页

教你如何快速开发可演示的微信小应用

功能需求

创建应用号微信小应用

连接mashupcloud后端

用mashupcloud后端建模和API调用

完成小程序，结果展示