目次
API 構文の概要
1. ボ​​ックス モデル Flex
1. flex-wrap:
2. justify-content: 親ビュー内ですべての子ビューが表示される位置
3. align-content
4. align-items
5. 例
2. js 関連の api
1、変数
2. 基本データ型 Boolean
3. 関数
4. オブジェクト変数
5、export使用
6、disableScroll使用
7、页面page数据的获取与设置
8、获取所有的页面
9、showToast时长设置失效问题
10、reLaunch跳转失效问题
ホームページ WeChat アプレット ミニプログラム開発 小規模なプログラムで一般的に使用される構文の紹介

小規模なプログラムで一般的に使用される構文の紹介

Sep 18, 2018 pm 04:30 PM
アプレット

この記事では、小規模なプログラムでよく使用される文法について紹介します。必要な方は参考にしていただければ幸いです。

次に、初心者の視点から始めます。もちろん、以下の記事では、小さなプログラムの知識ポイントを 1 つずつ詳しく紹介するわけではありません。主に Android のいくつかのアイデアを比較します。 、個人的な考えを表現します。

API 構文の概要

1. ボ​​ックス モデル Flex

1. flex-wrap:

nowrap (デフォルト): 行の折り返しなし。
ラップ: 最初の行を先頭にしてラップします。
ラップ-リバース: ラップ、最初の行は以下です。

2. justify-content: 親ビュー内ですべての子ビューが表示される位置

flex-start (デフォルト値): 左揃え
flex-end: 右揃え
center: 中央に配置
*space-between: 両端を揃え、項目間の間隔が均等になります。したがって、これは、各サブビューが 1 つのシェアを占めるウェイト レイアウトを設定すると考えることができます。サブビューが 1 つだけの場合、これは flex-start
*space-around と同等です。行に均等に分散され、両側にギャップ スペースの半分が残ります。項目間のスペースは、項目と境界線の間のスペースの 2 倍です。子ビューが 1 つだけある場合 (親ビューに作用する)、子ビューは実際には中央揃えで配置されます。

スペース間のプロパティ グラフィック表示:

小規模なプログラムで一般的に使用される構文の紹介

3. align-content

コンテンツは中央に配置されます。複数行のフレックス コンテナにのみ適用され、単一行は機能しません。
flex-start: 交差軸の開始点に位置合わせされます。
フレックスエンド: 交差軸の終点に位置合わせされます。
中心: 交差軸の中点に位置合わせされます。
space-between: 交差軸の両端に合わせて、軸間の間隔が均等になるように配置します。
space-around: 各軸の両側の間隔が等しい。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。
ストレッチ (デフォルト値): 軸は交差軸全体を占めます。

4. align-items

親ビュー内の各ビューを整列させます。すべてのフレックスコンテナに適用されます。
flex-start: 交差軸の開始点を揃えます。
flex-end: 交差軸の終点を揃えます。
center: 交差軸の中点を揃えます。
ベースライン: アイテムのテキストの最初の行のベースライン配置。
ストレッチ (デフォルト値): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占めます。

5. 例

1) コンテナの子ビューを中央に表示します
コンテナ(親ビュー)に追加します:

 display: flex;
 align-items: center;
ログイン後にコピー

2) FramLayout レイアウトと同様に、View レイアウトを最下部または最上部のレイヤーに表示します。
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 のみ、および"" 空の文字列は true は false、その他はすべて false
3) オブジェクトの場合、オブジェクトが null であることを除き、それは false、その他はすべて true です。このオブジェクトが空のオブジェクトであっても {}

3. 関数

(1) 関数定義
ページ内の定義:

  onShow: function (params) {
    //方法体
  },
ログイン後にコピー

ページ以外の定義:

function test(params){
    //方法体}
ログイン後にコピー

概要:
1. 最初の定義では最後に「,」カンマを追加する必要がありますが、2 番目のメソッドでは
を追加できません 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 で、人物属性値の名前、年齢、および属性タイプ 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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Python を使用して WeChat アプレットを開発する Python を使用して WeChat アプレットを開発する Jun 17, 2023 pm 06:34 PM

Python を使用して WeChat アプレットを開発する

小さなプログラムでも反応できますか? 小さなプログラムでも反応できますか? Dec 29, 2022 am 11:06 AM

小さなプログラムでも反応できますか?

WeChat ミニ プログラムにカードめくり効果を実装する WeChat ミニ プログラムにカードめくり効果を実装する Nov 21, 2023 am 10:55 AM

WeChat ミニ プログラムにカードめくり効果を実装する

uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法 uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法 Oct 20, 2023 pm 02:12 PM

uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法

ミニプログラム登録の操作方法 ミニプログラム登録の操作方法 Sep 13, 2023 pm 04:36 PM

ミニプログラム登録の操作方法

アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始 アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始 Oct 31, 2023 pm 09:25 PM

アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始

Python で簡単なチャット プログラムを作成するためのチュートリアル Python で簡単なチャット プログラムを作成するためのチュートリアル May 08, 2023 pm 06:37 PM

Python で簡単なチャット プログラムを作成するためのチュートリアル

Java 言語による WeChat アプレット開発の概要 Java 言語による WeChat アプレット開発の概要 Jun 09, 2023 pm 10:40 PM

Java 言語による WeChat アプレット開発の概要

See all articles