uniappの最も包括的な知識のまとめ

ユニアプリの紹介

uni-appdcloud社が開発したマルチターミナルフュージョンフレームワークで、1回の開発とマルチターミナル運用は1回の使用です。+
を使用してすべてのフロントエンド アプリケーションのフレームワークを開発することにより、開発者はコードのセットを記述して、マルチターミナル混合開発ハイブリッドを実現します。iOS、Android、Web (レスポンシブ)、およびさまざまな小さなプログラム (WeChat/ Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao)、クイックアプリ、その他のプラットフォームVue.js小程序的api

ユニアプリ公式サイトの詳細はこちら

準備ツール

uni 開発を使用する前に、以下をインストールする必要があります。

• Hbuilderx (開発およびコンパイル ツール)
• WeChat ミニ プログラム開発ツール (WeChat ミニ プログラム プレビュー テスト)
• Android エミュレータ/実機 (市場には多くのシミュレータがあります)

予防：

hbuilder の最初の実行では、対応するプラグインをダウンロードする必要があります.
Android エミュレーターに実行すると、ビューに違いがあります.
実行には一定の時間がかかる場合があります
. ページの更新や再起動が必要になる場合があります. -走る。

ユニアプリインターフェースの紹介

1. プロジェクトを作成する

2. プロジェクトを複数の端末に実行する方法

2.1 hbuilderx でのh5実行

ヒント: 最初の実行では、プラグインをインストールする必要があります
. プラグインが正常にインストールされたら、ビルトイン操作を閉じて、もう一度開きます.

2.2 小さなプログラムの実行

ヒント: 最初の実行のために設定する必要があり、その後、直接実行することができます.
01
WeChat 開発ツール設定サーバー ポートで WeChat 開発ツールのアドレスを構成します 02 HBuilderx
03 実行設定
03.1 WeChat アプレット ID を構成します
04 実行（上記設定完了後、実行可能）

01 WeChat 開発ツールでの設定 - サーバーポート

02 HBuilderx は WeChat 開発ツールのアドレスを構成します

03 実行設定

03.1 WeChat アプレット ID の構成

04ラン

アプレットの実行に成功した事例

2.3 アプリ || シミュレータ実行中

注
:シミュレーターごとに
異なる
ポート番号が
あります
。アプリがデータ不足にならない理由は十分に書かれていません.最初の実行では、エミュレータのポート番号を構成する必要があります.

01 エミュレータまたは携帯電話を開く
02 エミュレータのポートを設定する
03 エミュレータを実行する

01 エミュレータまたは携帯電話を開く

02 エミュレータのポートを設定する


03 エミュレーターへの実行
03.1 初回実行時にプラグインをダウンロードする必要がある

03.2 プラグインが正常にインストールされ、実行を開始する

3. ビューの構文

3.1 テンプレート構文

3.1.1. テキストのレンダリング

{
    
    {
    
    表达式}}
v-text=“表达式”

//简单的js运算
{
    
    {
    
    2+3}}

//js方法调用
{
    
    {
    
    title.length}}
{
    
    {
    
    title.split("").reverse().join("")}}

//3元运算符
<view>{
    
    {
    
    title.length>15?'长度很长':'字少事大'}}</view>

v-html 富文本

3.1.2. 条件付きレンダリング

v-if
v-else-if
v-else
v-show
三元运算符

3.1.3. リストオプション

1. 文字列、数値、リスト、およびオブジェクトをすべてトラバースできます
2. < view v-for="(item,index) in list" ：key="index">{ {index+1}} { {item}} </view>
3. 兄弟要素間のキー値が一意であることを確認してください

3.1.4. プロパティバインディング

<button v-bind:disabled=“true”>
<button :disabled="true"> 

3.1.5. フォームバインディング

01 默认
:value="单向绑定"

02 input
v-model=“双向绑定”

03 
@change=“$event.detail.value”
事件，事件的值$event.detail.value

3.1.6. イベント

01 イベントバインディング

<button v-on:click="响应"></button>
 简写绑定
<button @ click="响应"> </button>

02 イベントインライン処理

<view @ click="num++">  </view>

03 イベント応答関数 (メソッドで定義された関数)

<view @ click="say">  </view>

