WeChat 애플릿의 템플릿 렌더링

이번에는 WeChat 애플릿의 템플릿 렌더링을 가져왔습니다. WeChat 애플릿의 템플릿 렌더링을 사용할 때 주의 사항은 무엇입니까?

이 글은 주로 WeChat 애플릿 템플릿 렌더링 관련 정보를 자세히 소개하며, 관심 있는 친구들은 이를 참조할 수 있습니다.

WeChat 애플릿의 인터페이스 프로그램은 html 구문을 지원하며 추가된 부분이 있습니다. , 전망, 블록, 사원 등과 같은

템플릿 렌더링
index.wxml

<view>
 <p>{{helloWord}}</p>
</view>

{{}}에 포함된 내용을 변수로 이해할 수 있습니다. 프로그램이 {{helloWord}} 변수를 구문 분석하도록 하는 방법

이 변수를 index.js에 등록하세요

var json = {
 data:{
  "helloWord" : "hello world"
 }
};
page(json)

그런 다음 미니 프로그램을 실행하면 표시되는 내용이 hello world라는 것을 알 수 있습니다. 즉, 모든 변수가 등록 인터페이스의 데이터에 포함되어야 합니다.
어떤 사람들은 이러한 변수를 동적으로 추가하는 방법을 묻습니다. ?

var json = {
 data:{
  "helloWorld":""
 },
 //监听页面加载
 onLoad:function(){
  var that = this;
  that.setData({
   "helloWorld":"hello world"
  })
 }
};
page(json)

var json = {
 data:{},
 //监听页面加载
 onLoad:function(){
  var that = this;
  that.setData({
   "helloWorld":"hello world"
  })
 }
};
page(json)

동일한 효과를 얻을 수도 있으며, setData() 함수가 호출될 때마다 페이지가 다시 렌더링됩니다.

index1.wxml

<view>
 <view wx:for="{{users}}" wx:for-item="{{item}}">
  <view wx:for="{{item}}" wx:for-index="{{key}}" wx:for-item="{{val}}">
    <p>{{key}}=>{{val}}</p>
  </view>
 </view>
 <view id="nameDemo">
  <p>name : {{users[0].name}}</p>
 </view>
 <view>
  <button bindtap="clickFunc">我是测试按钮</button>
 </view>
</view>

index1.js

var json={
 data:{},
 //监听页面显示
 onShow:function(){
  vat that = this;
  that.setData({
   users:[
    {
     "name":"name1",
     "age":100
    },
    {
     "name":"name2",
     "age":101
    }
   ]
  });
 }
};
page(json);

이 범위를 확장한 변수의 기능입니다.
wx:for는 변수를 루프합니다.
wx:for-index는 루프의 키 이름을 나타냅니다.
wx:for-item은 루프의 키 값을 나타냅니다.
사용자는 페이지가 표시될 때 데이터 범위에 동적으로 추가됩니다.

이제 위와 같이 새로운 문제를 살펴보겠습니다. id="nameDemo"를 사용하여 뷰에서 {{users[0].name}}의 값을 동적으로 변경하는 방법은 무엇입니까? json을 직접 재생성하고 직접 렌더링하는 것만으로는 충분하지 않습니까?
이 해결 방법은 가능하지만 호출할 때마다 다시 렌더링하면 렌더링 성능을 고려해야 합니다.
해결책은 약간의 js 트릭입니다

bindtap이 click

event

를 버튼

object에 추가하는 {{users[0].name}}

var json = {
 data:{},
 //监听页面显示
 onShow:function(){
  vat that = this;
  that.setData({
   users:[
    {
     "name":"name1",
     "age":100
    },
    {
     "name":"name2",
     "age":101
    }
   ]
  });
 },
 clickFunc:function(event){
  vat that = this;
  var dataJson = {};
  dataJson["users[0].name"] = "我是谁"; 
  that.setData(dataJson);
 }
}

의 값만 변경하고 클릭에 해당하는 기능을 추가합니다. event는 clickFunc 매개변수입니다. 이벤트 데이터 구조는 다음과 같습니다

 { 
  "type": "tap", 
  "timeStamp": 1252, 
  "target": { 
   "id": "tapTest", 
   "offsetLeft": 0, 
   "offsetTop": 0
  }, 
  "currentTarget": { 
   "id": "tapTest", 
   "offsetLeft": 0, 
   "offsetTop": 0, 
   "dataset": { 
   "hi": "MINA" 
   } 
  }, 
  "touches": [{ 
   "pageX": 30, 
   "pageY": 12, 
   "clientX": 30, 
   "clientY": 12, 
   "screenX": 112, 
   "screenY": 151 
  }], 
  "detail": { 
   "x": 30, 
   "y": 12 
  } 
 }

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

CSS3는 기울기 및 회전 애니메이션 효과를 구현합니다.

인라인 블록 요소 기본 간격 지우기

CSS3 그림자 상자 그림자 기능 사용에 대한 자세한 설명

위 내용은 WeChat 애플릿의 템플릿 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!