正文

两小时快速构建微信小程序

IP云
IP云V管理员/5 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

小程序在2017年1月上线之初，被社会极力吹捧，刻意去将其制造为一个“风口”，透支其价值。但是在之后一个月里，石破天惊迅速归为沉寂。媒体又开始过度消费小程序，大谈其鸡肋之处。

个人认为小程序的一个分水岭是在12月28日。微信升级到6.6.1版本，将小程序入口移植主界面，下拉主界面即可选择进入，并且支持新类目“小游戏”。小程序逐渐升温，在整个微信生态中扮演越来越重要的角色。时至今日，小程序的风潮如日中天，优秀的小程序很容易得到融资。这究竟是是另一轮泡沫，还是小程序本身真正已经进入了成熟期？我个人更相信后者。

我个人做过两款小程序，对小程序有一定认识，但理解还是比较浅的。今天就仅从如何快速搭建一个小程序谈起，揭开小程序的一丝神秘面纱。

概述

  • 小程序是前后端分离的。
  • 前端使用的是微信自定义的一套规范 wxml + wxss + json + js ，我认为本质还是 html + css + js 。
  • 后台可以选用任何你熟悉的语言： Java , Python , PHP , Ruby 等等，在这篇文章里我选用 Python 的 Flask 框架+ Gunicorn + Nginx 来快速搭建。
  • 数据库我选择 MySQL ,nosql数据库我选择 Redis 。当然，你的小程序可以很轻量级，甚至不需要使用到数据库。小程序一大思想“用完即走”。
  • 后台需要跑在一台自己的服务器上，同时你也需要一个已备案的 https 域名来进行映射。

附注

现在市面上也有一些第三方快速生成小程序的工具，和以前那些快速生成网站的是同一门生意。我个人并不推荐去使用那些，因为那些小程序几乎千篇一律，无法结合你自己的创意，无法定制你需要提供的服务，而且必定存在一些收费。

当然，这些平台既然存在，那么必定是市场需求，假如确实适合你，能为你带来一些效益，不妨一试。

今天，我们是以学习者的角度去构建小程序。

准备工作

  1. 一台云服务器，可以上各大云提供商平台租用，我使用的是学生低配，￥10/月。
  2. 我在服务器上使用的操作系统为 ubuntu
  3. 购买一个域名，并通过备案。域名价格在1-10000000不等，我使用的是某 com 域名，￥50/年。
  4. 在微信公众平台注册一个账号并下载小程序开发工具。详细说明
  5. 从 http 到 https 。现在很多SSL证书可以免费申请，下面会详细说下如何配置。

目标

我们的目标是实现一个简单的小程序，能够实现前后端对接。

从http到https

  1. 首先拥有一个已备案域名，并已经解析到你的服务器上了。
  2. 如果你在阿里/腾讯云租用了服务器，可以申请免费的SSL证书。找到相应入口并申请就可以了。审核一般很快，我的在一小时以内。
  3. 审核通过后下载颁发的证书，先保存在本地。之后通过ftp传到服务器的相应路径。
  4. 在服务器上安装 Nginx 。
  5. 首先测试你的Nginx服务是否能正常运行，配置完打开自己的域名能显示nginx的欢迎页时即为成功配置。
  6. 然后将你的证书通过ftp上传到服务器的任意路径下（建议和 Nginx 在同一路径下）
  7. 打开 Nginx 的配置文件，如图配置（证书路径填写自己的）
  8. 重启服务，浏览器通过https访问，能正常显示页面即为配置成功。

前端

现在，打开你的小程序开发工具，并使用你的APPID新建一个项目。（我这里没有多余的APPID，所以先使用测试环境）

可以先勾选“建立普通快速启动模板”来生成一个官方测试demo，如下图：

让我们来观察一下目录结构。 app.js , app.json , app.wxss 分别对应全局的方法，全局配置参数和全局样式。而在具体包下的 index.js , index.wxml , index.wxss 则对应相应的元素。

