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 发送给后台解码出 unionIdthis.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），建议详细阅读官方文档
编写好代码以后点击菜单栏>上传

然后填写版本号以及备注信息点击上传即刻
然后登陆微信公众平台提交审核，审核过后就可以直接发布上线了

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

微信小程序学习之路（一）相关推荐

微信小程序学习之路——API媒体
媒体图片 wx.chooseImage(Object) 从本地相册选择图片或者使用相机拍照,拍照时产生的临时路径小程序本次启动期间都可以正常使用,如果需要持久保存,就要主动调用wx.saveFile ...
微信小程序学习之路——表单组件（一）
radio组件 1.radio-group 在小程序中<radio/>不能单独使用,同一组<radio/>需要包含在一个<radio group/>中,这样才能形成 ...
微信小程序学习之路——API获取二维码
获取二维码通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面. 可以使用开发工具 1.02.1803130 及以后版本通过二维码编译功能调试所获得的二维码为满足不 ...
微信小程序学习之路——浮动与定位
了解基本盒子模型后,我继续学习定位相关的内容,定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现在哪,或者相对于父元素.零一元素甚至浏览器窗口本身的位置,浮动和定位是我们常用的布局方案 ...
微信小程序开发之路（二）
由于前段时间比较忙,已经有半个多月没有更新文章了.最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序. 在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法 ...
小程序学习之路（持续更新）
小程序学习之路 1. 小程序简介 2. 第一个小程序 3.小程序代码的构成 4.小程序的宿主环境 4.1 小程序的启动过程 4.2 页面渲染过程 5. WXML模板语法 1. 小程序简介小程序与普通 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...

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