首頁 > 微信小程式 > 小程式開發 > 小程式中常用的語法的介紹

小程式中常用的語法的介紹

不言
發布: 2018-09-18 16:30:47
原創
4015 人瀏覽過

這篇文章帶給大家的內容是關於小程式中常用的語法的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

接下來我將會從一個初學者的身份,當然,此後的文章不會對小程式的知識點一一都做很細緻的介紹,主要是對比Android的一些思想,進行一些個人的想法闡述。

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差異還是很大的

   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环境中(可以视为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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板