现在让我们来写一点简单的页面的代码。 

<!-- index.wxml -->

<view class="main-card">

 <view class="main-card-item" id="toast" wx:if="{{news_flag}}">

    <view class="card-item-hd" >

      <image class="card-item-icon" src="/images/index/toast.png"></image>

      <text class="card-item-name">大事儿</text>

    </view>

    <view class='toast'>

     Hello,欢迎观看此教程，希望对你有帮助。

    </view>

  </view>

</view>


/* index.wxss */

page {

  background-color: #f8f8f8;

}

.main-card {

  padding-bottom: 100rpx;

}

.main-card-item{

  display: flex;

  flex-direction: column;

  background: #fff;

  border-top: 1rpx solid #F6F6EF;

  border-bottom: 1rpx solid #F6F6EF;

  margin-bottom: 20rpx;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-position: bottom center;

  overflow: hidden;

  margin-left: 12rpx;

  margin-right: 12rpx;

   border-radius: 15rpx;

}

.card-item-hd{

  display: flex;

  align-items: center;

  height: 75rpx;

  border-bottom: 1rpx solid #e5e5e5;

  margin-left: 30rpx;

}

.card-item-icon{

  width: 40rpx;

  height: 40rpx;

  margin-right: 10rpx;

}

.card-item-name{

  letter-spacing: 1px;

  font-size: 25rpx;

}

.toast{

  letter-spacing:3rpx;

  line-height: 50rpx;

  font-size: 28rpx;

  margin-left: 20rpx;

  margin-top: 20rpx;

  margin-bottom: 40rpx; 

}

此时，一个简单的页面已经生成了，让我们来看看效果。

很简单，但是可以看出来「大事儿」里的内容是写死的，此时我们需要后端来提供数据。

###服务器环境

在编写后端之前，我们先把服务器的环境部署一下。

安装：

  1. 安装了Python环境 apt-get install python-dev
  2. 安装Flask pip install flask
  3. 安装UWSGI pip install uwsgi
  4. 安装了Nginx apt-get install nginx
  5. 安装了Gunicorn pip install gunicorn

准备

首先在你的 /var/www/ 目录下创建一个测试目录，比如 /var/www# mkdir test

然后使用 chmod 更改此目录的权限 chmod 777 /var/www/test

这里讲一下 chmod 的规则，因为这里是测试用例，所以为了方便，直接使用777。

Nginx

Ubuntu下的Nginx的目录结构大致如下：

  1. 所有的配置文件都在 /etc/nginx 下，每个虚拟主机已经安排在了 /etc/nginx/sites-available 目录下
  2. 启动程序文件在 /usr/sbin/nginx
  3. 日志文件放在了 /var/log/nginx 中，分别是 access.log 和 error.log
  4. 在 /etc/init.d/ 下创建了启动脚本nginx
  5. 默认的虚拟主机的目录设置在了 /usr/share/nginx/www

启动服务： /etc/init.d/nginx start ,重启服务: /etc/init.d/nginx restart

现在，我们需要进入到Nginx的配置中，改动配置文件。 vim /etc/nginx/site-avalidable/default

更改配置文件后重启服务 /etc/init.d/nginx restart ，或者 service nginx restart

Gunicorn

Gunicorn 绿色独角兽 是一个Python WSGI UNIX的HTTP服务器。这是一个pre-fork worker的模型，从Ruby的独角兽（Unicorn ）项目移植。该Gunicorn服务器大致与各种Web框架兼容，只需非常简单的执行，轻量级的资源消耗，以及相当迅速。

此时需要在“准备”步骤中创建的测试目录下放入我们的测试运行项目，我选择的FTP工具是：xftp。我传入了一个简单的用来测试的Python文件 wsgi.py ,使用命令 /var/www/myflask# vim wsgi.py 预览。

此时在测试目录下键入命令 gunicorn -w 4 -b 127.0.0.1:8000 wsgi:app 运行。

