WeChat Mini Programs real machine canvas drawing user profile portrait can not be drawn!

first introduce my project logic:

1: there is a button button,open-type on the home page to get the information for getuserinfo, using bindgetuserinfo. Then I save the user"s nickname and avatar in setStorage, and get the user"s nickname and avatar on the third page. Then you need to generate an image on the third page (click the button canvas to draw).

everything looks fine in the developer tool now. Clicking button, for the first time on the first page console.log () can also print out the user"s avatar url address, so there is no problem on the third page.

but on the real machine, the url of the avatar cannot be printed and cannot be obtained when the button on the first page is clicked for the first time. Every time you re-enter Mini Program, you have to return to the first page to get the avatar url (click the button twice).

paste my code below:
<button class="start-btn" style="margin-top: -140rpx;" open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="primary" bindtap="canILogin"> </button>

getUserInfo(){
    var that = this;
    wx.downloadFile({
        url: this.data.avatarUrl,
        success: function (res) {
          console.log(res.tempFilePath);
          that.setData({
            avatarUrl: res.tempFilePath
          })
        }
      })
}
onHide: function () {
    var that = this;
    wx.downloadFile({
      url: this.data.avatarUrl,
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          avatarUrl: res.tempFilePath
        })
      }
    })
    console.log(this.data.avatarUrl);
    wx.setStorage({
      key: "userInfo",
      data: [this.data.avatarUrl, this.data.nickName],
    })
  },

ask a boss for help. Let"s see how to solve this

Mar.22,2021
Menu