1. 首页
  2. 小程序

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

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

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

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

概述

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

附注

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

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

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

准备工作

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

目标

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

从http到https

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

    image

前端

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

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

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

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

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

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

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


<!-- 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.logerror.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预览。

wsgi.py

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

开始运行

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

hello world

关于Flask

后端我们采用PythonFlask框架+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()

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

这是一个最简单的Demo。

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

此时在浏览器访问(默认端口5000):127.0.0.1:5000/ ,可以看到国际惯例Helloworld的界面。

hello world

路由

  • ##### 唯一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

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

hello ji

模板渲染

大部分时候,在用户访问了一个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')

hello.html:

hello

  1. 再看另一个例子,加入动态参数:

@app.route('/redi2/<name>') def redi2(name): return render_template('hello2.html',name=name)

hello2.html

hello ji

GET和POST

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


@app.route('/met',methods=['GET','POST']) def met(): if request.method=='GET': return '这是get方法' if request.method=='POST': return '这是post方法',JS中文网 - 前端进阶资源分享(www.javascriptc.com)

打开Postman这款软件(Web神器),模拟发送HTTP请求。

get

post

请求对象

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

首先是控制器:


@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来模拟请求,看看能不能返回设想的结果。

success

failure

这是一些简单的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: {JS中文网 - 前端进阶资源分享(www.javascriptc.com) '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>

作者:寒食君
链接:https://juejin.im/post/5ae7b96f6fb9a07aa6318df1

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:两小时快速构建微信小程序

链接:https://www.javascriptc.com/2518.html

« 初探微信小程序之小白入门
两天撸一个天气应用微信小程序»

相关推荐

QR code