微信小程式之支付密碼輸入demo

在小程式中實現支付密碼的輸入，要解決幾個問題：

1、小程式要想喚起鍵盤，必須要借助input控制項。通過input控制項和其屬性focus來喚起和隱藏輸入鍵盤。

2、要讓input控制項不可見。讓游標和輸入的字元都不可見，這裡是把input控制項定位到左邊不可見範圍。

先看實現後的效果圖：

實現demo**：

1、頁面**

<

view 
catchtap
='showinputlayer' 
class
="btn_pay"
>立即支付
view
>
<
view 
wx:if
='}'
>
<
view 
class
='bg_layer'
>
view
>
<
view 
class
='input_main'
>
<
view 
class
='input_title'
>
<
view 
class
='input_back' 
catchtap
='hidepaylayer'
><
text
>
text
>
view
>
<
text
>輸入支付密碼
text
>
view
>
<
view 
class
='input_tip'
><
text
>使用會員卡餘額支付需要驗證身份，驗證通過後才可進行支付。
text
>
view
>
<
view 
class
='input_row' 
catchtap
='getfocus'
>
<
view 
class
='pwd_item' 
wx:for
='}' 
wx:key
='item' 
wx:for-index
='i'
>
<
text 
wx:if
='}'>
text
>
view
>
view
>
<
view 
class
='forget_pwd' 
catchtap
='hidepaylayer'
>忘記密碼
view
>
<
input 
class
='input_control' 
password type
='number' 
focus
='}' 
bindinput
='inputpwd' 
maxlength
='6'
/>
view
>
view
>

2、js**

//

index.js
//獲取應用例項
page(,
onload: 
function
() ,
/** * 顯示支付密碼輸入層
*/showinputlayer: 
function
());
},/*
* * 隱藏支付密碼輸入層
*/hidepaylayer: 
function
(), function
()) });
},/*
* * 獲取焦點
*/getfocus: 
function
());
},/*
* * 輸入密碼監聽
*/inputpwd: 
function
(e));
if (e.detail.value.length >= 6)
}})

3、樣式

.btn_pay

/*支付密碼css start 
*/.bg_layer.input_main.input_title.input_back.input_back text.input_tip
/*密碼掩碼模擬 
*/.input_row.input_row .pwd_item.pwd_item:nth-last-of-type(1) .pwd_item text .forget_pwd
/*文字輸入框位置: 設定到左邊隱藏 
*/.input_control 

微信 之小程式支付

二 小程式支付的互動圖 三 在商戶平台新增授權申請單 四 在小程式後台 m a授權 七 後台引數配置 八 具體 實 package 小程式傳給後台的prepay id,signtype md5 wx.requestpayment fail function res complete function...

小程式微信支付

weixinpay new weixinpay openid,orderid.res2,訂單支付 res3 goods name total price 100,tsd res2 ret weixinpay pay class weixinpay public function pay 統一下單介面...

微信小程式支付

class wxpay protected mch id protected key protected openid protected out trade no protected body protected total fee protected notifyurl protected un...