承接小程式配置之後 ，先對小程式開發軟體的介面進行介紹：

然後進入第一個小程式的構造：獲取使用者登陸資訊

通過左上角的 “+”新增頁面

然後建立第一個功能頁面

然後頁面構造完成：各部分程式碼：

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這個行為

然後第一個小程式就完成啦~~