작은 프로그램에서 일반적으로 사용되는 구문 소개

이 글은 소규모 프로그램에서 일반적으로 사용되는 문법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

다음은 초보자의 관점에서 시작하겠습니다. 물론, 다음 글에서는 작은 프로그램의 지식 포인트를 하나씩 자세하게 소개하지는 않을 것이며, 주로 안드로이드의 몇 가지 아이디어를 비교하고 개인적인 생각을 제시할 것입니다. 정교한.

API 구문 소개

1. Box 모델 Flex

1. flex-wrap:

nowrap(기본값): 줄 바꿈이 없습니다.
줄 바꿈: 줄 바꿈, 첫 번째 줄이 맨 위에 오도록 합니다.
줄바꿈-역방향: 아래 첫 번째 줄을 줄 바꿈합니다.

2. justify-content: 상위 뷰에 모든 하위 뷰가 표시되는 위치

flex-start(기본값): 왼쪽 정렬
flex-end: 오른쪽 정렬
center: 가운데
*space-between: 양쪽 끝에 정렬되어 있으며 항목 사이의 간격은 모두 동일합니다. 따라서 이는 각 하위 뷰가 하나의 공유를 차지하는 가중치 레이아웃을 설정하는 것으로 간주할 수 있습니다. 하위 뷰가 하나만 있는 경우 flex-start
*space-around와 동일합니다. 행에 고르게 분산되어 양쪽에 간격 공간의 절반을 남겨 둡니다. 항목 사이의 공간은 항목과 테두리 사이의 공간보다 두 배 더 큽니다. 하위 뷰가 하나만 있는 경우(상위 뷰에서 작동) 하위 뷰는 실제로 중앙에 정렬되고

속성 간 공백 그래픽 표시:

3, align-content

콘텐츠가 중앙에 정렬됩니다. 여러 줄의 플렉스 컨테이너에만 적용 가능하며 단일 줄은 작동하지 않습니다.
flex-start: 교차 축의 시작점에 맞춰 정렬됩니다.
flex-end: 교차축의 끝점에 맞춰 정렬됩니다.
중심: 교차축의 중간점에 맞춰 정렬됩니다.
간격: 교차축의 양쪽 끝 부분에 정렬되며 축 사이의 간격이 균등하게 분포됩니다.
space-around: 각 축의 양쪽 간격이 동일합니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다.
늘이기(기본값): 축이 전체 교차 축을 차지합니다.

4. align-items

상위 뷰에서 각 뷰를 정렬합니다. 모든 Flex 컨테이너에 적용됩니다.
flex-start: 교차축의 시작점을 정렬합니다.
flex-end: 교차축의 끝점을 정렬합니다.
중심: 교차축의 중간점을 정렬합니다.
기준선: 항목 텍스트 첫 번째 줄의 기준선 정렬입니다.
늘이기(기본값): 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다.

5. 예

1) 컨테이너의 하위 뷰를 중앙에 표시하도록 합니다.
컨테이너에 추가합니다(상위 뷰):

 display: flex;
 align-items: center;

2) 뷰 레이아웃을 하단 또는 상단 레이어에 표시합니다. FramLayout 레이아웃과 유사
z-index 속성 사용:

{        
 position:absolute;              
 left:0px;              
 top:0px;              
  z-index:-1;            
 }

참고:
1) z-index는 절대값에서만 작동할 수 있습니다.
2) z-index:-1, 수정된 보기는 하단에 표시됩니다( 배경으로 사용) z -index:1, 가장 바깥쪽 레이어에 표시

2. js 관련 api

1, 변수

Java에서 사용해야 하는 객체라면 우리는 알고 있습니다. 전체 클래스를 멤버 변수로 선언하고 특정 메소드에서 지역 변수로 유효한 선언을 클래스에 추가합니다. 그러면 해당 애플릿은 다음과 같습니다.
var: Java의 멤버 변수
let: Java의 로컬 변수

2. 기본 데이터 유형 Boolean

    var test0 = ""            //false
    var test1 = "aaaaaaaa"   // true
    var test2 = null          // false
    var test3 = 11           // true
    var test4 = 0            // false
    var test5 = {}           // true

