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

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