点击button后改变文字_27. 教你零基础搭建小程序:小程序的常见组件—button
筒子們,這一章接著講Button 標(biāo)簽。
開放能力的屬性
button標(biāo)簽的開放能力是指open-type 屬性。
其中,這個屬性的合法值包括如下:
這一部分呢,需要分為兩個方式來演示。
一是可在模擬器中直接看效果; 二是要通過真機(jī)調(diào)試看效果。
button開發(fā)能力是指open-type 的合法值。我們將其全部屬性寫入demo13.wxml文件中。
contactsharegetPhoneNumbergetUserInfolaunchAppopenSettingfeedback下面一一介紹其屬性。
1、contact
可直接打開客服對話功能,需在微信小程序的后臺進(jìn)行配置。
保存代碼后,點(diǎn)擊左側(cè)contact按鈕,彈出"模擬進(jìn)入客服對話"的窗口。
但是這個功能是無法在模擬器中看效果的,需要進(jìn)行真機(jī)調(diào)試才能進(jìn)行演示。
詳細(xì)了解該屬性用法和特征,請戳下方官方文檔。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
2、share
分享、轉(zhuǎn)發(fā)此小程序。
保存代碼后,頁面出現(xiàn)"share"按鈕,點(diǎn)擊后,可分享給好友小程序。
詳細(xì)了解該屬性用法和特征,請戳官方文檔。
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
用來獲取用戶手機(jī)號碼信息。僅限于企業(yè)用戶,否則無此權(quán)限。使用此屬性,需要綁定一個事件,從bindgetphonenumber回調(diào)中,通過參數(shù)來獲取??信息。
操作步驟如下:
先是在demo13.wxml文件中寫入如下代碼:
Page({// 獲取用戶的手機(jī)號碼信息getPhoneNumber(e){console.log(e);},})復(fù)制getPhoneNumber,回到demo13.js文件中,刪除原先的代碼,只保留page部分。
寫入如下代碼:
Page({// 獲取用戶的手機(jī)號碼信息getPhoneNumber(e){console.log(e);},})保存后,點(diǎn)擊調(diào)試器-console,可以看到detail部分是顯示如下信息
(注意這里登錄要用企業(yè)賬戶,個人賬戶會獲取失敗。)
如上,detail信息是難以理解的,看不懂。因?yàn)樾畔⒁呀?jīng)被加密過了。
如果需要解析手機(jī)號,就需要用戶搭建小程序的后臺服務(wù)器,在后臺服務(wù)器中進(jìn)行解析手機(jī)號。
4、getUserInfo
同getPhoneNumber,都是用來獲取??信息,可以從bindgetuserinfo回調(diào)中獲取到??信息
步驟同getPhoneNumber
先在demo13.wxml文件中寫入如下代碼:
getUserInfo復(fù)制getUserInfo,回到demo13.js文件中,寫入如下代碼:
Page({// 獲取用戶個人信息getUserInfo(e){console.log(e);}})保存后,點(diǎn)擊調(diào)試器-console,可以看到detail部分是顯示如下信息
userinfo部分顯示個人的基本信息,可直接獲取,不加密。
5、launchApp
用來打開APP,可以通過app-parameter屬性設(shè)定向APP傳的參數(shù)
敲黑板:
要在app中的某個鏈接中,才能打開小程序;
在小程序中,通過launchApp重新打開app;
此效果難以重現(xiàn),可以直接參考京東app、小程序進(jìn)行學(xué)習(xí)。
詳細(xì)了解該屬性用法和特征,請戳下方官方文檔。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
6、openSetting
用來打開小程序內(nèi)置的授權(quán)界面。
在授權(quán)界面中,只會出現(xiàn)用戶點(diǎn)擊過的權(quán)限。
點(diǎn)擊開發(fā)者工具菜單欄的"編譯"進(jìn)行刷新,再點(diǎn)擊小程序頁面中的"openSetting"按鈕,
出現(xiàn)如下界面,只顯示通訊地址和用戶信息兩欄。
這兩個是在前面使用getPhoneNumber 和 getUserInfo 兩個屬性中被允許的,所以會出現(xiàn)。
我們點(diǎn)擊菜單欄的清除緩存—— 全部清除。
點(diǎn)擊開發(fā)者工具菜單欄的"編譯"進(jìn)行刷新,再點(diǎn)擊小程序頁面中的"openSetting"按鈕,
出現(xiàn)如下界面,沒有被允許的用戶選項(xiàng)。
7、feedback
用來打開小程序的意見反饋頁面。
此屬性和contact 屬性一樣,都無法在模擬器中演示,均需要使用真機(jī)調(diào)試了演示。
先來看一下contact 屬性的實(shí)現(xiàn)流程
(1)將小程序的appid 修改為自己的id,之前用的是測試號,現(xiàn)在也要改為自己的。
步驟:打開微信公眾號平臺——點(diǎn)擊登錄——點(diǎn)擊開發(fā)按鈕——開發(fā)設(shè)置選項(xiàng)——復(fù)制ID
回到小程序中,點(diǎn)擊詳情——修改按鈕——粘貼新的ID
(2)準(zhǔn)備兩個客服賬號,A是普通用戶的賬號;B是客服的微信賬號。
(3)手動為小程序添加客服微信,也就是微信B
步驟:登錄微信官網(wǎng)——客服——添加——輸入自己的微信號
(4)回到微信開發(fā)者工具中,點(diǎn)擊"預(yù)覽"按鈕——用賬號A掃碼——點(diǎn)擊contact按鈕
手機(jī)截屏顯示如下:
在對話框中輸入信息,客服微信B就會收到消息。
接著,我們再來看一下feedback 屬性,真機(jī)調(diào)試如下:
手機(jī)掃碼后,在微信中打開該小程序,點(diǎn)擊"feedback"按鈕,頁面如下:
ok,button標(biāo)簽的內(nèi)容通過兩章已經(jīng)完全講解完畢了,大家認(rèn)真操練起來吧~
不懂得地方歡迎評論區(qū)留言告訴我哦~~~
搜索并關(guān)注微信公眾號:飛寢旺食
獲取更多小程序運(yùn)營干貨、免費(fèi)的開發(fā)教程、源代碼等!
做小程序我們是認(rèn)真的!
總結(jié)
以上是生活随笔為你收集整理的点击button后改变文字_27. 教你零基础搭建小程序:小程序的常见组件—button的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: php多线程 static变量,priv
- 下一篇: hbase/thrift/go连接失败