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

导读

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

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

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

比如,移民申请表照片:

高额工资单照片:

豪车订单照片:

下面,就开干吧!

注册一个微信小程序

开发微信小程序,首先肯定需要去微信公众平台上注册一个微信小程序了,我们在微信公众平台的注册页面(https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN)选择“小程序”进行注册。

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

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

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

在开发设置中,我们可以获取到小程序的 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 数组有合适的数据,那么其渲染出来的页面应该是下面这样的:

原文发布于微信公众号 - CSDN技术头条(CSDN_Tech)

原文发表时间:2018-03-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React第三方组件1(路由管理之Router的使用③传参)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

34130
来自专栏数据小魔方

excel中的超链接函数

今天跟大家分享在excel中超链接函数的用法! ▼ 其实excel中想要达到超链接效果有很多种方法:直接手工设置、超链接函数、开发工具、VBA等都可以实现。但是...

52890
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

14020
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

19820
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

78320
来自专栏DeveWork

添加WordPress评论输入邮箱实时显示Gravatar头像功能

这个不是什么新鲜的功能了,这个功能即是实现当留言评论时,你输入email后,就会实时显示你的Gravatar头像。对于提高用户体验是有非常的帮助,特别是用户评论...

22450
来自专栏移动开发面面观

React Native 一个开始

11520
来自专栏IT大咖说

R语言实例:利用css对shiny页面优化及htmlwidgets创建控件

摘要 本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频;并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3...

36660
来自专栏每日一篇技术文章

weex-06-程序的入口文件app.js

app.js 这个是我们打包时的入口文件,为什么这样说呢?我们看一下打包配置文件webpack.config.json中的部分内容

37520
来自专栏DeveWork

Google Chrome 浏览器 开发者工具 使用教程

对于Chrome 浏览器,除了占用内存的缺点,其他都很不错。对于Chrome 浏览器的开发者工具,Jeff 除了Elements、Resources、Netwo...

53260

扫码关注云+社区

领取腾讯云代金券