WeChat 미니 프로그램 개발 경험 요약

본 글은 주로 WeChat 미니 프로그램 개발 경험, 요약, 개발 경험 관련 정보를 소개합니다. 도움이 필요한 친구는

WeChat 미니 프로그램 개발 경험 요약

을 참조하세요. 🎜>

서문:

최근 미니 프로그램이 나왔는데, 회사에서도 미니 프로그램 개발을 의뢰해 주셨어요.

그래서 작업을 시작했는데 거의 일주일 동안 작업을 하다가 많은 문제에 부딪혔습니다. (주로 안드로이드 개발자의 관점에서 말씀드리자면, 일부 지식 포인트와 경험으로 단편화되어 있을 수 있습니다. 추가할 사항이 있으면 환영합니다)

요약

1 : 매개변수 전달, 메소드 판단

js에서는 메소드에 형식 매개변수로 메소드를 전달할 수 있지만, Java에서는 이것이 불가능합니다. 예를 들어 시작 프로젝트의

getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
  typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
  //调用登录接口
  wx.login({
   success: function () {
    wx.getUserInfo({
     success: function (res) {
      that.globalData.userInfo = res.userInfo
      typeof cb == "function" && cb(that.globalData.userInfo)
     }
    })
   }
  })
 }
},

는 형식 매개변수인 cb를 전달하는 방식이고, 아주 영리한 판단 방식도 있습니다

typeof cb == "function" && cb(that.globalData.userInfo)

&&의 연산 규칙을 ​​사용하여 먼저 cb가 메소드인지 판단합니다. 여기서 ==를 사용하여 유형이 동일한지 판단할 수 있습니다. &&, 이전 사항이 만족되지 않으면 cb가 메소드인 경우 다음은 실행되지 않습니다. cb 메소드를 호출하고 성공 콜백의 userinfo 매개변수를 전달합니다.

한 가지 더, if(이 .globalData.userInfo)는 null 여부에 대한 판단 조건으로 Java에서는 불가능합니다.

2: 로그 출력

로그 출력은 toString() 메소드가 없기 때문에 "" + 변수를 직접 출력할 수 없습니다

X console.log("info"+info);

그래서 따로 인쇄만 가능합니다

console.log("info");
console.log(info);

3: json이 객체를 가져옵니다

json 사용을 위해 json["key"]를 사용하여 해당 하위 개체

person: {
   name: "jafir",
   age: "11",
}
var name = person["name"];
var age = person["age"];

info: {persons:[{name:"123",age:11},{name:"jafir1",age:12}]}
//如果有数组 通过这种方法获取
 console.log(that.data.info["persons"][1].name)
 console.log(that.data.info["persons"][1].age)

를 가져올 수 있습니다.

4: 부울 유형 값 정의

페이지의 데이터에 부울 유형 값을 정의하려면 isSuccess: "true" 대신 isSuccess: true여야 합니다.

if (this.data.isSccess) {
   console.log("true")
  } else {
   console.log("false")
  }

isSucees: "true"이면 결과가 true이므로 문제가 없지만 isSucess: "false"이면 결과는 여전히 true입니다.

여기가Success이기 때문입니다. 부울이 아니라 null이 아닌 유형이므로 true인 경우

기본값은 정의되지 않습니다. if is false

5: "that"을 사용하세요

페이지 외부에서 해당 변수를 정의한 다음{} onLoad에서 이 변수에 할당하는 것이 좋습니다. 미래에 이것이 페이지의 컨텍스트 객체를 가리키지 않는 일부 장소를 피하기 위해

//上下文对象
var that;
page({
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  that = this;
 }

...
that.setData({
    xxx: xxx,
   })
})

6: 페이지 수명 주기 방법

1. onload에는 페이지 값 등을 가져올 수 있는 options 매개변수만 있습니다. onload는 한 번만 실행되지만

2. onShow는 매번 실행될 수 있습니다. 따라서 페이지를 매번 새로 고쳐야 하는 데이터 요청은 onShow에 배치할 수 있습니다. 테스트 및 성능 경험은 기본적으로 영향이 없습니다

