미니 프로그램에 대해

기사 참고 사항. 당신과 토론을 환영합니다. 글에 오류가 있으면 지적해주세요.

1. 데이터에서 변수를 가져와야 하는 일부 작업. ES6 객체 구조 분해 및 할당을 사용하여 단순화할 수 있습니다. 이 방법은 작은 프로그램뿐만 아니라 vue에서도 사용할 수 있습니다.

// 例子(小程序)
let a = this.data.a;
let b = this.data.b;
// ES6对象解构赋值
let {a,b} = this ; // vue
let {a,b} = this.data; //小程序

2. 애플릿의 숨겨진 구성요소 공용 속성이 숨겨져 있습니다. 문서에 주의를 기울이지 않으면 이 공용 속성을 놓칠 수 있습니다. CSS의 display:none과 동일하며 자주 전환되는 노드에 적용할 수 있습니다.

<view></view>
 <!--  false 为显示   true为隐藏 -->

관계자의 말: "일반적으로 wx:if는 전환 비용이 더 높고, Hidden은 초기 렌더링 비용이 더 높습니다. 따라서 빈번한 전환이 필요한 경우에는 Hidden을 사용하는 것이 좋습니다. 조건이 다음과 같은 경우 런타임 중에 변경될 가능성이 낮으면 wx:if가 더 좋습니다. "

3. 텍스트 블로거가 처음 작은 프로그램 작성을 시작할 때 wxml에서 형식화된 문서를 사용할 때 직면하게 되는 함정에 대해

<!-- 这样的写法会出现换行的效果 -->
<text>
    SevenDream 
    SevenDream 
</text>
<!-- 如果不需要换行的效果-->
<text>SevenDream SevenDream</text>

4. 이미지 정보 필요할 때 사진을 렌더링하면 연속된 사진 중간에 흰색 이음새가 나타납니다. 쇼핑몰 상품 상세페이지에서 잘라서 보면 가운데 흰색 줄무늬가 있어서 보기 흉합니다. 이미지 태그에 display:bolck를 추가하기만 하면 됩니다.

<image></image>

5. 점프 정보

• 최대 페이지 스택 처리 방법을 초과하는 경우(10페이지 이상) 점프가 캡슐화됩니다.

//utils.js
export function navigateTo(url) {
   let Type = getCurrentPages().length >= 10 ? 'redirectTo' : 'navigateTo'
    return new Promise((resolve, reject) => {
      wx[Type]({
        url,
        success: res => {
          resolve()
        },
        fail: err => {
          reject(err)
        },
      })
    })
}
// 其他页面js
import {navigateTo} from '../../utils/utils';
navigateTo('pages/index/index')

• 이전 페이지 복귀 시 새로고침(개인센터 복귀 등)

wx.switchTab({
    url: '/pages/my/my',
    success:function(){
        var page  =  getCurrentPages().pop(); //当前页面
        page.onLoad(); // 调用 onload
    }})

• 이전 페이지 복귀 시 이전 페이지 값 설정

    var pages = getCurrentPages(); // 获取页面栈
    var prevPage = pages[pages.length - 2];  //上一页
    prevPage.setData(data);
    wx.navigateBack({
      delta: 1
    })

6 .this.setData 객체나 배열 중 하나를 변경하려면

  //data
  data: {
    obj: {
      a: 1
    },
    array: ['1']
  },
  //改变对象
  setOBJ:function(){
    var name = 'a'
    var obj = 'obj.a'
    this.setData({
      [obj]:2
    })
  },
  //改变数组
  setArr: function () {
    var num = 0
    var arr = `array[${num}]`
    this.setData({
      [arr]: 2
    })
  }

• 많은 바인드 입력에 바인딩해야 하는 양식이 있는 경우 위의 솔루션을 사용하고 data-*를 추가하세요. 많은 방법을 작성할 필요는 없습니다. 하나만 있으면 충분합니다

  <input>
  <input>
  <input>

// 写入
  data:{
    FromOBJ:{
      name:'',
      phone:'',
      address:''
    }
  },
  onInput: function (e) {
      let name =  e.currentTarget.dataset.name
      let value = e.detail.value
      let valueObj = `FromOBJ.${name}`;
      this.setData({
        [valueObj]:value
      })
  }

7. wx.request 캡슐화(인터넷에는 wx.requset에 대한 패키징 솔루션이 많이 있습니다. 원본 포스터의 원본 패키징 솔루션은 다음과 같습니다.)

//API.js
const HTTP_URL = 'https://xxxx.xxx.xxx/'

function Request(url, data={},method='get',ContentType='application/json;charset=utf-8') {
    return new Promise((resolve, reject) => {
        wx.request({
            url: HTTP_URL.http + url,
            method: method,
            header: {
                'Content-Type': ContentType,
                'xxxx': 'xxxx'  // 其他header头
            },
            data: data,
            success: function (res) {
                resolve(res.data)
            },
            fail: function (err) {
                reject(err)
            }
        })
    })
}

export function getApi(data) {
    var url = '/getapi';
    return Request(url, data)
}
// 其他页面js
import {getApi} from '../../utils/api';
getApi({a:1,b:2}).then(res=>console.log(res)).catch(err=>console.log(err))

8. 기타 주의사항 문제

• iconfont를 사용하고 모든 파일을 한꺼번에 넣으면 iconfont.js를 삭제해야 합니다. 실제 기기를 사용하면 오류 메시지가 나타납니다. 흰색 화면이 로드되지 않습니다.

• 애니메이션 효과를 만들 때 주의하세요. 공식 애니메이션 Api나 CSS3 애니메이션을 사용하는 것이 좋습니다. 잘못된). 지도 구성 요소 수준에서 높이 변경이나 너비 변경의 애니메이션 전환 효과를 사용하지 마세요. WeChat Animation Api 및 css3 전환 애니메이션 속성이 멈춰서 ppt에 갇히게 됩니다. 문제를 해결하려면 (WeChat API, CSS3) "변환"을 사용해 보세요.

• 추천 튜토리얼: "

  WeChat 미니 프로그램
"

위 내용은 미니 프로그램에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!