微信小程式——授權

廣州蘆葦科技web前端發表於2018-12-24
微信小程式

標籤：小程式 授權

需求

進入小程式首頁，使用者點選頁面任意地方觸發小程式授權彈窗，如果已授權則不觸發彈窗

實現難點

  • 小程式的wx.getUserInfo()介面不會主動觸發小程式授權彈窗，只能通過button元件的open-type ，通過點選觸發授權彈窗；
  • 授權之後，再次點選頁面進行正常的操作邏輯

思路分析

分析解決問題的思路1.思路一是通過父元件button包裹頁面內容，觸發授權彈窗，但該思路導致一個問題：使用者同意授權之後，再次點頁面會繼續執行button的點選事件，觸發wx.getUserInfo()介面，不能進行正常的業務邏輯2.改變1中的思路，將button元件作為一個蒙層，通過授權與否判斷是否渲染該蒙層

程式碼實現

<
html>
<
view class="city-wrap flex-box fw-wr" hover-class="none" hover-stop-propagation="true">
    <
block wx:for="{{cityList
  }
  }" wx:key="{{item.areaId
  }
  }" >
        <
view class="fd-col" data-city="{{item.areaId
  }
  }" data-name="{{item.name
  }
  }" catchtap="handleSelectCity">
            <
image class="city-pic-wrap" src="{{item.citySelectedFlag ? cityWrapSelected : cityWrap 
  }
  }">
                <
image class="city-pic" src="{{item.picture
  }
  }"/>
            <
/image>
            <
view class="city">
{{item.name
  }
  }<
/view>
            <
view class="city">
{{item.spell
  }
  }<
/view>
        <
/view>
    <
/block>
<
/view>
<
view class="lookfoward-more flex-b-cc">
    <
text>
更多城市正在探索，敬請期待<
/text>
<
/view>
<
button open-type="getUserInfo" class="wechat-auth-wrap" bindgetuserinfo="handleLogin" wx:if="{{!userAuthorization
  }
  }">
<
/button>
<
/html>
複製程式碼

實現效果

參考文件

備註:

  • 具體怎樣判斷是否授權，請參考《小程式引入Promise》文件
  • 是否有更好的實現思路？

作者簡介：黃傑，蘆葦科技web前端開發工程師，擅長網站建設、微信公眾號開發、微信小程式開發、小遊戲製作、企業微信製作、H5建設，專注於前端框架、互動設計、影像繪製、資料分析等研究。

歡迎和我們一起並肩作戰： web@talkmoney.cn訪問 www.talkmoney.cn 瞭解更多

提供專業的微信公眾號建設，高質量的釘釘製作，高價效比的企業微信製作，廣州微信小程式製作，靠譜的小遊戲外包，深圳H5外包

來源：https://juejin.im/post/5c2040a6e51d45619a4b67cd

相關文章