微信小程序開發問(wèn)答《七十》i八nput标簽中(zhōng)文(wén)字被遮蓋 & 登陸态維護 ... ...

發表時間：2022-9-14

發布人：葵宇科技

浏覽次數：39

1、微信小程序input标簽中(zhōng)文(wén)字被遮蓋的問(wèn)題

wxml代碼

'text' placeholder='請輸入驗證碼' 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;
}

疑惑：明明還有空間的，為什麼文(wén)字會顯示不全

答：不知道是不是bug，微信小程序裡input寬度縮小，input可(kě)輸入文(wén)字的區域會縮小的更多，比如(rú)說你(nǐ)把input寬度設置為90%，則input文(wén)字輸入可(kě)顯示的區域可(kě)能隻有80%左右。目前的解決方法：在input輸入框外面套一層view，通(tōng)過改變view的寬度控制input的長度，這樣不會影響文(wén)字顯示。

遇到這種情況應該要打開你(nǐ)的調試工具，看看input上有沒有還添加了其他樣式，例如(rú)padding。

2、微信小程序登陸态維護問(wèn)題

這是官方給處的方法

假如(rú)用戶登陸了，然後删除了storage也就是緩存的内容

那麼3rd session也沒了

以後請求的話獲取不到這個(gè)3rd session怎麼辦

還是說，隻要删除緩存，那麼小程序會給出登陸失敗的檢測，讓我們重走一遍流程？

答：官方原話1：“對于開發者自己生成的 session，應該保證其安全性且不應該設置較長的過期時間。”

官方原話2：“通(tōng)過 wx.checkSession 可(kě)以檢測用戶登錄态是否失效。并決定是否調用 wx.login 重新獲取登錄态”。
删除緩存後用wx.checkSession檢測登錄狀态（失效），并重新發起登錄流程。

3、微信小程序列表能否實現 sticky header 效果？

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

類似 https://codepen.io/chrissp26/...

鑒于小程序沒有 DOM 相關(guān) API，不知道如(rú)何實現這種效果。

Update: 我看到京東小程序的首頁有類似效果，所以理論上是可(kě)以做到的？另，非回答類的回複請直接在問(wèn)題下(xià)評論，不要開回答。

答：css3新增的一個(gè)position屬性可(kě)以直接實現sticky的效果，在你(nǐ)的header中(zhōng)加上

{
  position: sticky;
  top: 0;
}

就可(kě)以了。

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

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

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

但是我現在想把他公用出去，該怎麼辦？
1.我首先用到的是文(wén)檔中(zhōng)介紹的模塊化，把公用的内容另存一個(gè)js，但是發現require過來的common.js裡的内容是不能直接放到wxml裡用到，比如(rú)

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

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

/*wxs中(zhōng)*/
module.exports = {
    a: "hello life",
    b: function(){
        a = "hello world";        //這裡這麼做也是無法完成修改
    }
}

所以想問(wèn)問(wèn)，這種使用率高，然後自身變量和(hé)函數會相互訪問(wèn)并操作，同時肯定也得保證數據相互之間的綁定。該如(rú)何寫呢(ne)？

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

根據他們的文(wén)檔我們可(kě)以知道，對于要複用的JS可(kě)以采取2種方式進行開發：
方式1：将公共方法定義在App()中(zhōng)，再通(tōng)過全局函數 getApp() 可(kě)以獲取全局的應用實例及其内部方法。
方式2：單獨定義一個(gè)JS文(wén)件，通(tōng)過require的方法引入JS。

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