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