小程序開發能力

1. 獲取用戶頭像

當小程序需要讓用戶完善個人資料時，我們可以通過微信提供的頭像、昵稱填寫能力快速完善。如圖：

想使用微信提供的頭像填寫能力，需要兩步：

1. 將 button 組件 open-type 的值設置為 chooseAvatar
2. 當用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調獲取到頭像信息的臨時路徑。

<!-- 給 button 添加 open-type 屬性，值為 chooseAvatar -->
<!-- 綁定 bindchooseavatar 事件獲取回調信息 -->
<button open-type="chooseAvatar" bindchooseavatar="getAvatar">按鈕
</button>

落地代碼：

<view class="avatar"><button open-type="chooseAvatar" bindchooseavatar="getAvatar"><image src="{{ avatarUrl }}" mode="" /></button>
</view>

Page({/*** 頁面的初始數據*/data: {avatarUrl: '/assets/tom.png'},// 獲取用戶頭像信息getAvatar(e) {// 獲取選中的頭像const { avatarUrl } = e.detail// 將獲取到的頭像賦值給 data 中變量同步給頁面結構this.setData({avatarUrl})}// coding...
}

2. 獲取用戶昵稱

知識點：

當小程序需要讓用戶完善個人資料時，我們可以通過微信提供的頭像、昵稱填寫能力快速完善。如圖：

想使用微信提供的昵稱填寫能力，需要三步：

1. 通過 form 組件中包裹住 input 以及 form-type 為 submit 的 button 組件

2. 需要將 input 組件 type 的值設置為 nickname，當用戶輸入框輸入時，鍵盤上方會展示微信昵稱

3. 給 form 綁定 submit 事件，在事件處理函數中通過事件對象獲取用戶昵稱

落地代碼：

<!-- 需要使用 form 組件包裹住 input 以及 button 組件 -->
<form bindsubmit="onSubmit"><!-- input 輸入框組件的 type 屬性設置為 nickname，用戶點擊輸入框，鍵盤上方才會顯示微信昵稱 --><!-- 如果添加了 name 屬性，form 組件就會自動收集帶有 name 屬性的表單元素的值 --><input type="nickname" name="nickname" placeholder="請輸入昵稱" /><!-- 如果將 form-type="submit" ，就將按鈕變為提交按鈕 --><!-- 在點擊提交按鈕的時候，會觸發 表單的 bindsubmit 提交事件 --><button type="primary" plain form-type="submit">點擊獲取昵稱</button>
</form>

Page({// 獲取微信昵稱onSubmit (event) {// console.log(event.detail.value)const { nickname } = event.detail.valueconsole.log(nickname)}}

3. 轉發功能

轉發功能，主要幫助用戶更流暢地與好友分享內容和服務

想實現轉發功能，有兩種方式：

1. 頁面 js 文件 必須聲明 onShareAppMessage 事件監聽函數，并自定義轉發內容。只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕

2. 通過給 button 組件設置屬性 open-type=“share“ ，在用戶點擊按鈕后觸發 Page.onShareAppMessage 事件監聽函數

官方文檔 onShareAppMessage：

落地代碼：

<!--pages/cate/cate.wxml--><button open-type="share">轉發</button>

Page({// 監聽頁面按鈕的轉發 以及 右上角的轉發按鈕onShareAppMessage (obj) {// console.log(obj)// 自定義轉發內容return {// 轉發標題title: '這是一個非常神奇的頁面~~~',// 轉發路徑path: '/pages/cate/cate',// 自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑imageUrl: '../../assets/Jerry.png'}}})

4. 分享到朋友圈

小程序頁面默認不能被分享到朋友圈，開發者需主動設置“分享到朋友圈”才可以，實現分享到朋友圈需滿足兩個條件：

1. 頁面 必須 設置允許“發送給朋友”，頁面 js 文件聲明 onShareAppMessage 事件監聽函數

2. 頁面 必須 需設置允許“分享到朋友圈”，頁面 js 文件聲明 onShareTimeline 事件監聽函數

官方文檔 onShareTimeline：

落地代碼：

Page({// 監聽右上角 分享到朋友圈 按鈕onShareTimeline () {// 自定義分享內容。return {// 自定義標題，即朋友圈列表頁上顯示的標題title: '幫我砍一刀~~~',// 自定義頁面路徑中攜帶的參數，如 path?a=1&b=2 的 【 “?” 后面部分 】query: 'id=1',// 自定義圖片路徑，可以是本地文件或者網絡圖片imageUrl: '../../assets/Jerry.png'}}})

5. 手機號驗證組件

手機驗證組件，用于幫助開發者向用戶發起手機號申請，必須經過用戶同意后，才能獲得由平臺驗證后的手機號，進而為用戶提供相應服務

1. 手機號快速驗證組件：平臺會對號碼進行驗證，但不保證是實時驗證

   <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
   

2. 手機號實時驗證組件：在每次請求時，平臺均會對用戶選擇的手機號進行實時驗證

   <buttonopen-type="getRealtimePhoneNumber"bindgetrealtimephonenumber="getrealtimephonenumber"
   />
   

📌注意事項：

1.目前該接口針對非個人開發者，且完成了認證的小程序開放（不包含海外主體）

2.兩種驗證組件需要付費使用，每個小程序賬號將有 1000 次體驗額度

其他要求和注意事項，參考文檔：

手機號快速驗證組件

手機號實時驗證組件

落地代碼：

<!--pages/cart/cart.wxml--><buttontype="primary"plainopen-type="getPhoneNumber"bindgetphonenumber="getphonenumber"
>快速驗證組件</button><buttontype="warn"plainopen-type="getRealtimePhoneNumber"bindgetrealtimephonenumber="getrealtimephonenumber"
>實時驗證組件</button>

Page({// 手機號快速驗證getphonenumber (event) {// 通過事件對象，可以看到，在 event.detail 中可以獲取到 code// code 動態令牌，可以使用 code 換取用戶的手機號// 需要將 code 發送給后端，后端在接收到 code 以后// 也需要調用 API，換取用戶的真正手機號// 在換取成功以后 ，會將手機號返回給前端console.log(event)},// 手機號實時驗證getrealtimephonenumber (event) {console.log(event)}})

6. 客服能力

小程序為開發者提供了客服能力，同時為客服人員提供移動端、網頁端客服工作臺便于及時處理消息

使用方式：

1. 需要將 button 組件 open-type 的值設置為 contact，當用戶點擊后就會進入客服會話

   <button type="warn" plain open-type="contact">聯系客服</button>
   

2. 在微信公眾后臺，綁定后的客服賬號，可以登陸 網頁端客服 或 移動端小程序 客服接收、發送客服消息