【學習記錄】微信小程序：前端開發實戰

標簽：圖標   支持   開發實戰   direct   菜單欄   tst   推薦   ref   type   

頁面創建

1. 路由頁面 route

小程序打開后第一個進入的頁面

2. 登錄頁面 enroll
3. 注冊頁面 register
4. 底部菜單欄 bottom_menu
5. 首頁頁面 home
6. 社區頁面 community
7. 發布任務頁面 publish
8. 任務頁面 task
9. 我的頁面 mine

下載圖標

前往iconfont-阿里巴巴矢量圖標庫下載圖標。

未選中unselected顏色：#8a8a8a

選中selected顏色：#f83b23

頁面配置

?頁面配置 | 微信開放文檔

路由界面獲取用戶信息

?開放接口 /用戶信息 /wx.getUserProfile

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像昵稱 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認
    // 開發者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
    wx.getUserProfile({
      desc: ‘用于完善會員資料‘, // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
})

?路由 /wx.redirectTo| 微信開放文檔

關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。

?界面 /交互 /wx.showLoading| 微信開放文檔

顯示 loading 提示框。需主動調用 wx.hideLoading 才能關閉提示框

?界面 /交互 /wx.hideLoading| 微信開放文檔

隱藏 loading 提示框

在app.js中的globalData一般是用來存儲全局變量的。

globalData: {
    user: {}, //后臺返回用戶全部信息
    userInfo: {}, //微信獲取用戶信息
}

【學習記錄】微信小程序：前端開發實戰

標簽：圖標   支持   開發實戰   direct   菜單欄   tst   推薦   ref   type   

原文地址：https://www.cnblogs.com/zhulu506/p/14966806.html