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

• 새 구성요소

• 추가됨 고객 서비스 세션 버튼을 표시하는 데 사용되는 구성 요소

• 구성 요소 속성 openType

• A 추가된 구성요소 속성 색상

• 추가된 구성요소 속성 objectFit

  >
• 추가된 구성요소 속성 마커 폴리라인 원 포함-위치 제어 표시

• 추가된 제어 연결 슬라이딩

• A 구성 요소 속성에 커서 간격 추가

• A 커서 간격

• A 추가된 구성 요소 속성 비활성화

• A 추가된 class

• A 추가됨 구성 요소 속성 스크롤-x, 스크롤-y는

• A의 동적 수정을 지원합니다. 구성요소 이벤트 바인딩tap 바인딩마커탭 바인드컨트롤스탭 바인딩지역변경

• A 추가됨 구성요소 이벤트 바인딩확인

• A 추가됨 < ;video/> 컴포넌트 이벤트 바인딩타임업데이트

• 추가된 컴포넌트 이벤트 바인딩확인

추가된 이벤트 바인딩input
A 추가된 구성 요소 이벤트 바인딩longtap
A 추가된 AudioContext.setSrc() 컨텍스트 API
추가된 CanvasContext 컨텍스트
추가된 CanvasContext.arc() 컨텍스트 API
A 추가된 CanvasContext.fillRect () 컨텍스트 API
새로운 CanvasContext.스트로크Rect() 컨텍스트 API
새로운 CanvasContext.createLinearGradient() 컨텍스트 API
새로 추가된 CanvasContext.createCircularGradient() 컨텍스트 API
스크롤 시 페이지 스크롤을 금지하는 구성 요소 추가
U 업데이트 API wx.getSystemInfo 새로운 플랫폼 반환 매개변수
U 업데이트 API wx.downloadFile HTTP 상태 코드가 200 또는 304인 경우 tmpFilePath를 반환합니다
U 업데이트 API wx.showModal 호출 매개변수 verifyText cancelText 문자 제한
U 개체 및 배열을 지원하도록 WXML 데이터 세트 반환 업데이트
U 업데이트 구성 요소 속성 모드 선택적 widthFix
U 업데이트 구성 요소 속성 범위 ObjectArray 유형 지원 추가
U 업데이트 기본 스타일

• U 업데이트 CanvasContext.save( ) CanvasContext.restore() 컨텍스트 API 브러시 스타일 저장

• U CanvasContext.arc() 업데이트 컨텍스트 API 매개변수 조정, eAngle 추가, 시계 반대 방향,weepAngle 제거

• U 슬라이딩 경험

• U 대화형 경험 ;

• U 최적화 구성요소 클릭 경험

• F Android에서 wx.request 메소드 수정 대문자만 사용할 수 있는 값 문제

• F wx.uploadFile이 iOS에서 헤더를 설정할 수 없는 문제 수정

• F wx.getLocation 유형 수정 =gcj02 on iOS

• F 애플릿을 종료한 후에도 wx.showToast가 계속 표시되는 문제 수정

• F wx.showModal 반환 수정 Android와 iOS 간 매개변수 불일치

• F wx.showModal 콘텐츠가 너무 길거나 제목이 비어 있을 때 레이아웃이 흐트러지는 문제 수정

• F wx.showModal cancelText,confirmText가 비어있는 경우 기본값이 표시되지 않는 문제 수정

• F wx.showModal 실행 중 키보드가 팝업되어 키보드를 입력할 수 없는 문제 수정 철회됨

• F wx.getImageInfo가 Android에서 http 링크 이미지를 얻을 수 없는 문제 수정

• F 탭바 표시로 인해 wx.getSystemInfo에서 얻은 화면 높이가 일관되지 않는 문제 수정

• F 다운로드 후 wx.downloadFile 이미지가 표시되지 않는 문제 수정 Android 문제

• F wx.request가 요청 데이터를 올바르게 인코딩하지 않는 문제 수정

• F wx.login App.onLaunch in 수정 iOS 콜백 문제 없음

• F wx.createAnimationContext 설정 변환 변형 문제 수정 및 애니메이션이 다음 단계로 진행할 수 없음

• F wx.navigateTo wx 수정 .redirectTo iOS에서 Page.onLoad를 호출할 수 없는 문제

• F catch 차단 이벤트의 기본 동작이 유효하지 않은 문제 수정

• F iOS에서 SetInterval 매개변수 전달 오류로 인해 페이지가 정지되는 현상이 수정되었습니다.

• F onReachBottom이 여러 번 트리거되는 문제가 수정되었습니다.

• F 텍스트 노드 하위 항목이 있을 때 발생하는 오류 문제 수정

