承接小程序配置之后 ，先对小程序开发软件的界面进行介绍：
通过左上角的 “+”添加页面
然后创建第一个功能页面 
然后页面构造完成：各部分代码：
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这个行为
然后第一个小程序就完成啦~~