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

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

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

然后创建第一个功能页面

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

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

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

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

  1. 支付宝小程序-基础入门技能汇总

    支付宝小程序-基础入门技能汇总 开发前必知 页面级常用配置 常用 列表渲染 空标签 事件 图片引入 css背景图 自定义组件 开发工具 vscode 工具 底部导航 开发前必知 ● css单位用rpx ...

  2. Android基础入门教程——1.7 界面原型设计

    Android基础入门教程--1.7 界面原型设计 标签(空格分隔): Android基础入门教程 本节引言: 引用锤子科技视觉设计总监--罗子雄在重庆TEDx活动上说的一小段话: 每当我们看到一些美 ...

  3. 小程序基础入门(黑马学习笔记)

    一.宿主环境--组件 1.scroll-view(滚动效果) scroll-y 属性:允许纵向滚动 scroll-x 属性:允许横向滚动 注意:使用竖向滚动时,必须给scroll-view 一个固定高 ...

  4. VS2010/MFC编程入门之一(Ribbon界面开发:创建Ribbon样式的应用程序框架)

    Ribbon界面就是微软从Office2007开始引入的一种为了使应用程序的功能更加易于发现和使用.减少了点击鼠标的次数的新型界面,从实际效果来看,不仅外观漂亮,而且功能直观,用户操作简洁方便. 鸡啄 ...

  5. 【Unity3D入门教程】Unity3D界面介绍及游戏对象基本操作

    1 界面介绍 在Windows等图形化操作系统上,熟练地使用菜单.图标.快捷键等,将会极大提升工作效率.因此,要认识一个软件,学会熟练使用他们,就必须先认识软件的界面. 先点击菜单栏的Window-- ...

  6. 微信小程序基础入门---登陆实现

    1.搭建登陆静态页面 2.登录鉴权 在用户填写完信息之后,点击登录按钮,调用登录接口,根据后台返回内容判断是否登录成功. 在这里,当我们输入正确的账号和密码之后,后台提示我们登录成功,但是当我们在登录 ...

  7. Postman使用小教程--基础入门篇

    文章目录 1 Postman介绍 2 postman基础功能介绍 2.1 postman基础页面 2.2 postman基础页面介绍 2.2 接口测试流程和原理 2.3 请求区域介绍 3 导出和导入接 ...

  8. 《零基础入门学习Python》(23)--递归:这帮小兔崽子

    前言 我们接下来吧递归的用法再熟练一点,大家都知道斐波那契数列吧,以下我们以实际的兔子繁殖的例子来编写一个关于斐波那契数列的递归函数 知识点 我们都知道兔子繁殖能力是惊人的,如下图: 我们可以用数学函 ...

  9. Spring Boot+Spring Cloud基础入门(一)简单介绍

    转自:https://blog.csdn.net/mingwei_cheng/article/details/80939833 在经历了毕业的摧残后,终于又有时间来更新博客了,毕业设计项目是写了一个基 ...

最新文章

  1. 关于Python中的yield(转载)
  2. 设置Eclipse、MyEclipse默认workspace路径
  3. 板子ping不通PC怎么办——韦东山嵌入式Linux学习笔记07
  4. 服务器区分几位系统吗,怎么区分服务器是几个CPU,几核
  5. python 函数的调用的时候参数的传递_Python Unittest;如何获取调用函数时传递的参数?...
  6. 今年暑假不AC-贪心
  7. css:学习CSS了解单位em和px的区别
  8. 线性代数:矩阵运算之乘法?
  9. 计算机视觉论文-2021-07-07
  10. 《Python基础入门》
  11. ajax请求的五个媒体查询,七个高度有效的媒体查询技巧
  12. Windows server 2016 / Windows 10关于域管理员帐号权限不足的问题
  13. 对anaconda虚拟环境进行迁移
  14. php7类型约束,类型约束 - PHP 7 中文文档
  15. Halcon深度学习预训练网络模型
  16. hive3.1.2的下载及安装
  17. 手机怎么打开谷歌官网页服务器地址,google手机地图打不开了的解决方法
  18. “dying ReLU“问题
  19. HOOK SSDT 实现内核级的进程保护
  20. Nginx-RTMP功能调研

热门文章

  1. 让我们泪流满面的电影经典台词
  2. windows 不能对金士顿u盘格式化问题的解决
  3. C语言程序设计50行以上,C语言程序设计100例——都卡会了,2级绝对没问题了---2...
  4. Android开发谈谈羊了个羊游戏爆火背后......
  5. 小米机顶盒怎么看电视直播?可以看电视直播的各种好用软件推荐
  6. Scala语言学习一——基础语法
  7. JPEG2000 编解码原理
  8. leetcode 546. 移除盒子 —— 动态规划
  9. parcelable接口实现
  10. JAVA 解三或二元一次方程组commons-math包 麻瓜教程