WeChat 애플릿 개발 팝업박스 구현 방법

이 글은 주로 WeChat 애플릿의 팝업 상자 개발 구현 방법을 공유합니다. 이 글에서 공유한 코드가 모든 사람에게 도움이 되기를 바랍니다.

<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="showok">消息提示框</button> 
	<button type="primary"bindtap="modalcnt">模态弹窗</button> 
	<button type="primary"bindtap="actioncnt">操作菜单</button> 
</view>

1. 메시지 프롬프트——wx.showToast(OBJECT)

//show.js
//获取应用实例  
var app = getApp()  
Page({
	showok:function() {
		wx.showToast({
		  	title: '成功',
		  	icon: 'success',
		  	duration: 2000
		})
	}
})

2.모달 팝업——wx.showModal(OBJECT)

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

3. 작업 메뉴—— wx. showActionSheet(OBJECT)

//show.js
//获取应用实例  
var app = getApp()  
Page({
	modalcnt:function(){
		wx.showModal({
			title: '提示',
			content: '这是一个模态弹窗',
			success: function(res) {
				if (res.confirm) {
				console.log('用户点击确定')
				} else if (res.cancel) {
				console.log('用户点击取消')
				}
			}
		})
	}
})

<br/>

4. 팝업할 모달을 지정하세요

어떤 모달을 지정할지는 숨겨진 속성을 통해 선택할 수 있습니다.

//show.js
//获取应用实例  
var app = getApp()  
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})

<!--show.wxml-->
<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="modalinput">modal有输入框</button> 
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
    <input type=&#39;text&#39;placeholder="请输入内容" auto-focus/>
</modal>

관련 추천: JQuery로 로그인 팝업 상자 작성 방법

추천 팝업 상자 효과 10가지(모음)
공유 HTML5 구현 팝업 프레임 효과 예시

위 내용은 WeChat 애플릿 개발 팝업박스 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!