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

這篇文章給大家分享的是有關(guān)小程序中常用的語法有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

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

api語法的介紹

一、盒子模型Flex

1、flex-wrap：

nowrap（默認(rèn)）：不換行。
 wrap：換行，第一行在上方。
 wrap-reverse：換行，第一行在下方。

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

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


space-between屬性圖形展示：


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

3、align-content

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

4、align-items

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

5、示例

1）讓容器的子View居中顯示
 在容器（父View）中添加：


 display: flex;
 align-items: center;

2）讓一個(gè)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相關(guān)的api

1、變量

我們知道，在Java中，如果是在整個(gè)類中需要用到的對象，我們將在類中聲明為成員變量，在某個(gè)具體方法中有效的聲明為局部變量。那么對應(yīng)的小程序是：
var：java中的成員變量
let：java中局部變量

2、基本數(shù)據(jù)類型Boolean
    var test0 = ""            //false
    var test1 = "aaaaaaaa"   // true
    var test2 = null          // false
    var test3 = 11           // true
    var test4 = 0            // false
    var test5 = {}           // true

總結(jié)：這個(gè)與java區(qū)別還是很大的
   1）對于數(shù)字型(int、float),只要是非0的數(shù)字都是true;
   2)對于字符串(String)，只有是null、和“”空串才是false，其他都是false
   3）對于對象，除了對象是null才是false，其他都是true。哪怕這個(gè)對象是一個(gè)空的對象{}


3、函數(shù)

（1）函數(shù)定義
在page中定義：

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

非page中定義：

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

總結(jié)：
1.第一種定義必須在最后面要加“,”逗號，而第二種方式不能加
2.與java不同的是，函數(shù)的參數(shù)params不用指定類型，所以，理論上調(diào)用方法的時(shí)候可以傳遞任意類型。但是一般不這么做。個(gè)人認(rèn)為還是java嚴(yán)謹(jǐn)更好，可讀性強(qiáng)。
3.參數(shù)params的個(gè)數(shù)沒有限制

（2）回調(diào)函數(shù)
1）函數(shù)定義

  function request(onFail){
  //調(diào)用接口
      wx.request({
        success: function (res) { //接口返回?cái)?shù)據(jù)
         onFail（res）
      })
    }

2）函數(shù)調(diào)用

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

（3）注意事項(xiàng)

1）小程序不支持函數(shù)的重載和函數(shù)的重寫
 2)函數(shù)調(diào)用函數(shù)的時(shí)候，函數(shù)方法不支持直接傳遞?？聪旅娴氖纠?/p>

   function request1(function1) {
          request2(function1）
        }
       問題： 這在request1方法調(diào)用request2的時(shí)候，參數(shù)也是一個(gè)函數(shù)function1，直接將function1傳遞給request2是不可以的

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

          }}）
        }

        在request2方法的回調(diào)函數(shù)中去調(diào)用function1方法
4、對象的變量
class Person{
  String name;  int age;
}

在java中，如果要遍歷獲取Person屬性值name、age，和屬性類型String、int。都是用反射去實(shí)現(xiàn)的。那么，在小程序中卻比java 簡單粗暴很多。具體實(shí)現(xiàn)

for (var propertyName in Person){           
var name = propertyName               //對象Person的屬性（String、int）
var value = testInfo[propertyName]    // 對象Person的屬性值(name、age)
        }
5、export使用

在調(diào)用一個(gè)類中的方法或者屬性值時(shí)，必須要在被調(diào)用的方法和屬性值，定義的時(shí)候用export聲明

6、disableScroll使用

問題描述：
 有時(shí)候，小程序跑在蘋果手機(jī)上時(shí)，會(huì)左右滑動(dòng)退出，也會(huì)上下滑動(dòng)，這樣體驗(yàn)不好。這個(gè)時(shí)候要禁止滑動(dòng)。

 在app.json中，將disableScroll值設(shè)置為true 就可以了：  
 "window": {          
 "disableScroll": true
      }
7、頁面page數(shù)據(jù)的獲取與設(shè)置
  let pages = getCurrentPages()          
  let curPage = pages[pages.length - 1]         //獲取當(dāng)前頁面
          if (curPage.route == url){        //比較獲取的頁面的url是否跟實(shí)際的一致(如url:"pages/order/order")
            curPage.setData({                                //設(shè)置數(shù)據(jù)
              usingOrderList: usingOrderList
            })
          }
8、獲取所有的頁面
          let pages = getCurrentPages()            // 獲取上一個(gè)頁面
          let prePage = pages[pages.length - 2]          //給頁面設(shè)置數(shù)據(jù)
          prePage.setData({
            refreshUserInfo:true
          })          //返回到上一個(gè)頁面
          wx.navigateBack({
            delta: 1
          })

注意事項(xiàng)：
 調(diào)用getCurrentPages()不需要在page環(huán)境中(可以視為Android中的Context環(huán)境)，可以在任何地方直接獲取，即util等自定義類中同樣生效。類似的還有wx.開頭的方法

9、showToast時(shí)長設(shè)置失效問題
  let title = new String(msg)  //延時(shí)彈toast,是為了解決有時(shí)候在接口請求后，設(shè)置的duration時(shí)間不起作用
  setTimeout(function () {
    wx.showToast({
      title: title,
      duration: 1200,
      icon: "none"
    })
  }, 100)
10、reLaunch跳轉(zhuǎn)失效問題
     //延時(shí)跳轉(zhuǎn),是為了解決有時(shí)候wx.reLaunch不起作用，設(shè)置的時(shí)間不起作用
    setTimeout(function(){
      wx.reLaunch({
        url: '/pages/home/home'
      })
    },100)

感謝各位的閱讀！關(guān)于“小程序中常用的語法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前題目：小程序中常用的語法有哪些-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article38/dcoepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、云服務(wù)器、App開發(fā)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站營銷、標(biāo)簽優(yōu)化

廣告

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

網(wǎng)站優(yōu)化排名