此时，访问服务器，可以看到“Hello World”已经可以正常显示了。

关于Flask

后端我们采用 Python 的 Flask 框架+ Gunicorn + Nginx 来快速搭建。首先需要一些 Python 的基础知识，相信大家在菜鸟学Python学了这么久，这完全不是问题。现在，让我们了解一下 Flask 如何使用。

一位使用多种语言开发复杂程序并且拥有十多年经验的软件工程师，曾经用 PHP, Ruby, Smalltalk 甚至 C++ 写过 web 应用，他认为，在所有这些中，Python/Flask 组合是最为自由的一种。

在使用了 Flask 之后，我也不得不承认，它确实很便捷快速。当然也会有一定的缺点，这是后话。

回归正题。

获得对象 

from flask import Flask

app = Flask(__name__)

@app.route('/')

def hello_world():

    return 'Hello World'

if __name__ == '__main__':

    app.run()

这是一个最简单的Demo。

执行流程为：从flask模块获取对象app，通过路由，执行方法，返回内容。

此时在浏览器访问（默认端口5000）：127.0.0.1：5000/ ，可以看到国际惯例Helloworld的界面。

路由

  • 唯一URL： 
@app.route('/hello')

@app.route('/hello/')

#这两种需要区分

#

@app.route('/hello/')

#在使用这种尾部带斜线的url时，假如用户没有输入尾部/，也将访问到正确的页面

#

@app.route('/hello')

#在使用这种尾部不带斜线的url时，假如用户在尾部输入了/，将返回404

这个规则似乎有点拗口，但其实也不能理解。优点是：

  1. 使得用户在遗忘尾斜线时，允许关联的 URL 接任工作，与 Apache 和其它的服务器的行为并无二异
  2. 保证了 URL 的唯一，有助于避免搜索引擎索引同一个页面两次。

如果实在记不清，最好的方法是破罐子破摔：统一不带尾部“/”

  • 构造URL中的动态部分 
@app.route('/var/<name>')

def var(name):

    return 'hello'+' '+name

这点就不赘述了，可以看一下演示效果：

模板渲染

大部分时候，在用户访问了一个URL的时候，我们都需要给他/她返回一个界面，我们当然不会用Python本身去渲染HTML，为此，Flask 配备了Jinja2 模板引擎。

看完以下代码示例，相信你就能理解。

首先，我们创建“templates”文件夹用于保存模板。

Flask 会在 templates 文件夹里寻找模板。所以，如果你的应用是个模块，这个文件夹应该与模块同级；如果它是一个包，那么这个文件夹作为包的子目录: 

#情况 1: 模块:

/application.py

/templates

    /hello.html

#情况 2: 包:

/application

    /__init__.py

    /templates

        /hello.html
  1. 不含参数示例 在程序执行： 
@app.route('/redi/')

def redi():

    return render_template('hello.html')

  1. 再看另一个例子，加入动态参数： 
@app.route('/redi2/<name>')

def redi2(name):

    return render_template('hello2.html',name=name)

GET和POST

请求方式不止这个两种，但是最常用的是这两种，如果对这两种不熟悉，可以先去查一下HTTP方法的资料，这里只演示在flask中的用法。 

@app.route('/met',methods=['GET','POST'])

def met():

    if request.method=='GET':

        return '这是get方法'

    if request.method=='POST':

        return '这是post方法'

打开Postman这款软件（Web神器），模拟发送HTTP请求。

请求对象

下面我来模拟一个简单的登录操作。

首先是控制器： 

@app.route('/login',methods=['POST','GET'])

def login():

    error=None

    if request.method=='POST':

        print (request.form['username']+' '+request.form['password'])

        if func.login_func.valid_login(request.form['username'],

                    request.form['password']):

            return func.login_func.login_success(request.form['username'])

        else:

            error='Invalid username/password'

            return render_template('login_error.html',error=error)