• F /> 숨겨진 속성이 적용되지 않습니다

• F 🎜>

F 스플래시 화면 상단 또는 하단으로 슬라이딩되는 문제 수정
F 문제 수정 이벤트가 iOS에 적용되지 않음
F iOS에서 사운드가 제거된 후에도 계속 존재하는 문제 수정
F 수정
F 삽입 시 클래스 및 스타일이 동적으로 업데이트되지 않는 문제 수정 비활성화됨
F 포커스 속성이 유효하지 않은 문제 수정
F 수정됨 iOS9에서 display:flex 사용시 첫 번째 입력이 표시되지 않는 문제
F 초기값이 정의되지 않은 경우 비정상적으로 표시되는 현상 수정
F Fix 자리 표시자 잔상 문제
F Fix after focus
F position:fixed의 비정상적인 위치 문제 수정
F 선택기를 연 후 흐림 이벤트가 실행되지 않음
F

• 에서 자동 높이 설정 시 높이 변경 문제 수정

F 에서 파손 예외 문제 수정
F 에서 전체 화면 버튼이 필요한 문제를 수정했습니다. Android에서 두 번 클릭하면 적용됩니다
F 에서 문제 수정 여러 페이지에서 동일한 ID를 사용하는 경우 충돌하는 문제
F drawImage가 정상적으로 표시되지 않는 문제를 수정했습니다.
F 고정된 무한 루프 문제
F 스크롤 보기 실패 문제 수정
F 문제 수정

제출이 입력 콘텐츠를 가져올 수 없습니다

D 리디렉션 속성이 곧 제거됩니다

D wx.createContext 인터페이스는 곧 제거될 예정입니다

D 자동 초점 속성은 곧 제거될 예정입니다. 포커스 속성을 직접 사용하세요

D는 곧 삭제됩니다 속성을 덮습니다

개발자 도구의 기본 기능

A wx.switchTab에 대한 디버깅 지원 추가
A wx.startRecord wx.stopRecord wx.playVoice wx.pauseVoice wx.stopVoice API 디버깅 지원 추가
A WeChat 결제 디버깅 지원 추가
A QR 코드 스캔 디버깅 지원 추가
A 새 메시지 추가 제출 미리보기 오류로 이어지는 페이지 파일을 반복적으로 정의하는 app.json에 대해
A 시뮬레이터에서 이미지를 로드할 때 네트워크 오류에 대한 새 메시지를 추가했습니다
A 컴파일 시 초기화 페이지 및 파라미터 설정 기능 추가
A 미리보기 제출 시 초기화 페이지 및 파라미터 설정 기능 추가
F 별도의 페이지에서 데이터를 볼 수 있도록 appdata 패널을 최적화하고, 동적 업데이트 및 코드 모드 표시를 지원합니다.
F 재생 중인 음악이 없을 때 wx.getBackgroundAudioPlayerState를 수정합니다. 반환 문제 없음
F wx.getBackgroundAudioPlayerState 상태가 잘못된 문제 수정
F 경우에 따라 wxml 패널 흰색 화면 수정 문제
F wxml 패널 속성을 복사할 수 없고 복사본에 캐리지 리턴이 있는 문제 수정
F wxml 패널 단일 텍스트 노드가 표시되지 않는 문제 수정 정렬 문제
F app.json의 탭바 위치를 상단으로 설정한 경우 시뮬레이터에서 오류가 표시되는 문제 수정
F devtools 수정 및 에디터에서 외부 링크를 잘못 클릭하는 문제
F wx.requst가 캐시로 인해 요청을 보낼 수 없는 문제 수정

다음은 업데이트 세부정보입니다.


wx.switchTab(OBJECT)

tabBar 페이지로 이동하고 tabBar가 아닌 다른 모든 페이지를 닫습니다
OBJECT 매개변수 설명:
[tr] 매개변수 유형의 필수 설명[/tr]

url	String	是	需要跳转的 tabBar 页面的路径（需在 app.json 的  字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

