文章 答疑

Python 开发者的微信小程序开发实践

百度阅读《Python网络爬虫实战与机器学习应用》、GitChat达人课《Django Web开发极简实战》作者,微信公众号:州的先生,博客:http://zmister.com
文章 答疑

导读

在知乎上,有人提问“如何使用 Python 开发微信小程序”。

其实微信小程序作为一个前端的机制,Python 并不能插上边。只不过可以作为后端接口为微信小程序提供数据服务而已。

那么在本篇,我们就将结合微信小程序开发与 Python Web 开发,来完成一个朋友圈神器微信小程序的开发,这个微信小程序作为一个工具型的应用,供用户输入姓名或其他字段,生成一个带有炫耀成分的照片。

比如,移民申请表照片:

高额工资单照片:

豪车订单照片:

下面,就开干吧!

注册一个微信小程序

开发微信小程序,首先肯定需要去微信公众平台上注册一个微信小程序了,我们在微信公众平台的注册页面选择“小程序”进行注册。

接着有三个步骤:邮箱注册、邮箱激活和信息登记:

完成上述三个步骤后,就可以登录进入管理中心:

在基本设置中,我们可以设置微信小程序的名称、头像、说明等基本信息。

在开发设置中,我们可以获取到小程序的 AppID 和 AppSecret,这在后续的开发中会使用到,同时我们可以在此设置小程序服务器的域名:

安装和使用微信 Web 开发者工具

开发微信小程序需要使用到微信 Web 开发工具这一软件。我们下载并安装好。

启动之后,需要我们使用微信扫码进行登录:

之后,新建一个小程序项目:

指定小程序的项目目录、输入小程序的 AppID(管理页面中获取)、输入项目名称,之后我们就进入了微信开发工具的主界面了:

因为我们使用了快速启动的模板,所以自动生成了一个 Hello World 的 Demo。接下来,我们创建我们的票圈神器的小程序页面。

创建微信小程序页面

在创建小程序的页面之前,我们先来了解一下微信小程序的代码结构。

根据微信小程序开发文档的介绍:小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由以下三个文件组成,必须放在项目的根目录。

  • app.js(定义小程序的逻辑)
  • app.json(定义小程序的公共配置)
  • app.wxss(定义小程序的公共样式表)

同时,一个小程序的页面由四个文件组成:

  • JavaScript 文件(定义页面逻辑)
  • WXML 文件(定义页面结构)
  • WXSS 文件(定义页面样式)
  • JSON 文件(定义页面配置)

微信小程序的视图层负责页面的展示,由 WXML 文件描述页面结构和 WXSS 文件描述页面的样式。

WXML 和 WXSS 是什么东西呢?我们可以拿 HTML 和 CSS 来与之进行类比。虽然它们不一样,但是它们真的很相似。

WXML 是一套微信定义的可嵌套的标记语言,而 WXSS 则具备 CSS 的大部分特性,并对 CSS 进行了扩充和修改。

接下来我们来规划一下我们的小程序的页面构成:

  • 首页列表页:用于显示可用于制作照片的条目;
  • 详情表单页:用于显示照片效果以及接收用户输入信息;
  • 照片结果页:用于显示生成的照片以及提供保存按钮;

创建页面目录和文件

首先,我们在项目目录结构的 pages 路径下新建一个 detail 目录,其下包含三个同名的 JS 文件、WXML 文件、WXSS 文件;一个 result 目录,其下包含三个同名的 JS 文件、WXML 文件、WXSS 文件;最后 pages 目录下的结构如下图所示:

然后,在创建的 JS 文件中输入以下代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

Page() 函数用来注册一个页面。接受一个 object 参数,以指定页面的初始数据、生命周期函数、事件处理函数等。

使用微信开发者工具的智能提示可以快速生成这些代码:

完成这一步之后,我们打开项目根目录的 app.json 文件:

在pages列表中添加如下代码:

"pages/detail/detail",
"pages/result/result",

最后 app.json 文件中 pages 列表的值应该为:

[
    "pages/index/index",
    "pages/detail/detail",
    "pages/result/result",
    "pages/logs/logs"
  ],

编辑列表页面

首先,我们在列表页面放置一个轮播图,让我们的页面不显单调。准备三张图片:

在项目根路径下新建一个名为 imgs 的目录,将三张轮播图片复制进去:

在 index.js 文件的 Page 实例中,在 data 字典添加一个键值对,用于指定本地轮播图片的位置:

删除 index.wxml 文件中的所有代码,输入以下代码以创建一个轮播图:

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
   <block wx:for="{{headimg}}" wx:for-index="index">  
    <swiper-item>  
     <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
    </swiper-item>  
   </block>  
</swiper>

其中:

  • swiper 标签表示滑块视图容器;
  • swiper-item 标签则表示滑块的条目;
  • block 标签表示一个标签块

我们可以看到,在 block 标签中,我们为其设置了 wx:for 属性,这个属性用于列表渲染,绑定了 Page 的 data 中的 headimg 数组(在微信小程序中,WXML 中的动态数据都来自于对应 JS 文件 Page 中的 data 数据)。

