承接小程序配置之后 ，先对小程序开发软件的界面进行介绍：

然后进入第一个小程序的构造：获取用户登陆信息

通过左上角的 “+”添加页面

然后创建第一个功能页面

然后页面构造完成：各部分代码：

app.json

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "小程序","backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh": false}}

app.js

App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function () {},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function (msg) {}})

index.wxml

<button open-type='getUserInfo' bindtap='onGetUserInfo'> 获取用户信息</button>

index.js

// pages/index/index.js

Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},onGetUserInfo:function(){wx.login({success:function(res){wx.getUserInfo({withCredentials:true,success:function(res){console.log(res);}})}})},})

讲解

这里app.js 以及app.json的设置是通用的，就不进行讲解了

讲解一下.index.js以及wxml的作用

index.wxml中是button 是按钮组件

bindtap,是绑定点击事件，每次在页面点击就会触发ongetUserinfo事件；
type-on 是授权管理， 这里要写明是授权js事件中那个行为 ，这里授权的是获取用户信息的行为，即授权ongetUserinfo事件中wx.getuserinfo这个行为

然后第一个小程序就完成啦~~