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

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.wxml --><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="https://img.php.cn//upload/image/189/517/243/1488964166491492.png" 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="https://img.php.cn//upload/image/423/329/798/1488964146381136.png" 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="https://img.php.cn//upload/image/319/264/577/1488964126768032.png" 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="https://img.php.cn//upload/image/939/521/900/1488964112354042.png" 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="https://img.php.cn//upload/image/656/510/394/1488964097771237.png" 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="https://img.php.cn//upload/image/352/893/518/1488964083105591.png" 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 class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="WeChat 애플릿의 파일 구조 디렉토리 분석 공유" href="http://m.php.cn/ko/faq/355585.html">WeChat 애플릿의 파일 구조 디렉토리 분석 공유</a></span><span>다음 기사：<a class="dBlack" title="WeChat 애플릿의 파일 구조 디렉토리 분석 공유" href="http://m.php.cn/ko/faq/355652.html">WeChat 애플릿의 파일 구조 디렉토리 분석 공유</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/347763.html" title="WeChat Mini 프로그램 간단한 DEMO 레이아웃, 로직 및 스타일 연습" class="aBlack">WeChat Mini 프로그램 간단한 DEMO 레이아웃, 로직 및 스타일 연습</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/347764.html" title="WeChat 애플릿 wx.request(인터페이스 호출 방법)에 대한 자세한 설명과 예" class="aBlack">WeChat 애플릿 wx.request(인터페이스 호출 방법)에 대한 자세한 설명과 예</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/347765.html" title="위챗 미니 프로그램 - 위챗 로그인, 위챗 결제, 템플릿 메시지에 대한 자세한 설명" class="aBlack">위챗 미니 프로그램 - 위챗 로그인, 위챗 결제, 템플릿 메시지에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/347766.html" title="위챗 애플릿(애플리케이션 계정) 간단한 예시 애플리케이션과 예시에 대한 자세한 설명" class="aBlack">위챗 애플릿(애플리케이션 계정) 간단한 예시 애플리케이션과 예시에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/347767.html" title="루프용 WeChat 애플릿에 대한 자세한 설명" class="aBlack">루프용 WeChat 애플릿에 대한 자세한 설명</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>