WeChat에서 개발한 입력 제어의 예에 대한 자세한 설명-위챗 개발-php.cn

이 글에서는 주로 WeChat 애플릿 입력 상자 제어 에 대한 자세한 설명과 예제(다양한 예제)를 소개합니다. 입력 상자는 프로그램에서 가장 일반적으로 사용되는 로그인, 등록, 가져오기입니다. 🎜> 상자 등에서 콘텐츠를 검색하세요. 필요한 친구는

위챗 애플릿 입력 상자 제어

를 참고하세요. 오늘의 주요 내용은 WeChat 애플릿의 입력 입력 상자 컨트롤을 살펴보겠습니다. 입력 상자는 프로그램에서 가장 일반적이며, 로그인, 등록, 검색 상자에서 콘텐츠 가져오기 등에 필요합니다. , 또한 다양한 스타일의 입력 상자를 설정해야 합니다. 오늘의 코드는 그에 따라 사용해야 합니다. 먼저 로그인 스타일을 메인페이지에 간단하게 표시하고 사용합니다.

코드는 다음과 같습니다.

用户名： 密 码： 登录 清除 {{infoMess}} {{userName}} {{passWd}} 各类型输入框展示 로그인 후 복사

//index.js

//获取应用实例 var app = getApp() Page({ data: { infoMess: '', userName: '', userN:'', passWd: '', passW:'' }, //用户名和密码输入框事件 userNameInput:function(e){ this.setData({ userN:e.detail.value }) }, passWdInput:function(e){ this.setData({ passW:e.detail.value }) }, //登录按钮点击事件，调用参数要用：this.data.参数； //设置参数值，要使用this.setData({}）方法 loginBtnClick:function(){ if(this.data.userN.length == 0 || this.data.passW.length == 0){ this.setData({ infoMess:'温馨提示：用户名和密码不能为空！', }) }else{ this.setData({ infoMess:'', userName:'用户名：'+this.data.userN, passWd:'密码：'+this.data.passW }) } }, //重置按钮点击事件 resetBtnClick:function(e){ this.setData({ infoMess: '', userName: '', userN:'', passWd: '', passW:'', }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } }) 로그인 후 복사

가 두 번째에 표시됩니다. 인터페이스 입력의 다양한 스타일과 기능

TextInput输入框展示 使得输入框获取焦点 你输入的是：{{inputValue}} 로그인 후 복사

// pages/index/Component/TextInput/TextInput.js Page({ data: { focus: false, inputValue: '' }, bindButtonTap: function() { this.setData({ focus: true }) }, bindKeyInput: function(e) { this.setData({ inputValue: e.detail.value }) }, bindReplaceInput: function(e) { var value = e.detail.value var pos = e.detail.cursor if(pos != -1){ // 光标在中间 var left = e.detail.value.slice(0,pos) // 计算光标的位置 pos = left.replace(/11/g,'2').length } // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置 return { value: value.replace(/11/g,'2'), cursor: pos } // 或者直接返回字符串,光标在最后边 // return value.replace(/11/g,'2'), }, bindHideKeyboard: function(e) { if (e.detail.value === "123") { //收起键盘 wx.hideKeyboard() } }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) 로그인 후 복사

렌더링:

[관련 추천]

1. 위챗 공개계정 플랫폼 소스코드 다운로드

위챗 라라 테이크아웃 2.2 . 4 WeChat Rubik's Cube 소스 코드의 오픈 소스 버전을 해독합니다

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

WeChat에서 개발한 입력 제어의 예에 대한 자세한 설명