WeChat Mini 프로그램 0.11.122100 버전 업데이트 세부정보 소개-미니 프로그램 개발-php.cn

집

위챗 애플릿

미니 프로그램 개발

WeChat Mini 프로그램 0.11.122100 버전 업데이트 세부정보 소개

高洛峰

Mar 08, 2017 pm 05:11 PM

위챗 애플릿

0.11.122100 업데이트 개요

신규 API 4개 추가, 신규 구성요소 2개
확장 구성요소 10개 추가 속성, 6개 구성 요소 이벤트 추가
수십 개의 API 및 구성 요소 버그 수정, 일부 대화형 경험 최적화
개발 개발자 도구에 새로운 기능에 대한 디버깅 지원 추가 API 및 구성 요소
개발자 도구에 WeChat 결제에 대한 디버깅 지원 추가

자세한 업데이트 로그는 다음과 같습니다.

기본 라이브러리 업데이트

새로운 API wx.switchTab 세부 정보
새로운 API wx .scanCode
새 API wx.createMapContext
새 API wx.createCanvasContext
새 API wx.showToast 호출 매개변수 마스크
맞춤형 공유 콘텐츠를 위한 새로운 페이지 메소드 Page.onShareAppMessage
새로운 프레임워크 메소드 App.onError
새 페이지 구성 disabelScroll
새 구성요소
추가됨 < contact-button/> 고객 서비스 세션 버튼을 표시하는 데 사용되는 구성 요소
구성 요소 속성 openType
A 추가된 구성요소 속성 색상
추가된
>
추가된 구성요소 속성 마커 폴리라인 원 포함-위치 제어 표시
추가된 제어 연결 슬라이딩
A 구성 요소 속성에 커서 간격 추가
A 커서 간격<p></p> </li> <li>A 추가된 <picker/> 구성 요소 속성 비활성화<p></p> </li> <li>A 추가된 <view/> class<p></p> </li> <li>A 추가됨 <scroll-view/> 구성 요소 속성 스크롤-x, 스크롤-y는 <p></p> </li> <li>A의 동적 수정을 지원합니다. <map/> 구성요소 이벤트 바인딩tap 바인딩마커탭 바인드컨트롤스탭 바인딩지역변경<p></p> </li> <li>A 추가됨 <input/> 구성요소 이벤트 바인딩확인<p></p> </li> <li>A 추가됨 < ;video/> 컴포넌트 이벤트 바인딩타임업데이트<p></p> </li> <li>추가된<textarea/> 컴포넌트 이벤트 바인딩확인<p></p> </li>추가된<textarea/> 이벤트 바인딩input<li><p></p></li>A 추가된 <canvas/> 구성 요소 이벤트 바인딩longtap<li><p></p></li>A 추가된 AudioContext.setSrc() 컨텍스트 API<li><p></p></li>추가된 CanvasContext 컨텍스트<li><p></p></li>추가된 CanvasContext.arc() 컨텍스트 API<li><p></p></li>A 추가된 CanvasContext.fillRect () 컨텍스트 API<li><p></p></li>새로운 CanvasContext.스트로크Rect() 컨텍스트 API<li><p></p></li>새로운 CanvasContext.createLinearGradient() 컨텍스트 API<li><p></p></li>새로 추가된 CanvasContext.createCircularGradient() 컨텍스트 API<li><p></p></li>스크롤 시 페이지 스크롤을 금지하는 <scroll-view/> 구성 요소 추가<li><p></p></li>U 업데이트 API wx.getSystemInfo 새로운 플랫폼 반환 매개변수<li><p></p></li>U 업데이트 API wx.downloadFile HTTP 상태 코드가 200 또는 304인 경우 tmpFilePath를 반환합니다<li><p></p></li>U 업데이트 API wx.showModal 호출 매개변수 verifyText cancelText 문자 제한 <li><p></p></li>U 개체 및 배열을 지원하도록 WXML 데이터 세트 반환 업데이트<li><p></p></li>U 업데이트<image/> 구성 요소 속성 모드 선택적 widthFix<li><p></p></li>U 업데이트<picker/> 구성 요소 속성 범위 ObjectArray 유형 지원 추가<li><p></p></li>U 업데이트<switch/> <radio/> 기본 스타일<li> <p></p>U 업데이트 CanvasContext.save( ) CanvasContext.restore() 컨텍스트 API 브러시 스타일 저장</li> <li> <p></p>U CanvasContext.arc() 업데이트 컨텍스트 API 매개변수 조정, eAngle 추가, 시계 반대 방향,weepAngle 제거</li> <li> <p></p>U <swiper/> 슬라이딩 경험 </li> <li> <p></p>U <swiper/> <scroll-view/> 대화형 경험 ; </li> <li> <p></p>U 최적화 <navigator/> <button/> 구성요소 클릭 경험</li> <li> <p></p>F Android에서 wx.request 메소드 수정 대문자만 사용할 수 있는 값 문제</li> <li> <p></p>F wx.uploadFile이 iOS에서 헤더를 설정할 수 없는 문제 수정</li> <li> <p></p>F wx.getLocation 유형 수정 =gcj02 on iOS </li> <li> <p></p>F 애플릿을 종료한 후에도 wx.showToast가 계속 표시되는 문제 수정 </li> <li> <p></p>F wx.showModal 반환 수정 Android와 iOS 간 매개변수 불일치 </li> <li> <p></p>F wx.showModal 콘텐츠가 너무 길거나 제목이 비어 있을 때 레이아웃이 흐트러지는 문제 수정 </li> <li> <p></p> F wx.showModal cancelText,confirmText가 비어있는 경우 기본값이 표시되지 않는 문제 수정</li> <li> <p></p>F wx.showModal 실행 중 키보드가 팝업되어 키보드를 입력할 수 없는 문제 수정 철회됨</li> <li> <p></p>F wx.getImageInfo가 Android에서 http 링크 이미지를 얻을 수 없는 문제 수정</li> <li><p>F 탭바 표시로 인해 wx.getSystemInfo에서 얻은 화면 높이가 일관되지 않는 문제 수정 </p></li> <li><p>F 다운로드 후 wx.downloadFile 이미지가 표시되지 않는 문제 수정 Android 문제</p></li> <li><p>F wx.request가 요청 데이터를 올바르게 인코딩하지 않는 문제 수정</p></li> <li><p>F wx.login App.onLaunch in 수정 iOS 콜백 문제 없음</p></li> <li><p>F wx.createAnimationContext 설정 변환 변형 문제 수정 및 애니메이션이 다음 단계로 진행할 수 없음</p></li> <li><p>F wx.navigateTo wx 수정 .redirectTo iOS에서 Page.onLoad를 호출할 수 없는 문제 </p></li> <li><p>F catch 차단 이벤트의 기본 동작이 유효하지 않은 문제 수정</p></li> <li><p>F iOS에서 SetInterval 매개변수 전달 오류로 인해 페이지가 정지되는 현상이 수정되었습니다. </p></li> <li><p>F onReachBottom이 여러 번 트리거되는 문제가 수정되었습니다. </p></li> <li><p> F <swiper/ > 텍스트 노드 하위 항목이 있을 때 발생하는 오류 문제 수정</p></li> <li>F <switch/> <checkbox/> /> < video/> 숨겨진 속성이 적용되지 않습니다 <p></p> </li> <li>F <radio/> 🎜><p></p> </li>F <scroll-view/> 스플래시 화면 상단 또는 하단으로 슬라이딩되는 문제 수정 <li><p></p></li>F 문제 수정 <video/> 이벤트가 iOS에 적용되지 않음 <li><p></p></li>F iOS에서 <video/> 사운드가 제거된 후에도 계속 존재하는 문제 수정 <li><p></p></li>F <text></text> 수정 <li><p></p></li>F 삽입 시 클래스 및 스타일이 동적으로 업데이트되지 않는 문제 수정 <button/> 비활성화됨 <li><p></p></li>F <input/> 포커스 속성이 유효하지 않은 문제 수정 <li><p></p></li>F 수정됨 < input/> iOS9에서 display:flex 사용시 첫 번째 입력이 표시되지 않는 문제 <li><p></p></li>F 초기값이 정의되지 않은 경우 <input/> 비정상적으로 표시되는 현상 수정 <li><p></p></li>F Fix <input/> 자리 표시자 잔상 문제<li><p></p></li>F Fix <input/> after focus<li><p></p></li> F <textarea/> position:fixed의 비정상적인 위치 문제 수정<li><p></p></li>F < textarea/> 선택기를 연 후 흐림 이벤트가 실행되지 않음<li><p></p></li>F <textarea/><li><p>에서 자동 높이 설정 시 높이 변경 문제 수정 </p></li>F <textarea/>에서 파손 예외 문제 수정<li><p></p></li>F <video/>에서 전체 화면 버튼이 필요한 문제를 수정했습니다. Android에서 두 번 클릭하면 적용됩니다 <li><p></p></li>F <audio/>에서 문제 수정 여러 페이지에서 동일한 ID를 사용하는 경우 충돌하는 문제 <li><p></p></li>F <canvas/> drawImage가 정상적으로 표시되지 않는 문제를 수정했습니다. <li><p></p></li>F 고정된 <image/> 무한 루프 문제<li><p></p></li>F <scroll-view/> 스크롤 보기 실패 문제 수정<li> <p></p> </li>F 문제 수정 <form/> 제출이 입력 콘텐츠를 가져올 수 없습니다 <li><p></p></li>D <navigator/> 리디렉션 속성이 곧 제거됩니다 <li><p></p></li>D wx.createContext 인터페이스는 곧 제거될 예정입니다 <li><p></p></li>D <input/> 자동 초점 속성은 곧 제거될 예정입니다. 포커스 속성을 직접 사용하세요 <li><p> </p></li>D는 곧 삭제됩니다<map /> 속성을 덮습니다<li><p><br></p></li> </ul> 개발자 도구의 기본 기능 <br><br><br> <br><ul class="litype_1 list-paddingleft-2">A wx.switchTab에 대한 디버깅 지원 추가 <li><p></p></li>A wx.startRecord wx.stopRecord wx.playVoice wx.pauseVoice wx.stopVoice API 디버깅 지원 추가<li><p></p></li>A WeChat 결제 디버깅 지원 추가<li><p></p></li>A QR 코드 스캔 디버깅 지원 추가<li><p></p></li>A 새 메시지 추가 제출 미리보기 오류로 이어지는 페이지 파일을 반복적으로 정의하는 app.json에 대해<li><p></p></li>A 시뮬레이터에서 이미지를 로드할 때 네트워크 오류에 대한 새 메시지를 추가했습니다<li> <p></p> </li>A 컴파일 시 초기화 페이지 및 파라미터 설정 기능 추가<li><p></p></li>A 미리보기 제출 시 초기화 페이지 및 파라미터 설정 기능 추가<li><p></p></li>F 별도의 페이지에서 데이터를 볼 수 있도록 appdata 패널을 최적화하고, 동적 업데이트 및 코드 모드 표시를 지원합니다.<li><p></p></li>F 재생 중인 음악이 없을 때 wx.getBackgroundAudioPlayerState를 수정합니다. 반환 문제 없음 <li><p></p></li>F wx.getBackgroundAudioPlayerState 상태가 잘못된 문제 수정<li><p></p></li>F 경우에 따라 wxml 패널 흰색 화면 수정 문제<li><p></p></li>F wxml 패널 속성을 복사할 수 없고 복사본에 캐리지 리턴이 있는 문제 수정 <li><p></p></li>F wxml 패널 단일 텍스트 노드가 표시되지 않는 문제 수정 정렬 문제<li><p></p></li>F app.json의 탭바 위치를 상단으로 설정한 경우 시뮬레이터에서 오류가 표시되는 문제 수정<li><p></p></li>F devtools 수정 및 에디터에서 외부 링크를 잘못 클릭하는 문제 <li><p></p></li>F wx.requst가 캐시로 인해 요청을 보낼 수 없는 문제 수정<li><p></p></li> </ul>다음은 업데이트 세부정보입니다. <br><br><br>wx.switchTab(OBJECT)<br><br>tabBar 페이지로 이동하고 tabBar가 아닌 다른 모든 페이지를 닫습니다<br> OBJECT 매개변수 설명: <br>[tr] 매개변수 유형의 필수 설명[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>url</td> <td>String</td> <td>是</td> <td>需要跳转的 tabBar 页面的路径（需在 app.json 的字段定义的页面），路径后不能带参数</td> </tr> <tr> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>샘플 코드: <br>{ "tabBar": { "list": [{ "pagePath": "index", "text" ": "홈" },{ "pagePath": "other", "text": "other" }] }}wx.switchTab({ url: '/index'})<br><br><br><br> <br>wx.scanCode(OBJECT)<br><br>클라이언트 코드 스캔 인터페이스를 시작하고 스캔 성공 후 해당 결과를 반환합니다. <br>객체 매개변수 설명: <br>[tr] 매개변수 유형 필수 설명[ /tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数，返回内容详见返回参数说明。</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>성공 반환 매개변수 설명: <br>[tr]매개변수 설명[/tr]<table class="t_table"><tbody><tr class="firstRow"> <td>result</td> <td>码的内容</td> </tr></tbody></table>샘플 코드: <br>wx.scanCode({ 성공: (res) => { console.log( res) }})<br><br><br><br><br>onShareAppMessage<br><br>페이지의 공유 정보를 설정하려면 페이지에 onShareAppMessage 함수를 정의하세요. <br><ul class=" list-paddingleft-2"> <li><p>이 이벤트 핸들러가 정의된 경우에만 오른쪽 상단 메뉴에 "공유" 버튼이 표시됩니다. </p></li> <li><p>이라고 합니다. 사용자가 공유 버튼을 클릭할 때 </p></li> <li><p>이 이벤트는 사용자 정의 공유 콘텐츠를 위한 개체를 반환해야 합니다 <br></p></li> </ul>사용자 정의 공유 필드<br>[tr ] 필드 설명 기본값[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>分享标题</td> <td>当前小程序名称</td> </tr> <tr> <td>desc</td> <td>分享描述</td> <td>当前小程序名称</td> </tr> <tr> <td>path</td> <td>分享路径</td> <td>当前页面 path ，必须是以 / 开头的完整路径</td> </tr> </tbody></table>샘플 코드:<br>Page({ onShareAppMessage: function () { return { title: '사용자 정의 공유 제목', desc: '사용자 정의 공유 설명', path: '/page / user?id=123' } }})<br><br><br><br><br>wx.showToast(OBJECT)<br><br>메시지 프롬프트 상자 표시<br>OBJECT 매개변수 설명: <br>[tr]매개변수 유형 필수 설명[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>String</td> <td>是</td> <td>提示的内容</td> </tr> <tr> <td>icon</td> <td>String</td> <td>否</td> <td>图标，只支持"success"、"loading"</td> </tr> <tr> <td>duration</td> <td>Number</td> <td>否</td> <td>提示的延迟时间，单位毫秒，默认：1500, 最大为10000</td> </tr> <tr> <td>mask</td> <td>Boolean</td> <td>否</td> <td>是否显示透明蒙层，防止触摸穿透，默认：false</td> </tr> <tr> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>샘플 코드: <br>wx.showToast({ title: 'Success', icon: 'success', 기간: 2000})<br><br> <br>onShareAppMessage<br><br>페이지의 공유 정보를 설정하려면 페이지에 onShareAppMessage 함수를 정의하세요. <br><ul class=" list-paddingleft-2"> <li><p>이 이벤트 핸들러가 정의된 경우에만 오른쪽 상단 메뉴에 "공유" 버튼이 표시됩니다. </p></li> <li><p>이라고 합니다. 사용자가 공유 버튼을 클릭할 때 </p></li> <li><p>이 이벤트는 사용자 정의 공유 콘텐츠를 위한 개체를 반환해야 합니다 <br></p></li> </ul>사용자 정의 공유 필드<br>[tr ] 필드 설명 기본값[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>分享标题</td> <td>当前小程序名称</td> </tr> <tr> <td>desc</td> <td>分享描述</td> <td>当前小程序名称</td> </tr> <tr> <td>path</td> <td>分享路径</td> <td>当前页面 path ，必须是以 / 开头的完整路径</td> </tr> </tbody></table>샘플 코드: <br>Page({ onShareAppMessage: function () { return { title: '사용자 정의된 공유 제목', desc: '사용자 정의된 공유 설명', path: '/page/user?id=123' } }} )<br><br><br><br><br>wx.createCanvasContext(canvasId)<br><br>정의<br><br>캔버스 그리기 컨텍스트 만들기(canvasId 지정)<br>팁: canvasId를 지정해야 합니다. , 이 그리기 컨텍스트는 해당 <canvas/><br><br><br><br>매개변수<br><br>[tr]매개변수 유형 설명[/tr]<table class="t_table"><tbody><tr class="firstRow"> <td>canvasId</td> <td>String</td> <td>画布表示，传入定义在 <canvas/> 的 canvas-id</td> </tr></tbody></table> <br>에서만 작동합니다. <br><br>새 구성 요소: <br><br><br>audioContext<br><br>audioContext는 audioId를 통해 <audio/> 요소. <br>audioContext 객체의 메소드 목록: <br>[tr]메소드 매개변수 설명[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>setSrc</td> <td>src</td> <td>音频的地址</td> </tr> <tr> <td>play</td> <td>无</td> <td>播放</td> </tr> <tr> <td>pause</td> <td>无</td> <td>暂停</td> </tr> <tr> <td>seek</td> <td>position</td> <td>跳转到指定位置，单位 s</td> </tr> </tbody></table>샘플 코드: <br><audio src="{ {src}}" id="myAudio" ></audio><button type="primary" bintap="audioPlay">play</button><button type="primary" bintap="audioPause " >일시 중지</button><button type="primary" bintap="audio14">현재 재생 시간을 14초로 설정</button><button type="primary" bintap="audioStart"> ;뒤로 처음으로</button>// audio.jsPage({ onReady: function (e) { // wx.createAudioContext를 사용하여 오디오 컨텍스트 컨텍스트를 가져옵니다. this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc ('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D31 3AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46') this.audioCtx.play() }, 데이터: { src: '' }, audioPlay: 함수() { this.audioCtx.play() }, audioPause: 함수() { this.audioCtx.pause() }, audio14: 함수() { this.audioCtx.seek(14) }, audioStart: 함수( ) { this.audioCtx.seek(0) }})<br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/189/517/243/1488964166491492.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br>picker-view<br><br>내장 페이지 스크롤 선택기<br>[tr] 속성 이름 유형 기본값 설명[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>값</td> <td>숫자 배열</td> <td> <table class="t_table"><tbody> <tr class="firstRow"> <td>value</td> <td>Number Array</td> <td><br></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td> </tr> <tr> <td>indicator-style</td> <td>String</td> <td><br></td> <td>设置选择器中间选中框的样式</td> </tr> <tr> <td>bindchange</td> <td>EventHandle</td> <td><br></td> <td>当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td> </tr> </tbody></table> </td> <td>배열의 숫자는 picker-view에서 picker-view-column의 선택된 항목을 순차적으로 나타냅니다. (아래 첨자는 0부터 시작합니다. 숫자가 picker-view-의 길이보다 큰 경우) 열 옵션에서는 마지막 항목이 하나 선택됩니다. </td> </tr> <tr> <td>indicator-style</td> <td>String</td> <td></td> <td>선택한 상자의 스타일을 설정합니다 선택기 중앙 </td> </tr> <tr> <td>bindchange</td> <td>EventHandle</td> <td></td> <td>변경 이벤트가 트리거됩니다. 스크롤 시 값이 변경되는 경우, event.detail = {value: value}; value는 현재 선택되어 있는 picker-view-column 항목을 나타내는 배열입니다(아래 첨자는 0부터 시작).</td> </tr> </tbody></table>참고: <picker-view-column/> 구성요소만 배치할 수 있으며 다른 노드는 표시되지 않습니다. <br><br><br>picker-view-column<br><br>은 <picker-view />에만 배치할 수 있으며 하위 노드의 높이는 자동으로 선택기 보기의 확인란 매우 일관성<br>샘플 코드:<br><view>{{연도}}년{{월}}월{{일}}일</view> -view 표시기- style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> ;wx 보기: for="{{년}}" style="line-height: 50px">{{item}}년</view> </picker-view-column> ; < wx:for="{{months}}" style="line-height: 50px">{{item}}월</view> <picker-view -column> <wx:for="{{days}}" style="line-height: 50px">{{item}}day</view> </ picker -view></view>const date = new Date()const year = []const Month = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) { year.push(i)}for (let i = 1 ; i <= 12; i++) { Month.push(i)}for (let i = 1 ; i <= 31; i++) { days.push ( i)}페이지({ 데이터: { 년: 년, 연도: date.getFullYear(), 월: 월, 월: 2, 일: 일, 일: 2, 연도: date.getFullYear(), 값: [9999 , 1, 1], }, 바인딩변경: function(e) { const val = e.detail.value this.setData({ year: this.data.years[val[0]], Month: this.data.months[ val [1]], day: this.data.days[val[1]] }) }})<br/>캔버스 향상<br/><ul class="litype_1 list-paddingleft-2"><li><p>추가된 CanvasContext 컨텍스트</p></li><li><p>CanvasContext.arc() 컨텍스트 API 추가</p></li><li><p>CanvasContext.fillRect() 컨텍스트 API 추가</p></li><li><p>A CanvasContext.스트로크Rect() 컨텍스트 API 추가</p></li><li><p>A CanvasContext.createLinearGradient() 컨텍스트 API 추가</p></li><li><p>CanvasContext.createCircularGradient() 컨텍스트 API 추가 <br/></p></li></ul><br/><br/>createCircularGradient<br/><br/>정의<br/><br/>원형 그라데이션 색상을 만듭니다. <br/>팁: 시작점은 원의 중앙이고 끝점은 링에 있습니다. <br/>팁: 그래디언트 점을 2개 이상 지정하려면 addColorStop()을 사용해야 합니다. <br/><br/><br/><br/>매개변수<br/><br/>[tr]매개변수 유형 정의[/tr]<table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td>圆心的x坐标</td></tr><tr><td>y</td><td>Number</td><td>圆心的y坐标</td></tr><tr><td>r</td><td>Number</td><td>圆的半径</td></tr></tbody></table><br/><br/><br/>예<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// 원형 그래디언트 만들기const grd = ctx.createCircularGradient(75, 50, 50)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// 채우기 gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br/><br/><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/423/329/798/1488964146381136.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/><br/><br/>createLinearGradient<br/><br/>정의<br/><br/>선형 그래디언트 색상을 만듭니다. <br/>팁: 그래디언트 점을 2개 이상 지정하려면 addColorStop()을 사용해야 합니다. <br/><br/><br/><br/>매개변수<br/><br/>[tr]매개변수 유형 정의[/tr]<table class="t_table"><tbody><tr class="firstRow"><td>x0</td><td>Number</td><td>起点的x坐标</td></tr><tr><td>y0</td><td>Number</td><td>起点的y坐标</td></tr><tr><td>x1</td><td>Number</td><td>终点的x坐标</td></tr><tr><td>y1</td><td>Number</td><td>终点的y坐标</td></tr></tbody></table><br/><br/><br/>예<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// 선형 그래디언트 만들기const grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// 그래디언트로 채우기ctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br/><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/319/264/577/1488964126768032.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/>strokRect<br/><br/>define<br/><br/>draw 직사각형(채워지지 않음). <br/>팁: 직사각형 선의 색상을 설정하려면 setFillStroke()를 사용하세요. 설정하지 않은 경우 기본값은 검정색입니다. <br/><br/><br/><br/>매개변수<br/><br/>[tr]매개변수 유형 범위 설명[/tr]<table class="t_table"><tbody><tr class="firstRow">< td>x</td><td>숫자</td><td><table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td><br/></td><td>矩形路径左上角的x坐标</td></tr><tr><td>y</td><td>Number</td><td><br/></td><td>矩形路径左上角的y坐标</td></tr><tr><td>width</td><td>Number</td><td><br/></td><td>矩形路径的宽度</td></tr><tr><td>height</td><td>Number</td><td><br/></td><td>矩形路径的高度</td></tr></tbody></table></td><td>직사각형 경로의 왼쪽 상단 모서리의 x 좌표</td></tr><tr> <td>y </td><td>숫자</td><td><🎜></td><td>직사각형 경로 왼쪽 상단 모서리의 Y 좌표</td></tr><tr ><td>너비</td ><td>숫자</td><td><🎜></td><td>직사각형 경로의 너비</td></tr><tr><td> 높이</td><td>숫자< /td><td><🎜></td><td>직사각형 경로의 높이</td></tr></tbody></table><br/><br/><br/>예<br/><br/>const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw ()<br/><br/><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/939/521/900/1488964112354042.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/>fillRect<br/><br/>는 <br/><br/>를 정의하여 직사각형을 채웁니다. <br/>팁: 직사각형의 채우기 색상을 설정하려면 setFillStyle()을 사용하세요. 설정하지 않은 경우 기본값은 검정색입니다. <br/><br/><br/><br/>매개변수<br/><br/>[tr]매개변수 유형 설명[/tr]<table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td>矩形路径左上角的x坐标</td></tr><tr><td>y</td><td>Number</td><td>矩形路径左上角的y坐标</td></tr><tr><td>width</td><td>Number</td><td>矩形路径的宽度</td></tr><tr><td>height</td><td>Number</td><td>矩形路径的高度</td></tr></tbody></table><br/><br/><br/>예<br/><br/>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br/><br/><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/656/510/394/1488964097771237.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/><br/><br/>호<br/><br/>정의<br/><br/>호를 그립니다. <br/>팁: 원을 만들려면 arc() 메서드를 사용하여 실제 라디안이 0이고 끝 라디안이 2 * Math.PI임을 지정할 수 있습니다. <br/>팁: 캔버스에 호를 그리려면 스트로크() 또는 채우기() 메서드를 사용하세요. <br/><br/><br/><br/>매개변수<br/><br/>[tr]매개변수 유형 설명[/tr]<table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td>圆的x坐标</td></tr><tr><td>y</td><td>Number</td><td>圆的y坐标</td></tr><tr><td>r</td><td>Number</td><td>圆的半径</td></tr><tr><td>sAngle</td><td>Number</td><td>起始弧度，单位弧度（在3点钟方向）</td></tr><tr><td>eAngle</td><td>Number</td><td>终止弧度</td></tr><tr><td>counterclockwise</td><td>Boolean</td><td>可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。</td></tr></tbody></table><br/><br/><br/>예<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// 좌표 그리기ctx.arc(100, 75, 50, 0, 2 * Math.PI)ctx.setFillStyle('#EEEEEE')ctx.fill()ctx.beginPath()ctx .moveTo(40, 75)ctx.lineTo(160, 75)ctx.moveTo(100, 15)ctx.lineTo(100, 135)ctx.setStrokeStyle('#AAAAAA')ctx.Stroke()ctx.setFontSize(12 )ctx.setFillStyle('black')ctx.fillText('0', 165, 78)ctx.fillText('0.5*PI', 83, 145)ctx.fillText('1*PI', 15, 78)ctx .fillText('1.5*PI', 83, 10)// 점 그리기ctx.beginPath()ctx.arc(100, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('lightgreen')ctx.fill ()ctx.beginPath()ctx.arc(100, 25, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill()ctx.beginPath()ctx.arc(150, 75 , 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()// 그리기 arcctx.beginPath()ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) ctx.setStrokeStyle('#333333')ctx.stroke()ctx.draw()<br/>arc(100, 75, 50, 0, 1.5 * Math.PI)의 세 가지 주요 좌표는 다음과 같습니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/352/893/518/1488964083105591.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/> <ul class=" list-paddingleft-2"><li><p>녹색: 원형 중심(100, 75)</p></li><li><p>빨간색: 시작 호(0)</p></li><li><p>파란색 : 호 종료(1.5 * Math.PI)<br/></p></li></ul><br/><br/><br/><br/><br/>캔버스에 그리기<br/><br/>All in < Drawing ;canvas/>에서는 JavaScript를 사용하여 수행해야 합니다. <br>WXML: (특별한 설명이 없는 한 다음 예에서는 이 WXML을 템플릿으로 사용하며 반복하지 않습니다.) <br><canvas canvas -id ="myCanvas" style="border: 1px solid;"/>JS: (다음 예에서는 JS를 onLoad에 넣겠습니다) <br>const ctx = wx.createCanvasContext('myCanvas')ctx. 'red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br><br><br>1단계: 캔버스 그리기 컨텍스트 만들기<br><br>먼저 해야 할 일 캔버스 그리기 컨텍스트 CanvasContext를 만듭니다. <br>CanvasContext는 애플릿에 내장된 객체이며 몇 가지 그리기 메서드가 있습니다. <br>const ctx = wx.createCanvasContext('myCanvas')<br><br><br>2단계: 캔버스 그리기 컨텍스트 사용 그리기 설명<br><br>다음으로 캔버스에 무엇을 그리고 싶은지 설명하겠습니다. <br>그리기 컨텍스트의 채우기 색상을 빨간색으로 설정합니다. <br>ctx.setFillStyle('red') 방금 설정한 빨간색으로 채워진 직사각형을 그리려면 fillRect(x, y, width, height) 메서드를 사용합니다. <br>ctx .fillRect(10, 10, 150, 75)<br><br><br>3단계: 그리기<br><br><canvas/> 지금: <br>ctx.draw()<br><br><br><p>위 내용은 WeChat Mini 프로그램 0.11.122100 버전 업데이트 세부정보 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>핫 AI 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>무료로 이미지를 벗다</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI 옷 제거제</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>인기 기사</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785857.html" title="Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796793874.html" title="KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796787760.html" title="Inzoi : 학교 및 대학에 지원하는 방법" class="phpgenera_Details_mainR4_bottom_title">Inzoi : 학교 및 대학에 지원하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/article.html">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>뜨거운 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title"> <h3>메모장++7.3.1</h3> </a> <p>사용하기 쉬운 무료 코드 편집기</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 중국어 버전</h3> </a> <p>중국어 버전, 사용하기 매우 쉽습니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title"> <h3>스튜디오 13.0.1 보내기</h3> </a> <p>강력한 PHP 통합 개발 환경</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title"> <h3>드림위버 CS6</h3> </a> <p>시각적 웹 개발 도구</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac 버전</h3> </a> <p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>뜨거운 주제</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7749</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1643</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1397</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1293</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1234</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/faq/zt">더보기</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/673693.html" title="Xianyu WeChat 미니 프로그램 공식 출시" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170757595943212.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Xianyu WeChat 미니 프로그램 공식 출시" /> </a> <a href="https://www.php.cn/ko/faq/673693.html" title="Xianyu WeChat 미니 프로그램 공식 출시" class="phphistorical_Version2_mids_title">Xianyu WeChat 미니 프로그램 공식 출시</a> <span class="Articlelist_txts_time">Feb 10, 2024 pm 10:39 PM</span> <p class="Articlelist_txts_p">Xianyu의 공식 WeChat 미니 프로그램이 조용히 출시되었습니다. 미니 프로그램에서는 비공개 메시지를 게시하여 구매자/판매자와 소통하고, 개인 정보 및 주문 보기, 상품 검색 등을 할 수 있습니다. 궁금하시다면 Xianyu WeChat mini가 무엇인가요? 프로그램을 살펴볼까요? Xianyu WeChat 애플릿의 이름은 무엇입니까? 답변: Xianyu, 유휴 거래, 중고 판매, 평가 및 재활용. 1. 미니 프로그램에서는 대기 메시지 게시, 비공개 메시지를 통한 구매자/판매자와의 커뮤니케이션, 개인 정보 및 주문 보기, 특정 항목 검색 등을 할 수 있습니다. 2. 미니 프로그램 페이지에는 근처에 홈페이지가 있습니다. 유휴 게시, 메시지, 내 5가지 기능 3. 사용하려면 구매하기 전에 WeChat 결제를 활성화해야 합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/629465.html" title="WeChat 애플릿은 사진 업로드 기능을 구현합니다." class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170052888311890.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WeChat 애플릿은 사진 업로드 기능을 구현합니다." /> </a> <a href="https://www.php.cn/ko/faq/629465.html" title="WeChat 애플릿은 사진 업로드 기능을 구현합니다." class="phphistorical_Version2_mids_title">WeChat 애플릿은 사진 업로드 기능을 구현합니다.</a> <span class="Articlelist_txts_time">Nov 21, 2023 am 09:08 AM</span> <p class="Articlelist_txts_p">WeChat 애플릿은 사진 업로드 기능을 구현합니다. 모바일 인터넷의 발전으로 WeChat 애플릿은 사람들의 삶에 없어서는 안될 부분이 되었습니다. WeChat 미니 프로그램은 다양한 애플리케이션 시나리오를 제공할 뿐만 아니라 이미지 업로드 기능을 포함한 개발자 정의 기능도 지원합니다. 이 기사에서는 WeChat 애플릿에서 이미지 업로드 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 준비 작업 코드 작성을 시작하기 전에 WeChat 개발자 도구를 다운로드하여 설치하고 WeChat 개발자로 등록해야 합니다. 동시에 WeChat도 이해해야 합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/629690.html" title="WeChat 애플릿에서 드롭다운 메뉴 효과 구현" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170055022352293.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WeChat 애플릿에서 드롭다운 메뉴 효과 구현" /> </a> <a href="https://www.php.cn/ko/faq/629690.html" title="WeChat 애플릿에서 드롭다운 메뉴 효과 구현" class="phphistorical_Version2_mids_title">WeChat 애플릿에서 드롭다운 메뉴 효과 구현</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 03:03 PM</span> <p class="Articlelist_txts_p">WeChat 미니 프로그램에서 드롭다운 메뉴 효과를 구현하려면 구체적인 코드 예제가 필요합니다. 모바일 인터넷의 인기로 인해 WeChat 미니 프로그램은 인터넷 개발의 중요한 부분이 되었으며 점점 더 많은 사람들이 관심을 갖고 주목하기 시작했습니다. WeChat 미니 프로그램을 사용하세요. WeChat 미니 프로그램 개발은 기존 APP 개발보다 간단하고 빠르지만 특정 개발 기술을 숙달해야 합니다. WeChat 미니 프로그램 개발에서 드롭다운 메뉴는 일반적인 UI 구성 요소로, 더 나은 사용자 경험을 제공합니다. 이 기사에서는 WeChat 애플릿에서 드롭다운 메뉴 효과를 구현하는 방법을 자세히 소개하고 실용적인 정보를 제공합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/629820.html" title="WeChat 미니 프로그램에 이미지 필터 효과 구현" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170056213860475.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WeChat 미니 프로그램에 이미지 필터 효과 구현" /> </a> <a href="https://www.php.cn/ko/faq/629820.html" title="WeChat 미니 프로그램에 이미지 필터 효과 구현" class="phphistorical_Version2_mids_title">WeChat 미니 프로그램에 이미지 필터 효과 구현</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 06:22 PM</span> <p class="Articlelist_txts_p">WeChat 미니 프로그램에서 사진 필터 효과 구현 소셜 미디어 애플리케이션의 인기로 인해 사람들은 사진의 예술적 효과와 매력을 높이기 위해 사진에 필터 효과를 적용하는 것을 점점 더 좋아하고 있습니다. WeChat 미니 프로그램에서도 사진 필터 효과를 구현할 수 있어 사용자에게 더욱 흥미롭고 창의적인 사진 편집 기능을 제공합니다. 이 기사에서는 WeChat 미니 프로그램에서 이미지 필터 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 WeChat 애플릿의 캔버스 구성 요소를 사용하여 이미지를 로드하고 편집해야 합니다. 페이지에서 캔버스 구성요소를 사용할 수 있습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/629806.html" title="WeChat 애플릿을 사용하여 캐러셀 전환 효과 달성" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170056077741291.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WeChat 애플릿을 사용하여 캐러셀 전환 효과 달성" /> </a> <a href="https://www.php.cn/ko/faq/629806.html" title="WeChat 애플릿을 사용하여 캐러셀 전환 효과 달성" class="phphistorical_Version2_mids_title">WeChat 애플릿을 사용하여 캐러셀 전환 효과 달성</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 05:59 PM</span> <p class="Articlelist_txts_p">WeChat 애플릿을 사용하여 캐러셀 전환 효과를 얻으세요. WeChat 애플릿은 개발 및 사용이 간단하고 효율적인 경량 애플리케이션입니다. WeChat 미니 프로그램에서는 캐러셀 전환 효과를 달성하는 것이 일반적인 요구 사항입니다. 이 기사에서는 WeChat 애플릿을 사용하여 캐러셀 전환 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 WeChat 애플릿의 페이지 파일에 캐러셀 구성 요소를 추가합니다. 예를 들어 <swiper> 태그를 사용하여 캐러셀의 전환 효과를 얻을 수 있습니다. 이 구성 요소에서는 b를 전달할 수 있습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/691200.html" title="Xianyu WeChat 애플릿의 이름은 무엇입니까?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170901068659339.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Xianyu WeChat 애플릿의 이름은 무엇입니까?" /> </a> <a href="https://www.php.cn/ko/faq/691200.html" title="Xianyu WeChat 애플릿의 이름은 무엇입니까?" class="phphistorical_Version2_mids_title">Xianyu WeChat 애플릿의 이름은 무엇입니까?</a> <span class="Articlelist_txts_time">Feb 27, 2024 pm 01:11 PM</span> <p class="Articlelist_txts_p">Xianyu의 공식 WeChat 미니 프로그램이 사용자에게 유휴 항목을 쉽게 게시하고 거래할 수 있는 편리한 플랫폼을 제공하기 위해 조용히 출시되었습니다. 미니 프로그램에서는 비공개 메시지를 통해 구매자 또는 판매자와 소통할 수 있으며, 개인정보 및 주문 조회, 원하는 상품을 검색할 수 있습니다. 그렇다면 WeChat 미니 프로그램에서 Xianyu는 정확히 무엇이라고 불리나요? 이 튜토리얼 가이드에서는 이에 대해 자세히 소개합니다. 알고 싶은 사용자는 이 기사를 따라 계속 읽어보세요! Xianyu WeChat 애플릿의 이름은 무엇입니까? 답변: Xianyu, 유휴 거래, 중고 판매, 평가 및 재활용. 1. 미니 프로그램에서는 대기 메시지 게시, 비공개 메시지를 통한 구매자/판매자와의 커뮤니케이션, 개인 정보 및 주문 보기, 특정 항목 검색 등을 할 수 있습니다. 2. 미니 프로그램 페이지에는 근처에 홈페이지가 있습니다. 유휴 게시, 메시지 및 5가지 기능.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/629819.html" title="WeChat 미니 프로그램에서 슬라이딩 삭제 기능 구현" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170056213220708.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WeChat 미니 프로그램에서 슬라이딩 삭제 기능 구현" /> </a> <a href="https://www.php.cn/ko/faq/629819.html" title="WeChat 미니 프로그램에서 슬라이딩 삭제 기능 구현" class="phphistorical_Version2_mids_title">WeChat 미니 프로그램에서 슬라이딩 삭제 기능 구현</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 06:22 PM</span> <p class="Articlelist_txts_p">WeChat 미니 프로그램에서 슬라이딩 삭제 기능을 구현하려면 특정 코드 예제가 필요합니다. WeChat 미니 프로그램의 인기로 인해 개발자는 개발 과정에서 일부 공통 기능의 구현 문제에 직면하는 경우가 많습니다. 그중 슬라이딩 삭제 기능은 일반적으로 사용되는 기능 요구 사항입니다. 이 기사에서는 WeChat 애플릿에서 슬라이딩 삭제 기능을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다. 1. 요구 사항 분석 WeChat 미니 프로그램에서 슬라이딩 삭제 기능의 구현에는 다음 사항이 포함됩니다. 목록 표시: 슬라이드 및 삭제할 수 있는 목록을 표시하려면 각 목록 항목에 다음이 포함되어야 합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/629437.html" title="WeChat 애플릿에서 이미지 회전 효과 구현" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170052639172010.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WeChat 애플릿에서 이미지 회전 효과 구현" /> </a> <a href="https://www.php.cn/ko/faq/629437.html" title="WeChat 애플릿에서 이미지 회전 효과 구현" class="phphistorical_Version2_mids_title">WeChat 애플릿에서 이미지 회전 효과 구현</a> <span class="Articlelist_txts_time">Nov 21, 2023 am 08:26 AM</span> <p class="Articlelist_txts_p">WeChat 미니 프로그램에서 이미지 회전 효과를 구현하려면 구체적인 코드 예제가 필요합니다. WeChat 미니 프로그램은 사용자에게 풍부한 기능과 좋은 사용자 경험을 제공하는 경량 애플리케이션입니다. 미니 프로그램에서 개발자는 다양한 구성 요소와 API를 사용하여 다양한 효과를 얻을 수 있습니다. 그 중 그림 회전 효과는 미니프로그램에 흥미와 시각 효과를 더할 수 있는 일반적인 애니메이션 효과이다. WeChat 미니 프로그램에서 이미지 회전 효과를 얻으려면 미니 프로그램에서 제공하는 애니메이션 API를 사용해야 합니다. 다음은 방법을 보여주는 특정 코드 예제입니다.</p> </div> </div> <a href="https://www.php.cn/ko/weixin-marketing.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745705814"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>