04イベントパラメータの受け渡し

//$event 是一个固定写法  代表事件对象

不写参数
<view @ click="say">  </view>  
等同于 
<view @ click="say（）">  </view>  
等同于
<view @ click="say（$event)">  </view>

	say(str = "你好") {
    
    
       // 弹出提示
        uni.showModal({
    
    
         title: str
      })
                        }

3.1.7. ユニアプリページ

ページ構成pages.json:

• Global style globalStyle: The style of the default page will apply the global
  style. ページにスタイル構成が記述されている場合は、その構成を使用してグローバル構成をオーバーライドします

• Page pages:pathページ パス;styleページ スタイル

3.1.8. ビューのオプション

データ データ
メソッド メソッド
計算された計算
ウォッチ 監視
ディレクティブ 命令
フィルタ フィルタリング

3.1.9 ユニアプリのライフサイクル

vue ライフサイクル

アプレット ライフサイクル

アプレット グローバル メソッド

アプリ グローバル メソッド

3.1.10. コンポーネント

4.ルーティング

4.1 ルーティング コンポーネント

ルーティング コンポーネントの公式ドキュメント

ナビ（ナビゲーター）

<navigator url="../options/options" open-type="reLauch"></navigator>
//tip：文件名不能加后缀 .vue
//url 跳转的页面
//open-type打开类型：
//navigate跳转
//redirect重定向（当前页面不留历史纪录）；
//navigateBack  返回
//reLauch 重启
//switchTab  跳转底部栏

4.2 ルーティングパラメータ

文法：

传递：
<navigator url="../options/options?count=5&title=life">选项</navigator>

接收：
onLoad(option) {
    
          
​    //option的值
    this.count = option.count
    uni.setNavigationBarTitle({
    
    
    title: option.title
                        })
                },

ケース

4.3 ルーティング API

4.3.1 ルーティング ジャンプ

methods: {
    
    
  goOption() {
    
    
              uni.navigateTo({
    
    
               url: "../options/options"
                                })
                        },
}

4.3.2 リダイレクト

uni.redirect({
    
    
    url: "../options/options?count=100&title=来自js跳转"
                   })

4.3.3 戻る

 uni.navigateBack({
    
     })

4.3.4 ボトムバーの切り替え

 uni.switchTab({
    
     })

4.3.5 再起動

 uni.reLunch({
    
     })

4.4 ルーティング構成

公式のルーティング構成ドキュメント:

4.5 現在のページを取得 getApp

01 globalData:{num:100}
app.vueで使用するページを定義する 02 アプリに戻る

var app=getApp（）

03 globalData の値を取得する

onShow(){
    
    
this.num=app.globalData.num
​}

04 globalData 値の更新

addNm(){
    
    
   app.globalData.num++;
​ this.num=app.globalData.num
​}

ケース

4.6 ページスタック情報の取得 getCurrentPages

5. 条件付きコンパイル

条件付きコンパイルの目的: プラットフォームが異なれば、表示される機能や機能も異なります

5.1 テンプレートの条件付きコンパイル:

• APPアプリ側
• H5ウェブページ
• MPミニ プログラム: MP-WEIXINWeChat ミニ プログラムの
  構文:

<!-- # ifdef H5 -->
H5：下载app 获取优惠卷
<!-- # endif -->

ケース

5.2 CSS 条件付きコンパイル

/* #ifdef APP */
     .active{
    
    color:red}
/* #endif */

5.3 js 条件付きコンパイル

// #ifdef APP-PLUS
uni.showModal({
    
    
        title:"你好App用户"
})
// #endif

css+js ケース

5.4 条件付き構成ページ pages.json

5.4.1 ページ ナビゲーション バーのスタイルを構成する

“style”:{
    
    
  "h5":{
    
    
      "titleNView":{
    
    
          "titleText":"我是H5"
       }
  },
  "app-plus": {
    
    
      "titleNView":false //隐藏导航栏
  }
}

ケース

5.4.2 表示ページのパスを設定する

        // #ifdef MP-WEIXIN	|| APP	
{
    
    
        "path":"pages/condition/we",
        "style":{
    
    
                "navigationBarTitleText": "小程序专有页面"
        }
},
// #endif

ケース

終わり...