Django+微信小程序开发待办清单:准备工作
4613 views, 2023/10/17 updated Go to Comments
随着移动互联时代的蓬勃发展,开发者可以在各类不同的平台创造 App 应用,比如 Android、IOS、Web 端等等。与其他移动平台的 App 相比,微信小程序 具有某些方面的巨大优势:
- 它依托于微信内部。由于微信在国内恐怖的垄断地位(以及强社交属性),微信小程序出生就具有巨大的流量池。
- 同样因为小程序的底层由微信维护,因此天然就具有了跨平台的基因。
本章让我们小试牛刀,熟悉下如何开发微信小程序吧。
准备工作
首先下载微信小程序开发工具,官方地址在这里,下载并安装稳定版即可(笔者下载的版本是1.05.2111300)。
安装完成后打开开发工具并选择创建小程序,如下图。
过程中如果提示注册微信公众平台账号,跟着弄就行。
- 项目名称:
frontend
,翻译过来是”前端“。后续章节还会涉及到 Django 代码,也就是 backend ”后端“。 - 目录:
D:\Developer\Py\django_weixinapp_tutorial\frontend
。你也可以根据习惯,将项目存放在其他地方。 - AppID:这是正式小程序的唯一编号。开发时选测试号就Ok。如果你还没有测试号,那就跟着官方指南申请,并不复杂。
其他选项按图中填即可。
点击确定,就进入小程序项目的开发界面了:
开发工具这样就准备好了。
项目创建后,各个文件中有一些初始代码。这实际上是个获取用户信息的小 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.json
的pages
字段,得知首页为pages/index/index
; - 搜索
pages/index/
路径,加载index.js
、index.json
、index.wxml
、index.wxss
,并各司其职; - 渲染页面并呈现给用户。
感觉不难对吧。下一章让我们真正动手,写一个demo小程序吧。