正文

微信小程序文本編輯器

發(fā)布時(shí)間：2023-05-27 11:29:39 稿源：創(chuàng)意嶺閱讀： 126

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于微信小程序文本編輯器的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，有小程序、在線網(wǎng)頁版、PC客戶端和批量生成器

問友Ai官網(wǎng)：https://ai.de1919.com。

本文目錄:

微信小程序顯示打字的叫什么

微信小程序文本編輯器

微信小程序顯示打字的叫什么

微信小程序自帶的API中的頁面交互功能，雖然提示功能非常全面，但是所有的交互API中是沒有可以自己在提示框中輸入文本的功能，那么現(xiàn)在我們來自己做這樣的一個(gè)提示框（可以帶有輸入功能），在提示框輸入完內(nèi)容之后，點(diǎn)擊確定，可以將文本內(nèi)容返回，點(diǎn)擊取消則可以回到之前的狀態(tài)。
（在這里，主頁面的布局可以根據(jù)每個(gè)人的想法來布局，這里展示的css之后展示提示框部分的）
1、首先打開微信開發(fā)者工具，建立一個(gè)代碼模板，那么我們這個(gè)提示框就是寫在這個(gè)頁面上。
這里我們主頁面叫做index
2、在基本頁面中寫上一個(gè)姓名的文本，當(dāng)前姓名用<text>{{stuName}}</text>表示，然后為一個(gè)button按鈕，再在js文件中，建立相應(yīng)的點(diǎn)擊事件以及stuName的信息。這樣，一個(gè)原始頁面就寫好了。
下面我們開始彈出框頁面的制作
<view class='toast-box' hidden='{{!ifName}}'>
<view class='toastbg'></view>
<view class='showToast'>
<view class='toast-title'>
<text>修改姓名</text>
</view>
<view class='toast-main'>
<view class='toast-input'>
<input placeholder='請輸入姓名' bindinput='setValue' data-name='stuEidtName'></input>
</view>
</view>
<view class='toast-button'>
<view class='button1'>
<button catchtap='cancel'>取消</button>
</view>
<view class='button2'>
<button catchtap='confirm'>確定</button>
</view>
</view>
</view>
</view>
3、我們可以發(fā)現(xiàn)，點(diǎn)擊按鈕后彈出輸入框，如果點(diǎn)擊除取消和確定之外的地方，是不會有反應(yīng)的。為了做到這個(gè)功能，我們用一個(gè)絕對位置的渲染層（toastbg），覆蓋住整個(gè)頁面，并且如果你的頁面長度沒有滾動的話，請輸入min—height：100vh，如果頁面發(fā)生滾動，請把長度控制在height：100%即可看到整個(gè)頁面都被覆蓋。并且這個(gè)覆蓋的頁面要表現(xiàn)為透明，opacity：0.2，即可
4、bindinput為寫文本時(shí)所觸發(fā)的事件，data-name為文本數(shù)據(jù)所保存的地方，在js中我們可以把這個(gè)數(shù)據(jù)打印出來，會發(fā)現(xiàn)我們所輸入的文本信息。
以下為css的代碼
.toast-box {
width: 100%;
height: 100%;
opacity: 1;
position: fixed;
top: 0px;
left: 0px;
}

.toastbg {
opacity: 0.2;
background-color: black;
position: absolute;
width: 100%;
min-height: 100vh;
}

.showToast {
position: absolute;
opacity: 1;
width: 70%;
margin-left: 15%;
margin-top: 40%;
}

.toast-title {
padding-left: 5%;
background-color: #2196f3;
color: white;
padding-top: 2vh;
padding-bottom: 2vh;
border-top-right-radius: 16rpx;
border-top-left-radius: 16rpx;
}

.toast-main {
padding-top: 2vh;
padding-bottom: 2vh;
background-color: white;
text-align: center;
}

.toast-input {
margin-left: 5%;
margin-right: 5%;
border: 1px solid #ddd;
padding-left: 2vh;
padding-right: 2vh;
padding-top: 1vh;
padding-bottom: 1vh;
}

.toast-button {
display: flex;
}

.button1 {
width: 50%;
}

.button2 {
width: 50%;
}

.button1 button {
width: 100%;
background-color: white;
color: red;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
}

.button2 button{
width: 100%;
background-color: white;
color: black;
border-radius: 0px;
border-bottom-right-radius: 16rpx;
}

.picker {
padding-top: 1vh;
padding-bottom: 1vh;
}
我們可以根據(jù)自己的喜歡，對提示框的樣式進(jìn)行改變
5、編寫js代碼，我們需要實(shí)現(xiàn)以下一些基本功能（點(diǎn)擊出現(xiàn)彈窗，取消不改變數(shù)據(jù)值，確定進(jìn)行判斷數(shù)據(jù)值，若為空則不能改變，否則可以改變，并且主頁面上的內(nèi)容要變?yōu)橄鄳?yīng)改變后的內(nèi)容）
6、給最外層的彈窗附上hidden（如圖所示），為這個(gè)值初始為false，點(diǎn)擊按鈕后觸發(fā)事件，改false為true，這樣即可點(diǎn)擊出現(xiàn)彈窗。
7、為取消按鈕附上點(diǎn)擊事件，與hidden的部分剛好相反即可。
8、為書寫文本綁定事件，上述代碼中命名為setValue，這個(gè)函數(shù)我們傳入一個(gè)event進(jìn)去，將其打印，我們可以發(fā)現(xiàn)在其的detail中有我們剛剛所書寫的內(nèi)容，我們將這個(gè)值，傳給js中data一個(gè)屬性，這里我們命名為edit。
9、為確定綁定事件，用this.data.edit將這個(gè)值進(jìn)行判斷，若為空，我們用wx.showToast提示用戶信息沒有填寫完整，并且頁面不會改變。若不為空，則我們setData一下我們的stuName為這個(gè)edit的值，并且重新把hidden的屬性值改為false。
10、返回到初始頁面我們就可以看到我們自己做得一個(gè)提示框，并且具有修改值的功能

微信小程序文本編輯器