可以看到执行流程：

  1. 获得请求
  2. 判断请求类型
  3. 获得登陆数据
  4. valid_login（）方法验证登陆 4.1 若登陆成功，执行login_success（）方法 4.2 若登录失败，添加失败信息，返回失败模板

下面是上述用到的两个方法： 

def valid_login(username,password):

    if username=='admin' and password=='admin':

        return True


def login_success(username):

    return render_template('login_success.html',username=username)

下面使用Postman来模拟请求，看看能不能返回设想的结果。

这是一些简单的 Flask 操作，好了，我们现在对web有了一定的了解了。现在开始编写我们的代码。

###后端 万事俱备，只欠东风。 首先我们来写两个路由，一个用于更新通知，一个用于获取通知。 

@app.route("/updateToast",methods=['POST'])

@allow_cross_domain

def update_toast():

    data=db_util.update_toast(request.form['toastUpdateInfo'])

    return jsonify(data)

@app.route("/getToast",methods=['GET'])

@allow_cross_domain

def get_toast():

    data = db_util.get_toast_info()

    return jsonify(data)

然后写一个工具类，用于直接操作数据库（这种设计并不规范，只是为了快速演示） 

#db_util.py

def get_toast_info():

    db = pymysql.Connect(

        host='xxx',

        port=3306,

        user='xxx',

        passwd='xxx',

        db='xxx',

        charset='utf8'

    )

    cursor = db.cursor()

    sql = "select content   from   guohe_lite_toast   order   by   id   desc   limit   1 "

    try:

        cursor.execute(sql)

        result = cursor.fetchone()

        return response_info.success('小程序通知查询成功', result)

    except:

        return response_info.error('2', '小程序通知查询失败', result)

        # 关闭数据库连接

    finally:

        db.close()

def update_toast(toast_update_info):

    db = pymysql.Connect(

        host='xxx',

        port=3306,

        user='xxxx',

        passwd='xxx',

        db='xxxx',

        charset='utf8'

    )

    cursor = db.cursor()

    sql = "insert into guohe_lite_toast(content,update_time) values(%s,%s) "

    try:

        dt = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")

        cursor.execute(sql,(toast_update_info,dt))

        db.commit()

        return response_info.success('通知更新成功', toast_update_info)

    except:

        db.rollback()

        return response_info.error("2",'更新失败', toast_update_info)

    finally:

        db.close()

现在，让我们使用postman来测试一下接口。

首先更新一下通知：

然后看能不能成功获取：

这一切都生效了，数据接口已经准备就绪。

数据渲染

那么，现在如何在小程序端获取数据并显示呢？我们去简要读下小程序的官方文档。

请注意，小程序是纯异步方式来发送请求的。

依葫芦画瓢，我们来模仿一下： 

#index.js

wx.request({

      url: 'https://example.com/getToast',

      method: 'GET',

      header: {

        'content-type': 'application/x-www-form-urlencoded' // 默认值

      },

      success: function (res) {

        var message = res.data.info[0]

        console.log(message)

        that.setData({

          toast: message

        })

      }

    })

我们将获取的数据已经保存在"toast"这个变量中了，再去读文档，看看小程序是如何进行数据绑定的。然后我们将之前写死的文本换成"{{toast}}"，这时再刷新，可以看到，数据已经显示了。 

<!-- index.wxml -->

<view class="main-card">

 <view class="main-card-item" id="toast" wx:if="{{news_flag}}">

    <view class="card-item-hd" >

      <image class="card-item-icon" src="/images/index/toast.png"></image>

      <text class="card-item-name">大事儿</text>

    </view>

    <view class='toast'>

    {{toast}}

    </view>

  </view>

</view>

此时，一套完整的流程已经结束，虽然实现了一个微小的功能，但麻雀虽小，五脏俱全。接下来，就是去进一步学习，去如何改造以及丰富我们的项目了。

比如稍微努力一下：

相关阅读

目录[+]