微信小程序-从无到有

首先声明：此文章只为记录我的小程序之路，很多弯路我已经走过，如有错误请指正。

为什么有微信小程序？

微信的用户基数大，而且微信小程序很便捷，能方便我们很多的需求

第一部分 环境的搭建

后端环境：我们所使用的后端环境是python,用到的框架是django以及drf框架，这里我用的后端软件是pycharm,很多功能比较方便，用vs的用户可以参考另一篇文章，vs下的django环境搭建。

小程序的环境：

1、注册一个微信公共平台的账号，点击此页面的“小程序”，点击前往注册。

2.进入注册，填写自己的信息即可。

3.appId一定要保存下来，

进入之后点击开发，点击开发设置，这个appId后面会用到

3.这里注册的过程就不赘述了，大家可以自己注册。现在我们要做的是下载小程序专用的开发软件。同样是刚才的页面，点击开发者工具，进去之后根据自己电脑的配置进行下载。

4.下载好之后创建微信小程序项目。（点击不使用云服务，选择自己要用的模板）

经过以上的步骤，我们的小程序项目就创建完成了

 第二部分 各种类型文件的分析

上面这个页面是我们进入到项目后的页面，其中pages里面可以添加新的页面，utils可以看成是我们的工具文件夹，可以把要用到的功能整合到这里面，以后可以直接导入引用；.js文件里面写的是功能函数还有一些数据，.wxml写的是前端页面，.json写的是页面的配置功能，包括一些基本的例如是否可以下拉刷新这类的配置，.css里面写的是页面的一些演示，为.wxml服务，具体的页面怎么写我们后面再讲。另外，app.js以及app.json是全局的。

另外像这种基础还是建议听视频来学习，b站很多视频讲出来的效果会更好。

第三部分 正式踏上小程序开发之路

在最前面还是要推荐大家写小程序的时候打开微信开发文档（网站视图容器 | 微信开放文档），里面有各种的组件还有现成的api接口可以供我们使用。

1.全局配置以及flex布局

以上就是全局配置的界面，这里我们以window和tabBar为例来学习全局配置的相关知识。

window:用于设置小程序的状态栏、导航条、标题、窗口背景色。

"window": {
    "navigationBarBackgroundColor": "#6495E",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

      将上面的代码写在app.json文件里面，就可以观察到小程序上方状态栏的变换，另外“#6495E”是rgb颜色表，可以直接查到进行替换，这样就可以感受到window的作用。

tabBar:如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。具体的指的就是页面上面或者下面切换到其他页面的组件。（用以下的例子做一个演示）

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },

这样就可以在页面的下面添加上两个切换页面的功能。

##鉴于小程序知识点也很多，所以后面的记录只会记录重要的部分，简单的部分可以在B站上面看视频，更容易理解