筒子們,這一章接著講Button 標籤。
開放能力的屬性button標籤的開放能力是指open-type 屬性。
其中,這個屬性的合法值包括如下:
這一部分呢,需要分為兩個方式來演示。
一是可在模擬器中直接看效果; 二是要通過真機除錯看效果。
button開發能力是指open-type 的合法值。我們將其全部屬性寫入demo13.wxml檔案中。
<button open-type="contact">contact</button><button open-type="share">share</button><button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button><button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button><button open-type="launchApp">launchApp</button><button open-type="openSetting">openSetting</button><button open-type="feedback">feedback</button>
下面一一介紹其屬性。
1、contact但是這個功能是無法在模擬器中看效果的,需要進行真機除錯才能進行演示。
詳細了解該屬性用法和特徵,請戳下方官方文件。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
2、share詳細了解該屬性用法和特徵,請戳官方文件。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
3、getPhoneNumber用來獲取使用者手機號碼資訊。僅限於企業使用者,否則無此許可權。使用此屬性,需要繫結一個事件,從bindgetphonenumber回撥中,通過引數來獲取⽤⼾資訊。
操作步驟如下:
先是在demo13.wxml檔案中寫入如下程式碼:
Page({// 獲取使用者的手機號碼資訊getPhoneNumber(e){console.log(e);},})
寫入如下程式碼:
Page({// 獲取使用者的手機號碼資訊getPhoneNumber(e){console.log(e);},})
(注意這裡登入要用企業賬戶,個人賬戶會獲取失敗。)
如上,detail資訊是難以理解的,看不懂。因為資訊已經被加密過了。
如果需要解析手機號,就需要使用者搭建小程式的後臺伺服器,在後臺伺服器中進行解析手機號。
4、getUserInfo同getPhoneNumber,都是用來獲取⽤⼾資訊,可以從bindgetuserinfo回撥中獲取到⽤⼾資訊
步驟同getPhoneNumber
先在demo13.wxml檔案中寫入如下程式碼:
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
複製getUserInfo,回到demo13.js檔案中,寫入如下程式碼:
Page({// 獲取使用者個人資訊getUserInfo(e){console.log(e);}})
userinfo部分顯示個人的基本資訊,可直接獲取,不加密。
5、launchApp用來開啟APP,可以通過app-parameter屬性設定向APP傳的引數
敲黑板:
要在app中的某個連結中,才能開啟小程式;
在小程式中,通過launchApp重新開啟app;
此效果難以重現,可以直接參考京東app、小程式進行學習。
詳細了解該屬性用法和特徵,請戳下方官方文件。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
6、openSetting用來開啟小程式內建的授權介面。
點選開發者工具選單欄的"編譯"進行重新整理,再點選小程式頁面中的"openSetting"按鈕,
出現如下介面,只顯示通訊地址和使用者資訊兩欄。
這兩個是在前面使用getPhoneNumber 和 getUserInfo 兩個屬性中被允許的,所以會出現。
點選開發者工具選單欄的"編譯"進行重新整理,再點選小程式頁面中的"openSetting"按鈕,
出現如下介面,沒有被允許的使用者選項。
7、feedback用來開啟小程式的意見反饋頁面。
此屬性和contact 屬性一樣,都無法在模擬器中演示,均需要使用真機除錯了演示。
先來看一下contact 屬性的實現流程
(1)將小程式的appid 修改為自己的id,之前用的是測試號,現在也要改為自己的。
手機截圖顯示如下:
接著,我們再來看一下feedback 屬性,真機除錯如下:
ok,button標籤的內容通過兩章已經完全講解完畢了,大家認真操練起來吧~
獲取更多小程式運營幹貨、免費的開發教程、原始碼等!
做小程式我們是認真的!