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