애플 릿 의 기본 사용 지식 포인트(매우 전면적,추천!)
페이지 를 등록 할 때,우 리 는 일반적으로 무엇 을 해 야 합 니까?
4.567917.수명 주기 에 네트워크 요청 을 보 내 고 서버 에서 데 이 터 를 가 져 옵 니 다wxml 참조 전시 에 편리 하도록 일부 데 이 터 를 초기 화 합 니 다
wxml 에 서 는 Page/Component 에서 함 수 를 직접 호출 할 수 없습니다.
wxml 파일 에서 template 라벨 을 정의 합 니 다.template 라벨 은 호출 되 지 않 은 상태 에서 렌 더 링 을 하지 않 습 니 다.
name 속성 과 is 속성 대응;{{}문법 을 사용 할 수 있 습 니 다.
<template name="compoent">
<view> </view>
<text> </text>
<text>{{name}}</text>
<text>{{age}}</text>
</template>
<template is="compoent"/>
<template is="compoent"/>
<template is="compoent"/>
<template is="compoent" data= "{{name: ' ', age:'123'}}" />
import 가 져 오기:
1:템 플 릿 가 져 오기
2:재 귀적 가 져 올 수 없 는 것 이 특징 이다.
include 도입:
1:공 통 된 구성 요 소 를 파일 로 추출 합 니 다.
특징:template/wxs 를 가 져 올 수 없습니다.재 귀적 가 져 올 수 있 습 니 다.
wxs 모듈
wxs 모듈 은 작은 프로그램의 스 크 립 트 언어 와 wxml 를 결합 하여 페이지 의 구 조 를 구축 할 수 있 습 니 다.
wxs 와 자 바스 크 립 트 는 서로 다른 언어 로 자신의 문법 이 있 으 며 자 바스 크 립 트 와 일치 하지 않 습 니 다.근 데 거의 일치 해 요.
wxml 에 서 는 Page/Component 에서 함 수 를 직접 호출 할 수 없습니다.
그러나 어떤 경우,우 리 는 함수 로 wxml 의 데이터(Vue 와 유사 한 필터)를 처리 하고 싶 습 니 다.이 럴 때 wxs 를 사용 합 니 다.
wxl 사용 제한 및 특징:
WXS 의 실행 환경 과 다른 JavaScript 코드 는 격 리 되 어 있 으 며,wxs 에 서 는 다른 Javascript 파일 에서 정의 하 는 함 수 를 호출 할 수 없고,애플 릿 의 API 를 호출 할 수 없습니다.
wxs 는 배열 의 함수 로 되 돌 릴 수 없습니다.
운영 환경의 차이 로 인해 ios 장치 에 있 는 애플 릿 의 wxs 는 자바 스 크 립 트 보다 2~20 배 빠 르 고 안 드 로 이 드 장치 에 서 는 운영 효율 에 차이 가 없습니다.
애플 릿 구성 요소 화 관련
애플 릿 구성 요소 와 이 구성 요 소 를 호출 하 는 페이지 스타일 은 서로 영향 을 주지 않 습 니 다.
구성 요 소 를 호출 하려 면 페이지 의 json 파일 에 구성 요소 이름과 경 로 를 추가 해 야 합 니 다.
{
"usingComponents": {
"my-cut":"/pages/compent/my-cut" }
}
구성 요소 의 js 파일 Component({})아래
// options styleIsolation: "apply-shared"
// options styleIsolation: "shared"
Component({
options:{
styleIsolation: "apply-shared"
},
})
구성 요소 에 서 는 externalClasses 라 는 속성 을 이용 하여 css 스타일 을 동적 으로 설정 할 수 있 습 니 다.
Component({
properties: {
// title: String
title:{
type: String,
value:" ",
//
observer: function(newVal,oldVal){
console.log(newVal,oldVal)
}
},
},
// css
externalClasses:["tltleclass"]
})
<my-cut title=" " tltleclass="red"></my-cut>
<my-cut title=" " tltleclass="green" />
<my-cut/>
.red{
color: red;
}
.green{
color: green;
}
페이지 에서 구성 요 소 를 사용 할 때,우 리 는 때때로 구성 요소 의 데 이 터 를 수정 해 야 한다.이것 은 우리 가 페이지 의 js 파일 에서 구성 요소 의 data 로 호출 해 야 한다.
애플 릿 에 selectComponent('class/\#xxx')가 구성 요소 대상 을 가 져 올 수 있 습 니 다.
구성 요소 wxml
<view class="contention">
<block wx:for="{{titled}}" wx:key="index">
<view class="tit"> <text class="intext {{index == increat? 'active' : ''}}" data-count="{{index}}" bindtap="targetTap">{{item}}</text> </view>
</block>
</view>
methods: {
targetTap(e){
const index = e.currentTarget.dataset.count
this.setData({
increat:index
})
this.triggerEvent("targetCount" , {})
},
amend(){
this.setData({
titled: [" ", " ", " "]
})
}
}
<switch titled="{{list}}" bind:targetCount="targetCount" class="sw-class"></switch>
targetCount(){
//
const content = this.selectComponent('.sw-class')
console.log(content)
// content.setData({
// titled:[" ", " ", " "]
// })
// ， methods ，
content.amend()
},
싱글 슬롯
구성 요소 wxml
<view>
</view>
<slot></slot>
<view>
</view>
<my-slot>
<button size="mini"> </button>
</my-slot>
<my-slot>
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.woyaogexing.com%2F2021%2F04%2F26%2F1b402c98095d452486508b8250b21f3f%21360x640.jpeg&refer=http%3A%2F%2Fimg2.woyaogexing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625711145&t=d9d310d5e9c878a9d4b7bc7057f2b754"/>
</my-slot>
<my-slot>
<slider value="20"></slider>
</my-slot>
모든 슬롯 에 이름 을 지어 야 합 니 다 name 속성 을 사용 합 니 다.
component 대상 아래 options 대상 아래 multipleSolts 속성 을 true 로 설정 해 야 합 니 다.
구성 요소 wxml
<view> </view>
<view> <slot name="slot1" ></slot> </view>
<view> <slot name="slot2" ></slot> </view>
<view> <slot name="slot3" ></slot> </view>
<view> </view>
Component({
/**
*
*/
options:{
multipleSlots:true
}
)}
<!-- -->
<!-- :
component options multipleSolts true -->
<my-mslot>
<button slot="slot3">415461</button>
<slider slot="slot1" value="20"></slider>
<text slot="slot2"> </text>
</my-mslot>
1 properties 사용자 가 구성 요소 에 데 이 터 를 전송 할 수 있 도록 합 니 다.
properties:{
title: string,
content:{
type: array,
value:[1,2.3],
observer:function(newVal,oldVal){
console.log(newVal,oldVal)
}
}
}
data:{
counter：0
}
methods:{
foo(){
}
}
options:{
// true
multipleSlots:true,
//
styleIsolation: "apply-shared", //
//styleIsolation: "shared"
}
externalClasses:["on","tre"]
observers:{
counter: function(newVal){
console.log(newVal)
}
}
구성 요소 js 파일
pageLifetimes:{
show(){
console.log(" ")
},
hide(){
console.log(" ")
},
resize(){
console.log(" ")
}
}
lifetimes:{
created(){
console.log(" ")
},
attached(){
console.log(" ")
},
ready(){
console.log(" ")
},
moved(){
console.log(" ")
},
detached(){
console.log(" ")
}
}
onReady: function () {
wx.request({
url: 'http://httpbin.org/post',
method:'post',
data:{
name:"wangshuai",
age:19
},
success:function(res){
console.log(res)
}
})
},
비교적 관건 적 인 몇 가지 속성
url:필수데이터:요청 파라미터method:요청 하 는 방식
promise 패키지 사용 하기
export default function request(option) {
return new Promise( (resolve, reject) => {
wx.request({
url: option.url,
method: option.method || 'get',
data: option.data || {},
success: function (res) {
resolve(res)
},
fail: function (res) {
reject(res)
}
})
})
}
onReady: function () {
//
// wx.request({
// url: 'http://httpbin.org/post',
// method:'post',
// data:{
// name:"wangshuai",
// age:19
// },
// success:function(res){
// console.log(res)
// }
// })
request({url: 'http://httpbin.org/post',method:"post"}).then(res=>{
console.log(res)
}).catch(err =>{
console.log(err)
})
},
페이지 wxml
<button size="mini" bindtap="showToast">showToast</button>
<button size="mini" bindtap="showModal">showModal</button>
<button size="mini" bindtap="showLoading">showLoading</button>
<button size="mini" bindtap="showAction">showAction</button>
<button size="mini" open-type="share"> </button>
Page({
showToast(){
wx.showToast({
title: ' showToast',
})
},
showModal(){
wx.showModal({
title:' ',
cancelColor: 'cancelColor',
success:function (params) {
console.log(params)
if (params.cancel) {
console.log(" ")
}
}
})
},
showLoading(){
wx.showLoading({
title: ' ',
mask: true // ，
})
setTimeout(()=>{
wx.hideLoading({
success: (res) => {},
})
},1500)
},
showAction(){
wx.showActionSheet({
itemList: [' ',' '],
})
}
})
작은 프로그램의 공유 방식 은 두 가지 가 있 습 니 다.하 나 는 단 추 를 누 르 면 공유 하 는 것 이 고,다른 하 나 는 오른쪽 상단 의 메뉴 옵션 을 누 르 면 공 유 를 선택 하 는 것 입 니 다.
저희 가 애플 릿 을 공유 할 때 는 onShare AppMessage 를 통 해 공유 정 보 를 보 여 드 려 야 합 니 다.
사용자 가 페이지 내 퍼 가기 단추(button 구성 요소 open-type="share")나 오른쪽 상단 메뉴 인"퍼 가기"단 추 를 누 르 는 행 위 를 감청 하고 퍼 가기 내용 을 사용자 정의 합 니 다.
메모:이 이벤트 처리 함 수 를 정의 해야만 오른쪽 상단 메뉴 에'전송'단 추 를 표시 할 수 있 습 니 다
이 이벤트 처리 함 수 는 return Object 가 필요 합 니 다.퍼 가기 내용 을 사용자 정의 할 때 다음 과 같이 되 돌려 줍 니 다.
애플 릿 점프
navigator 태그
navigator 점프 사용 url.
<navigator url="/pages/home/home"> home</navigator>
redirect:현재 페이지 를 닫 고 응용 프로그램의 한 페이지 로 이동 합 니 다.그러나 tabBer 페이지 로 넘 어 갈 수 없고 돌아 갈 수 없습니다.
switch Tab:tabber 페이지 로 이동 하고 다른 비 tabber 페이지 를 닫 습 니 다(tabber 에서 정의 해 야 합 니 다)
reLaunch:모든 페이지 를 닫 고 특정한 페이지 를 엽 니 다.(특정한 페이지 를 직접 보 여 줍 니 다.빈 체 는 tabBer 페이지 로 이동 할 수 있 습 니 다)
<navigator url="/pages/home/home"> home</navigator>
<navigator url="/pages/home/home" open-type="redirect"> home(redirect)</navigator>
<navigator url="/pages/home/home" open-type="reLaunch"> home(reLaunch)</navigator>
<navigator url="/pages/home/home" open-type="switchTab"> home(switchTab)</navigator>
이 작은 프로그램의 기본 사용 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 작은 프로그램의 기본 사용 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
