“我正在参加「掘金·启航计划」”

自我介绍

电气男孩子，在读研究生。受时代发展影响，本专业也需要广泛吸纳各种计算机专业的大佬，来帮助我们这些“菜鸟们”完成一些专业项目。很不幸，我成为了一个“计算机专业的电气学子”，目前已接触微信小程序开发有一年多的时间了，从前端到后端都是自己一个人摸索，且写的代码也常常遭遇专业人士的“另眼相看”。浅浅分享一下自己的学习历程，算是对这一年的工作进行总结，也希望大家能对我学习的内容给予一些指导，不胜感激！

引言

第一次了解小程序，是从我们的合作项目中，合作方希望能上线他们自己的小程序，于是我就开始了长达半年的B站视频学习。我记得很清楚我的课课程有150集左右，刚开始的60集我还能照着做，属于一些比较基础的储备知识，剩下的就是博主自己搭建的服务器，通过调用一些请求的代码，我已经全晕了！！！！大概经历过痛苦的一周时间后，我决定开始自己试着做一些想实现的功能，一点点积累。一边练习，一边查漏补缺。

以上全是废话，正文要开始啦！！！

1、微信小程序的申请

首先首先我们要在微信官方网站申请一个属于自己的微信小程序，需要注册一个自己的账号，建议重新注册一个邮箱账号（系统要求需要使用一个没有注册过微信小程序或者微信公众号的邮箱），通过一步步设置拥有自己的小程序账号，具体流程不再赘述！

微信公众平台 (qq.com)

别忘啦!!!最好注册个人的小程序，我后期给公司注册过，流程和需要的文件都比较多，但公司账号会具备一些个人账号没有的功能，初学者暂时还用不到

2、创建自己的第一个小程序

进入小程序后，要先弄清楚小程序的代码结构。

app.js：小程序的入口文件。可以做一些初始化的操作。

app.json：全局配置文件。配置窗口的表现等等。

logs存放日志文件夹。

utils：工具，自定义的工具集合。

logs存放日志文件夹。

utils：工具，自定义的工具集合。

index文件夹详解

index.js：页面的交互逻辑和数据。

index.json：全局的，页面相关的配置

index.wxml：组件代码的地方。

index.wxss：页面相关的样式文件。只能被该页面的样式使用。

3、配置底部tabbar

此处配置的是小程序底部的导航栏，在app.json文件夹中。

1、其中"pages"代表的是小程序的页面，此处有多少个文件就证明小程序内包含了多少个页面，一般使用“pages/aaa/aaa”的样式，代表pages路径下创建了一个aaa文件夹，文件夹中的四个基础文件前缀也为aaa,也可以写成“pages/aaa/bbb”但并不做推荐。

2、windows配置的是页面风格、标题栏及景色、页面最上方的文字颜色、文字内容

3、tabBar则是我们底部导航栏的具体实现了，要设定图标选中与未选中的颜色，在“list”清单中标明页面路径，文字提示，以及选中与未选中的图片。

部分代码如下：

"pages":[
    "pages/shouye/shouye",
    "pages/index/index",
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1296DB",
    "navigationBarTitleText": "xxxx",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#1296DB",
    "selectedColor": "#1296DB",
    "backgroundColor": "#FFFFFF",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/shouye/shouye",
        "text": "首页",
        "iconPath": "icons/shouye.png",
        "selectedIconPath": "icons/-shouye.png"
      },

4、编辑第一个页面内容

在test.wxml中写：

<view>hello world!</view>
<view>这是我的第一个小程序</view>

test文件夹中的其余内容保持默认，即可完成第一个小程序啦！图片如下：

AS0LJ8B{@NH4A{~S1)QO76S.png

5、修改页面的标题

在test.json中添加 "navigationBarTitleText"为“首页”，效果如下：

6、修改页面样式

在test.wxss中进行修改，rpx是小程序的独有单位哟！代码如下：

<!--pages/test/test.wxml-->
<view class="ti">hello world!</view>
<view>这是我的第一个小程序</view>

/* pages/test/test.wxss */
.ti{
 font-size: 100rpx;
 color: red;
}

2FVLJNW4UHB_}RTON1}$%OI.png

classs是为了给view标签分在不同的类中，对每一类的标签进行不同的设置，比如hello world!的类是ti，因此文字字体和颜色会发生改变。而“这是我的第一个小程序”并不属于ti类中，所以文字并不会发生变化

前端小白&微信小程序

引言