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

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

功能需求

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

创建应用号微信小应用

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

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

001

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

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

003

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

004

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

我们在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'}
    ]
  },

重新运行后,可以看到效果:

005

下一步,我们给事件项添加点击事件处理:

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

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”]

//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返回了:

011

最后,我们再修改一下保存事件的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

 

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 如何快速开发可演示的微信小应用(应用号)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    好文章!!!尝试一下!

    PHP程序员雷雪松2年前 (2016-09-27)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