如何快速开发可演示的微信小程序

By | | | 访问次数： 1,184 次

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

功能需求

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

创建应用号微信小应用

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

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

001

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

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

003

把motto: 'Hello World'改为我们的新标题。

js 代码:
  1. motto: ‘我的事件提醒工具’

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

js 代码:
  1. bindViewTap: function()
  2. wx.navigateTo({
  3. url: ‘../logs/logs’
  4. })
  5. },

改为：

js 代码:
  1. bindViewTap: function()
  2. wx.navigateTo({
  3. url: ‘../eventList/eventList’
  4. })
  5. },

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

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

js 代码:
  1. {
  2. “pages”:[
  3. “pages/index/index”,
  4. “pages/logs/logs”,
  5. “pages/eventList/eventList”
  6. ],

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

html 代码:
  1. <!–eventList.wxml–>
  2. <view class=“container”>
  3. <block wx:for=“{{events}}” wx:for-item=“event”>
  4. <view class=“event”>
  5. <text>{{event.time}} – {{event.name}}</text>
  6. </view>
  7. </block>
  8. </view>

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

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

js 代码:
  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抓取到的网页的内容：

004

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

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

js 代码:
  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. },

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

005

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

js 代码:
  1. <!–eventList.wxml–>
  2. <view class=“container event-list”>
  3. <block wx:for=“{{events}}” wx:for–item=“event”>
  4. <text id=“{{event.id}}” bindtap=“bindEventItemTap” class=“event-item”>{{event.time}} – {{event.name}}</text>
  5. </block>
  6. </view>

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

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

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表单和输入框和按钮等：

html 代码:
  1. <!–event.wxml–>
  2. <view class=“container”>
  3. <form bindsubmit=“formSubmit”>
  4. <view class=“section”>
  5. <view class=“section__title”>事件名称</view>
  6. <input name=“name” placeholder=“请输入事件名称” />
  7. </view>
  8. <view class=“section”>
  9. <view class=“section__title”>提醒时间</view>
  10. <input name=“time” placeholder=“请输入提醒时间” />
  11. </view>
  12. <view class=“btn-area”>
  13. <button formType=“submit”>保存</button>
  14. </view>
  15. </form>
  16. </view>

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

js 代码:
  1. “pages”:[
  2. “pages/index/index”,
  3. “pages/logs/logs”,
  4. “pages/eventList/eventList”,
  5. “pages/event/event”
  6. ],

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

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/ 登陆进入聚云平台：

006

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

007

用mashupcloud后端建模和API调用

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

008

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

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

009

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

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

  • 得到事件列表，使用LIST的API
  • 提交保存事件信息，添加使用ADD，修改使用EDIT

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

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

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

js 代码:
  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。

先获取应用实例：

js 代码:
  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. …

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

js 代码:
  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数据去掉：

js 代码:
  1. Page({
  2. data: {
  3. events: []
  4. },

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

011

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

js 代码:
  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

打赏
Bookmark the permalink.
0 0 投票数
文章评分
订阅评论
提醒
guest

4 评论
内联反馈
查看所有评论