快速学会微信小程序MiniProgram开发（一）【内附源代码】

💖作者简介：大家好，我是车神哥，府学路18号的车神🥇
⚡About—>车神：从寝室到实验室最快3分钟，最慢3分半（那半分钟其实是等红绿灯）
📝个人主页：应无所住而生其心的博客_府学路18号车神_CSDN博客
🎉点赞➕评论➕收藏 == 养成习惯（一键三连）😋
📖本系列主要以学习微信小程序MiniProgram开发为标准，实现自我能力的提升为目标⚡
⚡希望大家多多支持🤗~一起加油 😁

• 本栏：
  《微信小程序开发》

• 专栏

• 《Golang · 过关斩将》

• 《Neural Network》

• 《LeetCode天梯》

• 《Algorithm》

• 《Python》

• 《web》

---

最近在搞微信小程序开发，其实就是一大堆东西在堆砌，这年头太卷了，什么都得会一点儿才行呀！~

和车神哥一起，快速学会微信小程序开发。巩固加强知识呀！~

就一句话：一定要多练习，只有多练才能学的更快！

文末免费获取源代码文件哟！~

---

1.问题

• 什么是微信小程序呢？

• 移动互联网时代，手机。
• 手机软件，在手机上中安装很多软件。
• 腾讯和阿里（只安装自己不用别人）
• 腾讯：微信 + N小程序
• 阿里：支付宝 + N小程序

• 为什么要做小程序？

微信用户基数大。
在微信上用我们小程序会比较便捷。

• 怎样开发微信小程序？
  

• 小程序：学习微信开发的语言（前端html、css、js、vue.js）

  • 微信开发者工具

• API：restful接口（Python+django+drf框架）。

  • pycharm

2.环境搭建

2.1 Python环境搭建

• 虚拟环境
  • Django
  • drf
• PyCharm

相信PyCharm大家都有吧，还有Django的安装和drf安装，和安装其他库文件一样，在PyCharm的终端直接pip就可以了哦！~

输入：pip install Django==1.11.4，然后回车

输入：pip install djangorestframework，然后回车

2.2 小程序环境

2.2.1 申请一个微信公众平台

地址在这里：https://mp.weixin.qq.com/
点击下方小程序

安装要求一步一步的注册就好了

2.2.2 保存appid

一定要保存好自己的appid号，这个就是你的小程序id号哦！微信小游戏开发也是用的这个id。

AppID(小程序ID)wx9db96XXXXXXXXXXX

2.2.3 下载开发者工具

跳转此链接就可以下载啦：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

按照自己电脑的系统直接选择对应的稳定版本就可以咯！~

2.2.4 创建项目

下载好了以后，点击进入开发者工具中，扫码登录你的账号就行了。

点击小程序创建项目

然后创建，名称可以自己修改，目录也可以自己修改。注意后端服务——>选择不使用云服务。

点击确定就可以进去了

开发小程序

3.1 全局配置

资源管理器有很多的文件，pages就是总的页面，下面的文件包也是一个页面，所有可以包含很多很多个页面。每个页面包含：.js、.json、.wxml、.wxss.

配置全局，也就是总的页面布局，在下面这个app.json里面。

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "李业"
  },
  "tabBar": {
    "selectedColor":"#CD5C5C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  }
}

里面包含这些内容，pages内有两个页面：

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

也就是显示的下面这两个页面

下面的“window”可以设置表头的颜色、样式、标题名称、标题颜色等等

 "window": {
    "navigationBarBackgroundColor": "#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "府学路18号车神"
  },

还有下面的底部按键设置：

 "tabBar": {
    "selectedColor":"#CD5C5C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  }

设置好这个后整个页面就差不多了，如下图这样

3.2页面介绍

每个页面由四个文件组成，.js、.json、.wxml、.wxss.

js内包含我们后期的数据管理、各种function，也就是后端文件

.json文件，目前还用不上，后期介绍

.wxml和.html类似，就是前端的显示

.wxss也和.css一样，是对前端显示的样式、摆放、布局等的描述

3.3 组件

3.3.1 text

用于边写文本信息，类似于span标签
如：

<text>pages/home/home.wxml</text>

对应的图像界面显示为：

3.3.2 view

容器，类似于div标签
如：

<view>示例一</view>

3.3.3 image

图片，就不用解释了

 <image src="/static/hg.jpg"></image>

3.4 样式

3.4.1 像素

像素包括：

• px
• rpx，500rpx

在微信小程序里面建议都使用rpx。

在.wxss文件里面编辑样式的时候：

4. flex布局

这个布局也是在.wxss里面进行的。

.menu-1{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

这就是一个类的布局

在容器中记住4个样式就可以了。

• display: flex; flex布局
• flex-direction: row; 规定主轴的方向：row/column
• justify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flex-end/space-around/space-between
• align-items: center; 元素在副轴方向上的排列方式:flex-start/flex-end/space-around/space-between

---

源代码

附上源代码文件：微信小程序MiniProgram开发（一）

链接：https://pan.baidu.com/s/1xr3SjBdncSrcqvdKllSGyQ
提取码：yyds

---

今天就到这里吧，多多摸索，多多联系就可以学的更快啦！~

---

---

❤坚持读Paper，坚持做笔记，坚持学习，坚持刷力扣LeetCode❤！！！
坚持刷题！！！打天梯！！！
⚡To Be No.1

⚡⚡哈哈哈哈

---

⚡创作不易⚡，过路能❤关注、收藏、点个赞❤三连就最好不过了

ღ( ´･ᴗ･` )

❤

『
有一个夜晚我烧毁了所有的记忆，从此我的梦就透明了；有一个早晨我扔掉了所有的昨天，从此我的脚步就轻盈了。
』