微信小程序開(kāi)發(fā)問(wèn)答《七十》i八nput標(biāo)簽中文字被遮蓋 & 登陸態(tài)維護(hù) ... ...

發(fā)表時(shí)間：2022-9-14

發(fā)布人：葵宇科技

瀏覽次數(shù)：68

1、微信小程序input標(biāo)簽中文字被遮蓋的問(wèn)題

wxml代碼

'text' placeholder='請(qǐng)輸入驗(yàn)證碼' class='test'>input>

wxss代碼

.test{
  margin-top:100rpx;
  width:50%;
}
input {
  display:block;
  height:1.4rem;
  text-overflow:clip;
  overflow:hidden;
  white-space:nowrap;
  font-family:UICTFontTextStyleBody;
  min-height:1.4rem;
}

疑惑：明明還有空間的，為什么文字會(huì)顯示不全

答：不知道是不是bug，微信小程序里input寬度縮小，input可輸入文字的區(qū)域會(huì)縮小的更多，比如說(shuō)你把input寬度設(shè)置為90%，則input文字輸入可顯示的區(qū)域可能只有80%左右。目前的解決方法：在input輸入框外面套一層view，通過(guò)改變view的寬度控制input的長(zhǎng)度，這樣不會(huì)影響文字顯示。

遇到這種情況應(yīng)該要打開(kāi)你的調(diào)試工具，看看input上有沒(méi)有還添加了其他樣式，例如padding。

2、微信小程序登陸態(tài)維護(hù)問(wèn)題

這是官方給處的方法

假如用戶(hù)登陸了，然后刪除了storage也就是緩存的內(nèi)容

那么3rd session也沒(méi)了

以后請(qǐng)求的話(huà) 獲取不到這個(gè)3rd session怎么辦

還是說(shuō)，只要?jiǎng)h除緩存，那么小程序會(huì)給出登陸失敗的檢測(cè)，讓我們重走一遍流程？

答：官方原話(huà)1：“對(duì)于開(kāi)發(fā)者自己生成的 session，應(yīng)該保證其安全性且不應(yīng)該設(shè)置較長(zhǎng)的過(guò)期時(shí)間?！?/p>官方原話(huà)2：“通過(guò) wx.checkSession 可以檢測(cè)用戶(hù)登錄態(tài)是否失效。并決定是否調(diào)用 wx.login 重新獲取登錄態(tài)”。
刪除緩存后用wx.checkSession檢測(cè)登錄狀態(tài)（失效），并重新發(fā)起登錄流程。

3、微信小程序列表能否實(shí)現(xiàn) sticky header 效果？

就像 iOS 的列表一樣，上滑的時(shí)候每個(gè) section 的 header 固定，直到滾動(dòng)到下一個(gè) section 的時(shí)候下一個(gè) header 把上一個(gè) header「頂走」。

類(lèi)似 https://codepen.io/chrissp26/...

鑒于小程序沒(méi)有 DOM 相關(guān) API，不知道如何實(shí)現(xiàn)這種效果。

Update: 我看到京東小程序的首頁(yè)有類(lèi)似效果，所以理論上是可以做到的？另，非回答類(lèi)的回復(fù)請(qǐng)直接在問(wèn)題下評(píng)論，不要開(kāi)回答。

答：css3新增的一個(gè)position屬性可以直接實(shí)現(xiàn)sticky的效果，在你的header中加上

{
  position: sticky;
  top: 0;
}

就可以了。

4、關(guān)于微信小程序的問(wèn)題

我有一個(gè)是使用率很高的方法，比如

Page({
    data:{
        a: "hello life",
        b: function(){
            this.setData({
                a: "hello world"
            });
        }
    }
});

但是我現(xiàn)在想把他公用出去，該怎么辦？
1.我首先用到的是文檔中介紹的模塊化，把公用的內(nèi)容另存一個(gè)js，但是發(fā)現(xiàn)require過(guò)來(lái)的common.js里的內(nèi)容是不能直接放到wxml里用到，比如

var common = require("common.js");
/*在wxml中*/
<view>{{common.a}}view>    //這樣是無(wú)效的，必須在Page里再定義一變量，并賦值給這個(gè)變量才行，但是這么做就顯得沒(méi)啥公用可言了。

2.其次，我發(fā)現(xiàn)還有個(gè)單獨(dú)定義成wxs文件，但是發(fā)現(xiàn)想修改自己的變量是修改不了的。例如

/*wxs中*/
module.exports = {
    a: "hello life",
    b: function(){
        a = "hello world";        //這里這么做也是無(wú)法完成修改
    }
}

所以想問(wèn)問(wèn)，這種使用率高，然后自身變量和函數(shù)會(huì)相互訪(fǎng)問(wèn)并操作，同時(shí)肯定也得保證數(shù)據(jù)相互之間的綁定。該如何寫(xiě)呢？

答：你這個(gè)問(wèn)題叫模塊化開(kāi)發(fā)，具體在小程序中可以參考官方文檔:https://mp.weixin.qq.com/debu...

根據(jù)他們的文檔我們可以知道，對(duì)于要復(fù)用的JS可以采取2種方式進(jìn)行開(kāi)發(fā)：
方式1：將公共方法定義在A(yíng)pp()中，再通過(guò)全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例及其內(nèi)部方法。
方式2：?jiǎn)为?dú)定義一個(gè)JS文件，通過(guò)require的方法引入JS。

以上總體介紹了小程序的模塊化開(kāi)發(fā)，接下來(lái)針對(duì)你的問(wèn)題回答：
1、你定義的common.js文件不能在wxml文件中引入，應(yīng)該在wxml文件對(duì)應(yīng)的js文件中引入common.js。建議不要在wxml中直接操作JS，而應(yīng)該通過(guò)對(duì)應(yīng)的JS中的data改變頁(yè)面的狀態(tài),wxml只負(fù)責(zé)頁(yè)面的呈現(xiàn)。補(bǔ)充:js的引入用require,而wxml中引入其他wxml要用import。
2、wxs（WeiXin Script）文件是小程序最近才引進(jìn)的一套機(jī)制，它允許wxml和wxs混在一個(gè)頁(yè)面中開(kāi)發(fā)，估計(jì)是跟隨現(xiàn)在組件化開(kāi)發(fā)的大潮流吧。wxs 與 javascript 是不同的語(yǔ)言，有自己的語(yǔ)法，并不和 javascript 一致。建議你先不要用wxs這東西，它是騰訊自己的一套類(lèi)似JS的語(yǔ)法。