微信小程序开发从入门到入坑

博主绪言

前几天跟着星爷入门了一下微信小程序开发，之后自己也动手去做了几个小项目玩玩，感觉微信小程序还是挺好玩的，所以一时兴起，写一点自己的心得总结，及时输出自己这几天学的东西。

准备阶段

注册微信公众平台

如果你要进行微信小程序开发，那么肯定得注册一个微信公众平台的账号，去官网直接注册即可,注意，一个邮箱账号只能发布一个小程序，如果你要同时发布多个线上小程序给大家使用的话，就得用不同的邮箱账号注册，当然这几个不同的邮箱账号可以绑定你的微信号。
微信公众平台开发设置当中有一个APPID，这个比较重要，每次你新建小程序项目的时候，如果要发布到线上，可以使用这个APPID，当然如果至少自己看看，玩玩，就可以使用测试号。

下载微信开发者工具

进入这里，直接下载稳定版本的开发者工具，一般都是下载windows64版本，当然，具体还得看你的电脑型号。

之后就是傻瓜式安装，点击下一步即可。

小程序内部架构

新建一个小程序项目，如下图：

如果你要上线发布小程序，就输入你的APPID，反之则选择测试号即可。如果说你的小程序开发过程当中需要使用到云函数，云存储等东西的时候，就可以选择云开发，如果没有用到的话，直接选择不用云服务开发即可。
建完新项目以后，会出现一个固定的模板，如下：

pages目录是存放各种页面的文件夹，该目录下，每一个文件夹都代表一个不同的页面，与pages目录对应的还必须得建立三个文件，分别为app.js,app.json,app.wxss,这三个文件代表全局文件，也就是说，它们一旦改变，就会使得所有的页面对应的发生改变，当我们需要小程序首先显示某一个页面的时候，我们也可以从中做对应的改动。

• json文件为小程序配置文件，配置小程序的所有页面路径、界面表现、网络超时时间、底部 tab，以及标题栏等，其中最外层的app.json文件为全局配置文件，如下代码示例：

