微信小程序> 微信小程序基础入门(一):小程序界面介绍&创造自己的第一个小程序

微信小程序基础入门(一):小程序界面介绍&创造自己的第一个小程序

浏览量:1688 时间: 来源:GroovRain

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

小程序

小程序

小程序

小程序

小程序

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

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

小程序

小程序

然后创建第一个功能页面

小程序

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

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这个行为

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