小程序中常用的語法有哪些-創(chuàng)新互聯

這篇文章給大家分享的是有關小程序中常用的語法有哪些的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

創(chuàng)新互聯建站長期為上1000家客戶提供的網站建設服務,團隊從業(yè)經驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為思茅企業(yè)提供專業(yè)的成都網站制作、成都做網站,思茅網站改版等技術服務。擁有10多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

api語法的介紹

一、盒子模型Flex

1、flex-wrap:

nowrap(默認):不換行。
 wrap:換行,第一行在上方。
 wrap-reverse:換行,第一行在下方。

2、justify-content: 所有子view在父View顯示的位置

flex-start(默認值):左對齊
flex-end:右對齊
center:居中
*space-between:兩端對齊,項目之間的間隔都相等。因此這個可以認為是設置權重布局,每個子View占一份。如果子View只有一個,則等同于flex-start
*space-around:平均分布在該行上,兩邊留有一半的間隔空間。項目之間的間隔比項目與邊框的間隔大一倍。如果(作用在父view上)只有一個子view,則其實就是讓子View居中對齊


space-between屬性圖形展示:


小程序中常用的語法有哪些

3、align-content

內容居中。只適用于多行的flex容器,單行不起作用
  flex-start:與交叉軸的起點對齊。
  flex-end:與交叉軸的終點對齊。
  center:與交叉軸的中點對齊。
  space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
  space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
  stretch(默認值):軸線占滿整個交叉軸。

4、align-items

讓每個View在父view的對齊方式。適用于所有的flex容器。
 flex-start:交叉軸的起點對齊。
 flex-end:交叉軸的終點對齊。
 center:交叉軸的中點對齊。
 baseline: 項目的第一行文字的基線對齊。
 stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

5、示例

1)讓容器的子View居中顯示
 在容器(父View)中添加:


 display: flex;
 align-items: center;

2)讓一個View布局顯示在最底層,或者最上層,類似于FramLayout布局
使用z-index屬性:


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

注意:
1)z-index只能在absolute 中起作用
2)z-index:-1,被修飾的該View在最底層顯示(可以作為背景)               z-index:1 ,在最外層顯示


二、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區(qū)別還是很大的
   1)對于數字型(int、float),只要是非0的數字都是true;
   2)對于字符串(String),只有是null、和“”空串才是false,其他都是false
   3)對于對象,除了對象是null才是false,其他都是true。哪怕這個對象是一個空的對象{}


3、函數

(1)函數定義
在page中定義:

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

非page中定義:

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

總結:
1.第一種定義必須在最后面要加“,”逗號,而第二種方式不能加
2.與java不同的是,函數的參數params不用指定類型,所以,理論上調用方法的時候可以傳遞任意類型。但是一般不這么做。個人認為還是java嚴謹更好,可讀性強。
3.參數params的個數沒有限制

(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環(huán)境中(可以視為Android中的Context環(huán)境),可以在任何地方直接獲取,即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)

感謝各位的閱讀!關于“小程序中常用的語法有哪些”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

當前題目:小程序中常用的語法有哪些-創(chuàng)新互聯
URL網址:http://bm7419.com/article38/dcoepp.html

成都網站建設公司_創(chuàng)新互聯,為您提供靜態(tài)網站、云服務器App開發(fā)、動態(tài)網站網站營銷、標簽優(yōu)化

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯

網站優(yōu)化排名