Django+微信小程序开发待办清单:准备工作

2425 views, 2022/01/18 updated   Go to Comments

随着移动互联时代的蓬勃发展,开发者可以在各类不同的平台创造 App 应用,比如 Android、IOS、Web 端等等。与其他移动平台的 App 相比,微信小程序 具有某些方面的巨大优势:

  • 它依托于微信内部。由于微信在国内恐怖的垄断地位(以及强社交属性),微信小程序出生就具有巨大的流量池。
  • 同样因为小程序的底层由微信维护,因此天然就具有了跨平台的基因。

本章让我们小试牛刀,熟悉下如何开发微信小程序吧。

准备工作

首先下载微信小程序开发工具,官方地址在这里,下载并安装稳定版即可(笔者下载的版本是1.05.2111300)。

安装完成后打开开发工具并选择创建小程序,如下图。

过程中如果提示注册微信公众平台账号,跟着弄就行。

dwt-20-1

  • 项目名称: frontend ,翻译过来是”前端“。后续章节还会涉及到 Django 代码,也就是 backend ”后端“。
  • 目录: D:\Developer\Py\django_weixinapp_tutorial\frontend 。你也可以根据习惯,将项目存放在其他地方。
  • AppID:这是正式小程序的唯一编号。开发时选测试号就Ok。如果你还没有测试号,那就跟着官方指南申请,并不复杂。

其他选项按图中填即可。

点击确定,就进入小程序项目的开发界面了:

dwt-20-2

开发工具这样就准备好了。

项目创建后,各个文件中有一些初始代码。这实际上是个获取用户信息的小 Demo ,读者有兴趣可以先研究研究。

项目结构

可以看到目录里有些以前没见过的文件格式,像 .wxml.wxss ,这都是啥?

不慌,接下来逐步了解小程序的项目结构,和几个非常重要的文件。

app.js

微信小程序此文件中注册(通过调用 App()),是整个小程序的入口。你可以在这里定义生命周期函数,监听小程序是否切换后台、是否初始化完成、设置全局变量等等。示例代码如下:

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

这个文件运行 Javascript 代码。

app.json

app.json 文件用来对微信小程序进行全局配置,比如页面文件的路径、窗口外观、设置网络超时时间等。

比如初始的代码如下:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

仔细看上面的字段。pages 指定了小程序共有哪几个页面(初始项目有 index 和 logs 两个页面)。window 指定了全局页面的基本配置,比如导航栏背景色、字体颜色、内容等等。

app.wxss

这个文件的后缀是 .wxss 。WXSS是一套样式语言,用于描述小程序页面的样式,它的作用和语法都类似于浏览器 Web 的 .css 文件。示例:

/** common.wxss **/
.small-p {
  padding:5px;
}

小程序页面

一个小程序通常由多个页面组成。首先你得有个首页对吧;如果是电商平台,还得有产品详情页。小程序展现给用户的,就是所有页面的集合。

一个标准的小程序页面由四个文件组成,分别是:

  • .js:这是个 Javascript 文件,它表述了页面的主要逻辑。
  • .wxml:类似传统 Web 开发的 .html 文件,是页面的结构。
  • .json:本页面的配置文件。(前面的 app.json 是全局配置)
  • .wxss:用于描述本页面的样式。

小程序通过目录将每个页面的文件组织起来,互不影响。

观察下项目初始的 pages/index/pages/logs/ 文件夹,都包含上面的4个文件。

以上就是小程序最核心的结构。

总结

总结下小程序启动的流程:

  • 小程序在 app.js 中注册;
  • 通过 app.jsonpages 字段,得知首页为 pages/index/index
  • 搜索 pages/index/ 路径,加载 index.jsindex.jsonindex.wxmlindex.wxss,并各司其职;
  • 渲染页面并呈现给用户。

感觉不难对吧。下一章让我们真正动手,写一个demo小程序吧。

点赞 or 吐槽?来博客GitHub评论区!




本文作者: 杜赛
发布时间: 2022年01月18日 - 19:35
最后更新: 2022年01月18日 - 19:35
转载请保留原文链接及作者