샘플 코드:
{ "tabBar": { "list": [{ "pagePath": "index", "text" ": "홈" },{ "pagePath": "other", "text": "other" }] }}wx.switchTab({ url: '/index'})




wx.scanCode(OBJECT)

클라이언트 코드 스캔 인터페이스를 시작하고 스캔 성공 후 해당 결과를 반환합니다.
객체 매개변수 설명:
[tr] 매개변수 유형 필수 설명[ /tr]

success	Function	否	接口调用成功的回调函数，返回内容详见返回参数说明。
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

성공 반환 매개변수 설명:
[tr]매개변수 설명[/tr]

result

码的内容

샘플 코드:
wx.scanCode({ 성공: (res) => { console.log( res) }})




onShareAppMessage

페이지의 공유 정보를 설정하려면 페이지에 onShareAppMessage 함수를 정의하세요.

• 이 이벤트 핸들러가 정의된 경우에만 오른쪽 상단 메뉴에 "공유" 버튼이 표시됩니다.

• 이라고 합니다. 사용자가 공유 버튼을 클릭할 때

• 이 이벤트는 사용자 정의 공유 콘텐츠를 위한 개체를 반환해야 합니다
  

사용자 정의 공유 필드
[tr ] 필드 설명 기본값[/tr]

title	分享标题	当前小程序名称
desc	分享描述	当前小程序名称
path	分享路径	当前页面 path ，必须是以 / 开头的完整路径

샘플 코드:
Page({ onShareAppMessage: function () { return { title: '사용자 정의 공유 제목', desc: '사용자 정의 공유 설명', path: '/page / user?id=123' } }})




wx.showToast(OBJECT)

메시지 프롬프트 상자 표시
OBJECT 매개변수 설명:
[tr]매개변수 유형 필수 설명[/tr]

title	String	是	提示的内容
icon	String	否	图标，只支持"success"、"loading"
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500, 最大为10000
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

샘플 코드:
wx.showToast({ title: 'Success', icon: 'success', 기간: 2000})


onShareAppMessage

페이지의 공유 정보를 설정하려면 페이지에 onShareAppMessage 함수를 정의하세요.

• 이 이벤트 핸들러가 정의된 경우에만 오른쪽 상단 메뉴에 "공유" 버튼이 표시됩니다.

• 이라고 합니다. 사용자가 공유 버튼을 클릭할 때

• 이 이벤트는 사용자 정의 공유 콘텐츠를 위한 개체를 반환해야 합니다
  

사용자 정의 공유 필드
[tr ] 필드 설명 기본값[/tr]

title	分享标题	当前小程序名称
desc	分享描述	当前小程序名称
path	分享路径	当前页面 path ，必须是以 / 开头的完整路径

샘플 코드:
Page({ onShareAppMessage: function () { return { title: '사용자 정의된 공유 제목', desc: '사용자 정의된 공유 설명', path: '/page/user?id=123' } }} )




wx.createCanvasContext(canvasId)

정의

캔버스 그리기 컨텍스트 만들기(canvasId 지정)
팁: canvasId를 지정해야 합니다. , 이 그리기 컨텍스트는 해당



매개변수

[tr]매개변수 유형 설명[/tr]

canvasId

String

画布表示，传入定义在 的 canvas-id

에서만 작동합니다.

새 구성 요소:


audioContext

audioContext는 audioId를 통해 요소.
audioContext 객체의 메소드 목록:
[tr]메소드 매개변수 설명[/tr]

setSrc	src	音频的地址
play	无	播放
pause	无	暂停
seek	position	跳转到指定位置，单位 s

샘플 코드:
play일시 중지현재 재생 시간을 14초로 설정// 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) }})



picker-view

내장 페이지 스크롤 선택기
[tr] 속성 이름 유형 기본값 설명[/tr]

값

숫자 배열

value	Number Array		数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String		设置选择器中间选中框的样式
bindchange	EventHandle		当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

배열의 숫자는 picker-view에서 picker-view-column의 선택된 항목을 순차적으로 나타냅니다. (아래 첨자는 0부터 시작합니다. 숫자가 picker-view-의 길이보다 큰 경우) 열 옵션에서는 마지막 항목이 하나 선택됩니다.

indicator-style

String

선택한 상자의 스타일을 설정합니다 선택기 중앙

bindchange

EventHandle

변경 이벤트가 트리거됩니다. 스크롤 시 값이 변경되는 경우, event.detail = {value: value}; value는 현재 선택되어 있는 picker-view-column 항목을 나타내는 배열입니다(아래 첨자는 0부터 시작).

참고: 구성요소만 배치할 수 있으며 다른 노드는 표시되지 않습니다.


picker-view-column

은 에만 배치할 수 있으며 하위 노드의 높이는 자동으로 선택기 보기의 확인란 매우 일관성
샘플 코드:
{{연도}}년{{월}}월{{일}}일 -view 표시기- style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> ;wx 보기: for="{{년}}" ​​style="line-height: 50px">{{item}}년 ; {{item}}월 {{item}}day picker -view>const date = new Date()const year = []const Month = []const days = []for (let i = 1990; i 캔버스 향상

• 추가된 CanvasContext 컨텍스트

• CanvasContext.arc() 컨텍스트 API 추가

• CanvasContext.fillRect() 컨텍스트 API 추가

• A CanvasContext.스트로크Rect() 컨텍스트 API 추가

• A CanvasContext.createLinearGradient() 컨텍스트 API 추가

• CanvasContext.createCircularGradient() 컨텍스트 API 추가
  

createCircularGradient

정의

원형 그라데이션 색상을 만듭니다.
팁: 시작점은 원의 중앙이고 끝점은 링에 있습니다.
팁: 그래디언트 점을 2개 이상 지정하려면 addColorStop()을 사용해야 합니다.



매개변수

[tr]매개변수 유형 정의[/tr]

x	Number	圆心的x坐标
y	Number	圆心的y坐标
r	Number	圆的半径

예

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()




createLinearGradient

정의

선형 그래디언트 색상을 만듭니다.
팁: 그래디언트 점을 2개 이상 지정하려면 addColorStop()을 사용해야 합니다.



매개변수

[tr]매개변수 유형 정의[/tr]

x0	Number	起点的x坐标
y0	Number	起点的y坐标
x1	Number	终点的x坐标
y1	Number	终点的y坐标

예

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()

strokRect

define

draw 직사각형(채워지지 않음).
팁: 직사각형 선의 색상을 설정하려면 setFillStroke()를 사용하세요. 설정하지 않은 경우 기본값은 검정색입니다.



매개변수

[tr]매개변수 유형 범위 설명[/tr]x

숫자

x	Number		矩形路径左上角的x坐标
y	Number		矩形路径左上角的y坐标
width	Number		矩形路径的宽度
height	Number		矩形路径的高度

직사각형 경로의 왼쪽 상단 모서리의 x 좌표

y

숫자

직사각형 경로 왼쪽 상단 모서리의 Y 좌표

너비

숫자

직사각형 경로의 너비

높이

숫자

직사각형 경로의 높이

예

const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw ()


fillRect

는

를 정의하여 직사각형을 채웁니다.
팁: 직사각형의 채우기 색상을 설정하려면 setFillStyle()을 사용하세요. 설정하지 않은 경우 기본값은 검정색입니다.



매개변수

[tr]매개변수 유형 설명[/tr]

x	Number	矩形路径左上角的x坐标
y	Number	矩形路径左上角的y坐标
width	Number	矩形路径的宽度
height	Number	矩形路径的高度

예

const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()




호

정의

호를 그립니다.
팁: 원을 만들려면 arc() 메서드를 사용하여 실제 라디안이 0이고 끝 라디안이 2 * Math.PI임을 지정할 수 있습니다.
팁: 캔버스에 호를 그리려면 스트로크() 또는 채우기() 메서드를 사용하세요.



매개변수

[tr]매개변수 유형 설명[/tr]

x	Number	圆的x坐标
y	Number	圆的y坐标
r	Number	圆的半径
sAngle	Number	起始弧度，单位弧度（在3点钟方向）
eAngle	Number	终止弧度
counterclockwise	Boolean	可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。

예

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()
arc(100, 75, 50, 0, 1.5 * Math.PI)의 세 가지 주요 좌표는 다음과 같습니다.

• 녹색: 원형 중심(100, 75)

• 빨간색: 시작 호(0)

• 파란색 : 호 종료(1.5 * Math.PI)
  

캔버스에 그리기

All in < Drawing ;canvas/>에서는 JavaScript를 사용하여 수행해야 합니다.
WXML: (특별한 설명이 없는 한 다음 예에서는 이 WXML을 템플릿으로 사용하며 반복하지 않습니다.)
JS: (다음 예에서는 JS를 onLoad에 넣겠습니다)
const ctx = wx.createCanvasContext('myCanvas')ctx. 'red')ctx.fillRect(10, 10, 150, 75)ctx.draw()


1단계: 캔버스 그리기 컨텍스트 만들기

먼저 해야 할 일 캔버스 그리기 컨텍스트 CanvasContext를 만듭니다.
CanvasContext는 애플릿에 내장된 객체이며 몇 가지 그리기 메서드가 있습니다.
const ctx = wx.createCanvasContext('myCanvas')


2단계: 캔버스 그리기 컨텍스트 사용 그리기 설명

다음으로 캔버스에 무엇을 그리고 싶은지 설명하겠습니다.
그리기 컨텍스트의 채우기 색상을 빨간색으로 설정합니다.
ctx.setFillStyle('red') 방금 설정한 빨간색으로 채워진 직사각형을 그리려면 fillRect(x, y, width, height) 메서드를 사용합니다.
ctx .fillRect(10, 10, 150, 75)


3단계: 그리기

지금:
ctx.draw()

위 내용은 WeChat Mini 프로그램 0.11.122100 버전 업데이트 세부정보 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!