1、前言

微信小程序所使用的是腾讯自己开发的MINA框架，MINA框架跟主流框架有很大的相似之处，是一个MVVM框架，很庆幸本人先前有学过一点点VUE所以入门MINA框架还算比较顺利，由于需要完全熟悉MINA框架我还需要学习很多，所以微信小程序学习之路篇打算一直写下去，用以督促自己的学习。

2、准备工作

（1）、IDE的选择

对于编辑器的选择，在没有接触微信小程序之前，本人使用的是webstorm以及vscode,微信小程序有提供自己的IDE微信开发者工具，当然你也可以继续使用自己惯用的IDE但是预览以及一些小程序的发布以及一些项目设置比较麻烦，所以本人还是推荐使用微信官方给的开发者工具，一些快捷键代码的编辑习惯上面和vscode比较相似。

（2）、微信小程序的文件说明

文件支持：目前微信小程序只提供了5种文件的编辑

文件类型	文件说明
wxml	相当于Html文件，但是使用的标签与普通的Html文件有所区别
wxss	相当于CSS文件，编写语法上基本与CSS完全一样
js	普通js文件
json	页面配置文件
图片文件	图片文件可提供预览

新建一个页面就相当于新建了四个文件名一样文件后缀分别为wxml、wxss、js、json的四个文件，此后该页面的样式与逻辑都会在这四个文件中编写，微信小程序识别文件依赖的方法就是通过文件命名的方式来实现的，因此文件的命名必须要注意，另外同属一个页面的文件也应该放到同一文件夹中便于管理。
默认文件：使用开发者工具新建一个微信小程序项目自动生成的文件

文件名	说明
app.js	全局js逻辑，里面的生命周期函数是相对于整个微信小程序而言的，在这里也可以存放一些全局的常量变量或者是函数
app.json	全局配置文件，在这里可以对微信小程序全局的样式或者是一些功能作配置
app.wxss	全局样式
project.config.json	此文件用于设置一些有关微信小程序开发者的一些信息

（3）开发者用户注册

每一个小程序的开发者都需要申请注册一个小程序账号（仅作练习除外，练习使用可以选择测试号），用来开发管理发布小程序以及联合开发，这一部分都是走流程的环节，参照文档一般都能注册成功

3、编写

（1）、新建项目

在这里插入图片描述
每一个微信小程序开发者都会有一个唯一的AppID如果项目的开发者只有你自己一个人可以直接使用你个人的AppID，但是如果是联合开发的话一般使用的是项目管理员的AppID。

（2）、代码的编写

//app.js
App({
  //生命周期函数
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

//app.json
{
  "pages":[
    "pages/index/index",//微信小程序最开始显示的页面放在第一位
    "pages/logs/logs"
  ],
  //微信小程序的视窗样式
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

对于代码的编写这块，这里只是提供了一些基本的配置以及样式

3、代码的发布以及审核

小程序的发布是有限制的（如项目大小不允许超过2m），建议详细阅读官方文档
编写好代码以后点击菜单栏>上传
在这里插入图片描述
然后填写版本号以及备注信息点击上传即刻
然后登陆微信公众平台提交审核，审核过后就可以直接发布上线了

注：现在微信小程序已经支持个人主体了，也就是说个人也可以发布小程序，只是个人发布的小程序与组织发布的小程序有着不小的区别，个人主体的小程序无法使用完整的小程序接口

微信小程序学习之路（一）