编写微信小程序常用到的界面参数

 

开发者文档：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

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的编写微信小程序常用到的界面参数的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。