接着,调整轮播图的样式,在 index.wxss 文件中输入以下代码:

.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

最后保存文件,在微信开发者工具中可以预览到我们的轮播图已经创建成功:

创建完轮播图之后,我们继续编辑创建图片列表结构。

<view class="temp_box">
  <block wx:for="{{templist}}">
    <view class="temp_item">
      <navigator url="../detail/detail?tid={{item.id}}">
        <image src="https://www.huabandata.com/{{item.icon}}"></image>
        <view class="content">
          <text>{{item.name}}</text>
        </view>
      </navigator>
    </view>
  </block>
</view>

在页面的列表结构中,我们使用一个 view 标签作为外部容器,里面定义了一个 block 标签用于遍历图片模板数据生成多个图片信息,定义渲染的数组为 templist,这个我们将在 index.js 文件中进行定义和声明。

同时使用了 navigator 标签,用于页面的跳转,设置一个参数 tid 并将模板的 id 作为值,使其能够跳转到具体模板的详情页面。

然后在 index.wxss 文件中添加以下样式:

/* 模板图片列表 */
.temp_box {
    margin: 3px;
    width: 100%;
}
.temp_item {
    display: inline-block;
    width: 48%;
    margin: 0.5%;
    background-color: white;
}
.temp_item image {
    width: 100%;
    height: 160px;
}
.temp_item .content {
    width: 100%;
    height: 32px;
    margin: 5px;
}
.temp_item .content text {
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

如果 templist 数组有合适的数据,那么其渲染出来的页面应该是下面这样的:

编辑详情页面

详情页面相较于列表页面简单很多,由两个结构组成:

  • 图片模板;
  • 表单输入框;
  • 提交按钮;

所以我们的详情页面 detail.wxml 的结构为:

<view class='temp'>
  <image src='https://www.xxx.com/{{tempData.img}}'></image>
</view>
<form bindsubmit='generate'>
  <view class="form">
    <view class='li'>
      <image class='icon' src='http://www.xxx.com/media/resume/icon_user.png'></image>
      <input class='input' placeholder='请输入{{tempData.hint}}' name='content'></input>
    </view>
</view>
<button class="button" form-type='submit'>立刻生成照片</button>
</form>

在这里,我们通过 <view> 标签包裹着 <image> 标签来显示图像,然后用一个 form 表单标签包裹着 input 输入框和 button 提交按钮。

在 button 按钮中,我们通过设置 form-type 属性为 submit,使得点击这个按钮时会提交表单。

表单的提交处理由 <form> 标签的 bindsubmit 属性来控制,在此我们指定了处理函数为 generate,我们将在 detail.js 中对 generate 函数进行定义。

然后,在 detail.wxss 中对其进行样式设计:

page{background-color: #efeff4}
.temp{
  background-color: white;
  border: #e5e5e5 solid 1px; 
  display: flex; 
  align-items: center;
  justify-content:center;
}
.temp image{
   height: 320px;
}
.form{
  margin-top: 20rpx; 
  background-color: white;
  border: #e5e5e5 solid 1px; 
  border-right: none;  
  border-left: none;  }
.li{
  height: 100rpx; 
  border-bottom: #e5e5e5 solid 1px; 
  width: 90%; 
  margin: auto; 
  display: flex; 
  align-items: center }
.input{padding-left: 20rpx;  width: 94%; color: black}
.icon{
  width: 50rpx;
  height: 50rpx;
}
.button{
    background-color: #09bb07; 
    margin: auto; 
    margin-top:20rpx;
    margin-bottom: 20rpx;  
    width: 90%; 
    color: white 
}

如果 tempData 数组中有正确的数据,那么详情页面的显示效果如下所示:

编辑结果页面

结果页面与详情页面类似,同样是显示一个图片,和一个按钮(用于保存照片至本地),所以将 detail 页面的结构和样式稍作修改即可。

result.wxml:

<view class='temp'>
  <image src='https://www.xxx.com/{{imgurl}}'></image>
</view>
<button class="button" form-type='submit' bindtap='savePhoto'>保存照片</button>

reault.wxss:

page{background-color: #efeff4}
.temp{
  background-color: white;
  border: #e5e5e5 solid 1px; 
  display: flex; 
  align-items: center;
  justify-content:center;
}
.temp image{
   height: 320px;
}
.button{
    background-color: #09bb07; 
    margin: auto; 
    margin-top:20rpx;
    margin-bottom: 20rpx;  
    width: 90%; 
    color: white 
}

如果 imgurl 数组有正确的数据,那么结果页面的显示效果如下所示:

创建 Django 应用

在小程序的页面创建和设计好之后,我们需要创建一个 API 数据接口,供小程序请求获取,以生成供 WXML 页面进行渲染的数组。

因为本篇讲的是《Python 开发者的微信小程序开发实践》,自然使用的是 Python 语言,而我对 Django 相对比较熟悉,所以我们使用的是 Django 框架来对小程序提供 API 接口。

我已经有一个 Django 项目在运行,所以在此直接在此项目下创建 Django App:

python3 manage.py startapp pyq_tool

通过 PIL 模块合成一张装 X 照片

要生成一张那样可用来炫耀的图片,其实很简单,利用图像处理模块,在图片上添加相应字体的文字即可。

在 Python 中,我们使用 PIL 模块对图像进行处理,其可以通过 pip 命令进行安装:

pip install pillow

                    

2018年3月29日,周四晚8点30分,Python实战应用教程博客“州的先生”zmister.com作者。目前在司负责店铺数据挖掘和数据银行项目工作的州的先生带来了主题为《Python 开发者的微信小程序开发实践》的交流。以下是主持人飘静整理的问题精华,记录了作者和读者间问答的精彩片段。


内容提要:

  • 微信小程序图片上传功能,一次只能上传一张图片,批量上传有没有好的实现办法,让用户觉得时间短,不影响体验?
  • 请问使用Python给小程序做后端服务有哪些特色亮点(和JAVA、nodejs比较有哪些优势)?
  • 在小程序中的支付,用户是否可实时提现,有没有手续费?
  • 小程序入门难吗?
  • 如果是windows服务器的话,Django用什么版本最好?
  • Django怎么操纵数据库?
  • 如想试图完整搭建展示图片,文字类似的一个小程序,功能不必非常复杂,具体应分几步,如何实际操作完成?
  • 小程序如何放在阿里云的服务器上,曾经尝试开发小程序,但是开发软件上面只有显示腾讯云怎么办?
  • 小程序除官网外,还有什么好用的工具IDE?
  • OCR文字识别这种小程序,是如何实现的?讲一下思路可以吗?
  • 小程序做视频播放怎么样,小程序容易被破解吗?
  • 用Python做后台服务,若访问量大,性能如何?另外有上传图片功能,安全性如何考虑的?
  • 搜索小程序时,有个附近小程序,那请问下要这个附近是根据什么定位的?
  • 小程序可以支持对使用者进行身份的验证吗?
  • 微信小程序是如何验证和统计使用这个小程序的用户的,用Django的能实现吗?
  • 建议课程介绍:windows Server 2012平台下,Django框架,使每次访问都对来访人员的身份和权限进行识别的最简办法是哪一种?Django框架,开发小程序用哪一种工具最简便?windows Server 2012平台下,Django框架,开发小程序用哪一种工具最简便?
  • 开发微信小程序必须联机云服务器吗?在练习阶段能用单机练习吗?
  • Django用来做restful api推荐用rest framework吗?
  • 大一学生,自学了Python,用Django做过简单页面,还需要学习哪些东西才能会做咱们的案例?

问:微信小程序图片上传功能,一次只能上传一张图片,批量上传有没有好的实现办法,让用户觉得时间短,不影响体验?

答:在微信小程序的API中,有一个wx.chooseImage()接口,其最多可以选择9张图片,这个接口调用成功会返回图片的本地文件路径列表,参数值为tempFilePaths。在获取到这个本地图片列表之后,再对wx.uploadFile()方法进行批量调用就可以一次性上传多张图片了。


问:请问使用Python给小程序做后端服务有哪些特色亮点(和JAVA、nodejs比较有哪些优势)?

答:众多周知,Python依赖其丰富的第三方库在各个领域都有很深的应用。使用Python做为小程序的后台,可以充分利用Python的生态圈,从Web服务,到数据爬取,到机器学习的模型调用等都可以无缝结合使用。比如,我们在小程序前端页面,调用相机拍一个物品的照片,Python后台的Web框架接受到图片,将其进行数据预处理转换之后,传给使用Python的机器学习库训练好的图像识别模型,最后得到图片的分类。


问:在小程序中的支付,用户是否可实时提现,有没有手续费?

答:小程序中的支付调用的也是微信支付,其可以实时提现,同时手续费也是微信支付规定的0.6%。


问:小程序入门难吗?

答:小程序涉及到小程序前端页面和逻辑的开发以及后端服务接口的开发。后端服务接口的开发,与其他的Web应用的后端开发无异。而小程序的前端页面开发,有一些html、css和js基础会好很多,像我对前端的知识也不是很了解,但是基本了解了小程序的原理和结构后,也能入门做出一个简单的小程序来。


问:如果是windows服务器的话,Django用什么版本最好?

答: Django目前官方并行了两个版本:1.11和2.0,其中2.0的版本于今年年初发布,其有一些新的特性,比如URL的定义等。1.11版本将会支持到2020年,而2.0版本将会支持到2019年初,其后会由2.1和2.2版本接替。可以看一下Django官方的版本支持图:

enter image description here

目前还是推荐1.11版本。


问:Djan"

即可畅读图文课全站文章
即可阅读全文

打开微信"扫一扫",将本文章分享到朋友圈

快给朋友分享吧!

收藏 收藏

1236人已收藏