{
  "pages": [              //这个是用来配置页面路径的
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {                               //这个定义小程序所有页面的顶部背景颜色，文字颜色定义等。
    "backgroundTextStyle": "light",          
    "navigationBarBackgroundColor": "#fff",    //标题栏背景颜色
    "navigationBarTitleText": "WeChat",         //小程序标题
    "navigationBarTextStyle": "black"            //标题文字颜色
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• wxml文件是小程序的布局文件，类似于我们经常看到的HTML文件，用来声明我们小程序当中要用到的组件，绑定时间等等。

                //在WXML文件当中，我们所看到的每一个页面都可以分为几个部分，每一个部分我们都可以使用这个视图容器包裹起来，其中的class表示布局及控件的属性定义，我们可以利用class绑定这个组件，然后在WXSS文件当中利用它改变组件布局。
  
     获取头像昵称   //bind~是绑定了名为getUserInfo方法事件，一旦点击，就会触发，相当于事件监听器。
    
      
      {{userInfo.nickName}}//{{变量}}
    
  
  
    {{motto}}
  

• WXSS文件是用来改变组件布局，大小的，相当于CSS文件。

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

.class名字{}里面是用来改变对应绑定组件部分的布局的，例如disploy就是声明布局的，这里是flex布局，flex布局里面又声明为垂直布局等等，具体大家可以看看微信公众平台官方文档进行了解.

• js文件则是定义了界面的所有逻辑处理，就相当于后端处理一样，比如说事件监听器的方法是在里面写，组件当中的变量也是在其中声明，调用各种函数都是在这里面进行。

Page({
  data: {                    //声明各种变量的，当需要从函数当中改变的时候就可以用到
    motto: 'Hello World' // 在界面上显示Hello World这行文本，该值为默认文本
  },
  // button控件绑定的事件
  setText: function (e) {     //这里面是写各种方法的
    this.setData({            //调用方法的时候，如果涉及到改变界面当中的变量值，就可以通过这个函数实现。
      motto: '改变了我' // 为motto这个text控件赋值
    })

#常用的属性

blackground-color:背景颜色
Color：前景颜色
Font-size：字体大小
Border：边框(比如20px，就是边框周围20px不准有其他东西，如20rpx solid black就是边框周围20rpx处位黑色)
Width: 组件占据的宽
Height: 组件占据的高

至于各种组件的使用，大家也可以参考微信开发文档，点击.

flex布局

以下是我对一些布局使用的总结，比较常用

1.基本概念：容器与项目：



外层为容器，内层为项目，视图容器包裹项目
2.容器属性：
A.flex-direction:
格式：

.container{
     display:flex;
     flex-direction:row(默认为水平布局，从左到右)或者row-reverse(水平从右到左)或者column(垂直布局，从上往下)或者column-reverse. 
}

B.justify-content:设置项目在主轴上面的对齐方式，以及分配项目之间及其周围的多余空间
格式：

.container{
     display:flex;
     justify-content:flex-start(默认，对齐主轴起点，项目之间不留空隙)或者centre(主轴上面居中排列，并且项目之间不留空隙，第一个项目离起点的距离等于最后一个项目看、离终点的时间)，flex-end（对齐主轴终点，不留空隙），space-between（项目间距相等，第一个和最后一个项目分别紧贴着起点和终点），space-around：起点和终点距离为中间项目距离的一半
     }

C.align-items：设置项目在行中的对齐方式
格式：

.container{
     display:flex;
     align-items：stretch(默认，未设置项目尺寸的时候，将项目拉申至填满交叉轴，也就是辅轴)，flex-start：项目顶部与交叉轴起点对齐，flex-end：项目底部与交叉轴终点对齐，centre：项目在交叉轴当中中间对齐
}

D.align-content:用于多行排列时设置项目在交叉轴方向上面的对齐方式，以及分配项目之间和周围的多余空间。
格式：

.container{
     display:flex;
     align-content:stretch(默认，未设置项目尺寸的时候，将项目拉申至填满交叉轴，也就是辅轴)，flex-start：项目顶部与交叉轴起点对齐，flex-end：项目底部与交叉轴终点对齐，centre：项目在交叉轴当中中间对齐，space-between（行间距相等，第一个和最后一个项目分别紧贴着起点和终点），space-around：起点和终点距离为中间行距离的一半
}

E.flex-wrap:规定是否允许换行，多行排列时换行的方向

.container{
     display:flex;
     flex-wrap：nowrap（默认，不换行，如果内容值过多可能会被压缩），wrap：当容器单行容不下所有项目的时候，换行，wrap-reverse：换行相反
}

上传说明

如果你使用的是测试号，是不能把你的代码上传的，当然如果使用了APPID，写完代码，你觉得还阔以的话，你可以尝试上传给其它小伙伴使用，在微信开发工具的详情里面有一个上传按钮，你直接点击上传即可。
上传成功以后，你再登陆你的微信公众平台，如果你是第一次发布小程序的话，就得填写小程序信息，进行相关的认证，认证审核通过以后，点击前往发布就可以看到相应的界面。

你可以选择直接上传(这个审核的时间比较久，一般是两天，如果你着急想让你的小伙伴马上使用你开发的小程序的话，你可以直接上传体验版本，然后在用户里面选择体验的用户即可)

实战开发

掌握了上面的基础以后，可以说是入门了，如果你还比较感兴趣或者有余力的话，还可以看一下下面的实战开发。接下来，我将会给大家讲解两种小程序开发模式，一种是普通的非云开发，一种是调用云存储和云函数的云开发：
非云开发：天气之子
云开发：云开发：让你拥有自己的第一个的AI人脸识别小程序
最后，欢迎大家关注我的个人博客，在下所有的文章都是从个人博客导入进来的，文章会首先更新在个人博客里。希望我的博客能够给大家带来收获！