编写微信小程序常用到的界面参数
开发者文档:https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
1 第一页 2 //index.js 3 //获取应用实例 4 const app = getApp() 5 6 Page({ 7 data: { 8 motto: 'Hello World', 9 userInfo: {}, 10 hasUserInfo: false, 11 canIUse: wx.canIUse('button.open-type.getUserInfo') 12 }, 13 //事件处理函数 14 bindViewTap: function() { 15 wx.navigateTo({ 16 url: '../logs/logs' 17 }) 18 }, 19 onLoad: function () { 20 if (app.globalData.userInfo) { 21 this.setData({ 22 userInfo: app.globalData.userInfo, 23 hasUserInfo: true 24 }) 25 } else if (this.data.canIUse){ 26 // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 27 // 所以此处加入 callback 以防止这种情况 28 app.userInfoReadyCallback = res => { 29 this.setData({ 30 userInfo: res.userInfo, 31 hasUserInfo: true 32 }) 33 } 34 } else { 35 // 在没有 open-type=getUserInfo 版本的兼容处理 36 wx.getUserInfo({ 37 success: res => { 38 app.globalData.userInfo = res.userInfo 39 this.setData({ 40 userInfo: res.userInfo, 41 hasUserInfo: true 42 }) 43 } 44 }) 45 } 46 }, 47 getUserInfo: function(e) { 48 console.log(e) 49 app.globalData.userInfo = e.detail.userInfo 50 this.setData({ 51 userInfo: e.detail.userInfo, 52 hasUserInfo: true 53 }) 54 } 55 })
1 <!--index.wxml--> 2 <view class="container"> 3 <view class="userinfo"> 4 <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> 5 <block wx:else> 6 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> 7 <text class="userinfo-nickname">{{userInfo.nickName}}</text> 8 </block> 9 </view> 10 <view class="usermotto"> 11 <text class="user-motto">{{motto}}</text> 12 </view> 13 </view>
1 /**index.wxss**/ 2 .userinfo { 3 display: flex; 4 flex-direction: column; 5 align-items: center; 6 } 7 8 .userinfo-avatar { 9 width: 128rpx; 10 height: 128rpx; 11 margin: 20rpx; 12 border-radius: 50%; 13 } 14 15 .userinfo-nickname { 16 color: #aaa; 17 } 18 19 .usermotto { 20 margin-top: 200px; 21 }
转载于:https://www.cnblogs.com/superslow/p/8858398.html
编写微信小程序常用到的界面参数相关推荐
- 微信开发者工具 wxmi修改模版颜色_网站建设公司讲解:微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面 创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
- 微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
- 新手尝试编写微信小程序(1)——我的第一个微信小程序
微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿 ...
- 【小程序】微信小程序常用api的使用,附案例(建议收藏)
1- 前言 这是微信小程序常用的几个API,特地总结一下: 学会使用 微信官方文档 · 小程序 2- 界面 2.1 wx.setNavigationBarTitle() 标题栏文本 wx.setNav ...
- 【小程序开发必备】微信小程序常用API全介绍,附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
- vc++6.0获取磁盘基本信息_微信小程序——常用功能2:微信小程序用户登录,申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息 为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
- 微信小程序-常用api
文章目录 微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
- 微信小程序如何刷新当前界面
微信小程序如何刷新当前界面 在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但 ...
- 微信小程序开发工具调试界面鼠标看不见
微信小程序开发工具调试界面鼠标看不见 参考 该贴<模拟鼠标消失> 解决方法: 打开"控制面板",在右上角搜索"鼠标" 点击"鼠标" ...
最新文章
- sklearn:Python语言开发的通用机器学习库
- Android的BroadcastReceiver 广播 短信拦截
- CSS浮动(二)---Float
- 105_Power Pivot财务科目(层级深度筛选深度)
- POJ 2479 Maximum sum
- 二、Spring Cloud的配置 之 Eureka(服务注册中心)配置
- 读书笔记:Sheldon.M.Ross:概率论基础教程:2014.01.22
- hscan扫描mysql代码_HScan 扫描器
- STC12LE5612AD芯片使用心得(一)芯片介绍
- apple ID 注册 此时无法创建您的账户
- 【笔记】c++ - 正则表达式: GNU Regex Library、PCRE, PCRE++、Boost.Regex
- 【支付宝】支付 系统繁忙,请稍后再试(ALIN10146)
- 各大电商平台API、淘宝API、1688API、拼多多API抓取商品详情数据接口
- 保弘实业|不同年龄段的人都应该如何理财呢?
- 作为一个男人,必须在30岁前做到这16件事
- 《蒋勋说宋词》 读后感
- 微信表情的字符编号完整版【图文并茂哦!】
- 【音乐理论】音与音高 ( 音区 | 小字一组 | 小字组 | 大字组 )
- 沧小海基于xilinx srio核的学习笔记之第二章 	Rapidio技术概述
- 解析 Java 类和对象的初始化过程
热门文章
- 【转】Virtualbox虚拟机配置安装CentOS 6.5图文教程
- C#中的SMTP配置Outlook.Com SMTP主机
- Linux screen如何加载用户配置
- linux虚拟网络设备--内核网桥的实现分析(六)
- KVM中ioeventfd创建与触发的大致流程(十四)
- leetcode算法题--K站中转内最便宜的航班★
- 前牙正常覆盖是多少_个性化舌侧矫治器的前牙转矩控制技巧——赵志河教授
- Elasticsearch 7.0中引入的新集群协调子系统如何使用?
- 陈一舟:雷军马云在通讯领域也做不过马化腾 为何我就该挨骂
- python post提交数据