3. 페이지의 수명 주기는 다음과 같습니다. Android만큼 풍부하며 페이지 간 값 전송에 특정 제한이 있습니다.

4. 일반적인 URL 값 전달 방법인 xxx?key = value를 통해 값을 전달할 수 있지만, 참고하세요: 우리가 전달하는 값은 실제로 문자열과 URL을 함께 연결하는 것과 같습니다. 객체에 toString 메서드가 없으므로 객체를 직접 전달하지 마세요.

json 개체를 전달하는 단계는 다음과 같습니다.

1. json 개체인 경우 문자열로 변환합니다. 는 json 객체입니다.parseString(json)

2. URL이 포함된 Splice 매개변수가 필요합니다. key=value

3. 가져올 때 온로드 옵션에서 꺼내고

onLoad: function (options) {
var value= options.key
}

7: 페이지 간 이동

홈 페이지에서 새 인터페이스로 이동하여 결과를 홈 페이지에 알리는 방법. 새 인터페이스가 로직을 성공적으로 처리한 후?

일반적으로 이 상황을 해결할 수 있는 방법은 없습니다. 테스트 후 홈 페이지가 아닌 보조 인터페이스의 탐색기에서 홈 페이지를 직접 열려면 작동하지 않으며 오류가 보고됩니다.

그래서 우리가 채택하는 전략은 보조 인터페이스가 데이터를 처리한 후 직접 돌아와 홈 페이지 인터페이스에서 데이터를 다시 가져오는 것입니다. 따라서 요청 인터페이스가 onShow 메소드에서 실행되는 것으로 나타납니다. onload는 한 번만 실행되기 때문에

8: wxml

1.text 태그는 Bindtap을 사용할 수 있습니다

<image src="{{logoUrl?logoUrl:&#39;../../img/paihao.png&#39;}}"></image>

이 방법을 사용하면 기본 그림을 표시할 수 있습니다

3. 다시 태그에 data-xx-oo ="value"를 사용하고 해당 개체에 e.currentTarget.dataset를 사용합니다. 여기서 xx-oo를 얻었습니다. -

는 실제로 Camel Case를 탈출합니다. 이 일반적인 사용 시나리오는 클릭한 뷰에 대한 데이터를 설정하거나 이벤트를 바인딩할 수 있다는 것입니다. 예를 들어 선택기에 뷰가 5개 있는 경우 각 뷰에 대해 서로 다른 값을 바인딩할 수 있습니다. 이벤트가 발생하면 해당 값을 가져옵니다

4.如果你想要显隐view你可以通过wx:if="true/false"来处理，但是这样的话，如果为false，page不会去渲染这个view,它所在的位置空间也不会预留，假如下面的view就会往上排。如果想要留存它的位置空间，可以修改其style样式来解决

style="visibility:{{isShow?'visible':'hidden'}}"

9:统一网络请求处理结果

你可以封装一下网络请求的返回结果，做统一处理

requestWithGet: function(paramsData) {
 data.method = 'GET'
 this.requestInternal(paramsData)
},
requestWithPost: function(paramsData) {
 data.method = 'POST'
 this.requestInternal(paramsData)
},
requestInternal: function (paramsData) {
 var that = this;
 console.log('requestInternal: 开始请求接口[' + paramsData.url + ']');
 //开始网络请求
 wx.request({
  url: paramsData.url,
  data: paramsData.data,
  method: paramsData.method,
  success: function (res) {
   console.log('requestInternal: 接口请求成功[' + paramsData.url + ']');
   paramsData.success(res);
  },
  fail: function (res) {
   console.log('requestInternal: 接口请求失败[' + paramsData.url + ']');
   console.log(res);
   ////在这里做请求失败的统一处理
   wx.showToast({
    title: '网络访问失败',
    duration: 1500
   })
   typeof paramsData.fail == "function" && paramsData.fail(res);
  },
  complete: function (res) {
//在这里做完成的统一处理
   typeof paramsData.complete == "function" && paramsData.complete(res);
  }
 })
}

这样在使用请求的时候，可以直接先wx.request({}) 这样，就可以IDE给你联想生成对应的请求格式，然后直接把“wx.request” 替换 “requestWithGet”或者“requestWithPost”就OK了

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

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