요약: 이는 여전히 Java와 매우 다릅니다
1) 숫자 유형의 경우( int, float ), 0이 아닌 숫자이면 true입니다.
2) 문자열(String)의 경우 null과 "" 빈 문자열만 false이고 나머지는 false입니다
3) 개체의 경우, 개체 제외 null은 false이고 나머지는 모두 true입니다. 이 객체가 빈 객체이더라도 {}

3. 함수

(1) 함수 정의
        페이지 내 정의:

  onShow: function (params) {
    //方法体
  },

비페이지 정의:

function test(params){
    //方法体}

요약:
​ ​ 1. 첫 번째 정의는 끝에 "," 쉼표를 추가해야 하지만 두 번째 방법은
를 추가할 수 없습니다. ​ ​ 2. Java와 달리 함수의 매개변수 params에는 유형을 지정할 필요가 없으므로 이론적으로는 메소드 호출 시 어떤 유형이든 전달될 수 있습니다. 그러나 이것은 일반적으로 수행되지 않습니다. 개인적으로 저는 Java가 더 엄격하고 읽기 쉽다고 생각합니다.
3. 매개변수 개수에는 제한이 없습니다

(2) 콜백 함수
1) 함수 정의

  function request(onFail){
  //调用接口
      wx.request({
        success: function (res) { //接口返回数据
         onFail（res）
      })
    }

2) 함수 호출

             wx.cyou.cache.getCacheValue("key_test", function(result){
                console.log("result==", result)
            })

(3) 참고 사항

1) 미니 프로그램에는 제한이 없습니다. 지원 기능 기능 오버로딩 및 재작성
2) 함수가 함수를 호출할 때 함수 메서드는 직접 전송을 지원하지 않습니다. 다음 예를 보세요:

   function request1(function1) {
          request2(function1）
        }
       问题： 这在request1方法调用request2的时候，参数也是一个函数function1，直接将function1传递给request2是不可以的

       解决方式：        
       function request1(function1) {
          request2(new function{
              function1()

          }}）
        }

        在request2方法的回调函数中去调用function1方法

4. 객체 변수

class Person{
  String name;  int age;
}

Java에서 Person 속성 값 name, age 및 속성 유형 String, int를 얻기 위해 순회하려는 경우. 이들은 모두 리플렉션을 사용하여 구현됩니다. 따라서 작은 프로그램에서는 Java보다 훨씬 간단하고 조잡합니다. 구체적인 구현

for (var propertyName in Person){           
var name = propertyName               //对象Person的属性（String、int）
var value = testInfo[propertyName]    // 对象Person的属性值(name、age)
        }

5、export使用

在调用一个类中的方法或者属性值时，必须要在被调用的方法和属性值，定义的时候用export声明

6、disableScroll使用

问题描述：
 有时候，小程序跑在苹果手机上时，会左右滑动退出，也会上下滑动，这样体验不好。这个时候要禁止滑动。

 在app.json中，将disableScroll值设置为true 就可以了：  
 "window": {          
 "disableScroll": true
      }

7、页面page数据的获取与设置

  let pages = getCurrentPages()          
  let curPage = pages[pages.length - 1]         //获取当前页面
          if (curPage.route == url){        //比较获取的页面的url是否跟实际的一致(如url:"pages/order/order")
            curPage.setData({                                //设置数据
              usingOrderList: usingOrderList
            })
          }

8、获取所有的页面

          let pages = getCurrentPages()            // 获取上一个页面
          let prePage = pages[pages.length - 2]          //给页面设置数据
          prePage.setData({
            refreshUserInfo:true
          })          //返回到上一个页面
          wx.navigateBack({
            delta: 1
          })

注意事项：
     调用getCurrentPages()不需要在page环境中(可以视为Android中的Context环境)，可以在任何地方直接获取，即util等自定义类中同样生效。类似的还有wx.开头的方法

9、showToast时长设置失效问题

  let title = new String(msg)  //延时弹toast,是为了解决有时候在接口请求后，设置的duration时间不起作用
  setTimeout(function () {
    wx.showToast({
      title: title,
      duration: 1200,
      icon: "none"
    })
  }, 100)

10、reLaunch跳转失效问题

     //延时跳转,是为了解决有时候wx.reLaunch不起作用，设置的时间不起作用
    setTimeout(function(){
      wx.reLaunch({
        url: '/pages/home/home'
      })
    },100)

위 내용은 작은 프로그램에서 일반적으로 사용되는 구문 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!