【DRF+Django】微信小程序入门到实战_day01(上)

（0）摘要

# 课程链接

入门到实战，讲讲公司的微信小程序【django+drf+小程序实战】_哔哩哔哩_bilibili

# 课程内容

（1）小程序介绍_(略)

（2）小程序环境搭建

（3）全局配置

---

# 若有恒何必三更眠五更起  最无益莫过一日曝十日寒            --- 教员

（1）小程序环境的搭建

# （1）后端环境的搭建。

                直接见下图，所需的工具和类库。后端环境_很简单啦~~~

               

---

# （2）前端的小程序环境搭建。

                1）进入链接：微信公众平台  ，注册小程序账号。这里推荐注册企业的账号（但是要收费），因为企业的账号能拥有更多的功能，比如支付的。如下图所示，选择红框处小程序注册入口进行注册。 

                2）注册成功后，我们登录进去，在左边的选项栏点击开发。找到小程序 ID ，保存起来，这个在后面有用。

                 3）下载开发者工具。如下图所示，回到首页栏，然后在开发工具那里下载微信开发者工具。 当然，这里我给个直通车：稳定版 Stable Build | 微信开放文档

               

                然后来到了下图的页面，按照图中序号顺序和描述操作即可。 下载完成后，直接就是傻瓜式安装即可。

---

# （3）小程序开发工具的初识

                1）打开工具后，我们需要登录小程序。

                2）登录成功后，我们能看到这个样子的。点击那个大大的+号，就可以创建新的小程序了。

                3）点击了+ 号后，就能看到如下的页面，具体的细节看里面的注解。在模板选择这里，我是推荐使用 JavaScript 的基础模板就行。

                4）创建成功后，我们可以看到如下的界面。

                5）代码目录的介绍。其实都是可以删掉，我们自己创建。

                6）基本使用_1

                7）基本使用_2

                 

                8）两个重要的标签。其实微信的 wxml 标签是基于前端的 html 标签进行封装的，所以是 html 也不完全是。但是我们只需要记住两个重要的标签，分别是 文本 和  。前者相当于 html 中的 span 标签，即行内的；后者就相当于 div 标签。还可以跟前端一样给对应的标签加上相应的样式。当然要注意 wxml 和 wxss 的代码要分开在对应的文件里面写。

               

                 wxss 下的样式代码

                9）小程序的预览。前提是代码文件目录中，必须要有 app.js 文件。

---

（2）全局配置

# （1）小程序的学习都是要看官方文档的。

                官方文档链接：微信开放文档 ，主要看下面的全局配置。注意，如果要配置这些属性的时候，格式一定是遵照下图的 app.json 的内容来写的。（可以缺少，但是按序就行）

                1）这一节我们只关注 pages 和 window 还有 tabBar 三个属性。见上图，我们点击进去详细的全局配置，进入到详细配置项，然后看到下图的界面。

                 

                这三个属性， pages 是页面路径列表，不赘述；window 和 tabBar 属性控制的就是下图所示的地方。

---

# （2）window 属性的使用。

                1）首先来 window 属性，我们在详细配置项点进去 window。可以看到如下页面，这只是部分的截图。

                 

                2）代码实战，见下图的笔记内容。

---

# （3）tarBar 属性的使用。

                1）文档查阅。我们点进去 tarBar 的详细配置的时候，能配置的东西很多，我们暂且不看，我直接到最后找到如下图所示的内容，注意红框内的。也就是说tabBar 属性对下配置的是一个列表，即  "tabBar" :{"list": [ ] }  。如果单独看文档是很难看懂的，所以我们直接把这个红框代码实践一下。

                2）pagePath 和 text 的代码实战。如下图所示，从这个例子中我们可以知道，"pagePath" 就是指向我们页面的路径，text 就是下面选项框的文字。这里要注意，如果是多个选项的话，务必对每一个选项创建一个独立页面。比如，第二个选项 “我的”，我们为其创建了一个独立页面，路径是 pages/mydemo/mydemo 。

                有了上面的基础，我们再来看 tabBar 的其他功能属性。比如我们可以设置一下选项框的图标，就需要用到下图偏橙色框的内容。iconPath 是没有选中的时候的图标，selectedIconPath 是选中后，显示的图标。我们一样举个例子 

                3）iconPath 和 selectedIconPath 代码（这是 list 中的），以及 selectedColor 和borderStyle 属性的代码实战。见下图所示。（这里还要说一下，list 里面的最多有 5 个 属性值；borderStyle 是控制tabBar 选项框与页面内容的边界的风格的，而不是框与框之间的。比如是白色 white 的话，就没有边界了）

---