微信ウィジェット~新版ライセンスユーザー登録例

実現する効果

ユーザーがパーソナルセンターに入り、直接ユーザー情報を取得するポップアップウィンドウをポップアップする

以前は許可弾窓

を直接ポップアップすることができた.

権限ポップアップ

をポップアップするには、ボタンをクリックする必要があります.

は、円形のユーザアバター

を表示する.
ユーザー情報の取得方法
公式ドキュメントリンク
授権弾窓
公式に取得するユーザ情報ドキュメントは、ユーザ体験を最適化するために調整され、wxを使用する.getUserInfoインタフェースが直接ライセンスボックスをポップアップする開発方式は、徐々にサポートされなくなります.2018年4月30日より、ミニプログラムとミニゲームの体験版、開発版がwxを呼び出す.getUserInfoインタフェースは、認証質問ボックスをポップアップできず、デフォルトの呼び出しに失敗します.正式版はしばらく影響を受けない.
つまり、従来のwx.getUserInfoでは授権ウィンドウが直接ポップアップされず、新版では呼び出しがfailに直接戻り、現在のやり方ではbuttonをクリックすることでユーザー授権機能を実現しています.
ボタンをクリックして権限を与えるのも大部分の開発者が受け入れたくないので、結局ページにボタンを追加するのはあまりにも調和がとれていないが、微信の地盤では、やはり人のやり方を押さなければならない.
ドキュメントには、ユーザー情報を取得する2つの方法が説明されています.

は、開示ユーザ情報

をで取得する.

もう1つは、buttonコンポーネントを用いるopen-typeをgetUserInfo型

として指定することである.

  
      
         

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    //       
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          //     ，       getUserInfo       
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
  //        
    console.log(e.detail.userInfo)
  }
})

で円形のアイコンを実現
直接コードを貼りました

  
    
  
  
    
      
    
    
      ·
      ·
      
    
  

cssスタイルは次のとおりです.

.amountBg {
  display: flex;
  flex-direction: row;
  height: 100px;
  background-color: #5495e6;
  align-items: center;
}

.img {
  overflow: hidden;
  display: block;
  margin-left: 20px;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}

.account {
  width: 70%;
  color: #fff;
  margin-left: 10px;
  align-items: center;
}

.nick-name{
  font-family: 'Mcrosoft Yahei';
  font-size: 16px;
}

.address{
  font-size: 13px;
}
.nav {
  width: 15px;
  color: #fff;
}

リファレンス
CSSディスプレー属性CSSオーバーフロー属性