uniapp エントリーレベル nvue クライミングピット記録の分析

<テンプレート>
	<div>
        <テキスト>{{テキスト}}</テキスト>
    </div>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		データ（） {
			戻る {
				テキスト: 'Hello World'
			}
		}
	}
</スクリプト>

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <画像スタイル="幅: 400px;高さ: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]"></画像>
</div>

<style src="@/common/test.css"></style>
<スタイル>
   。テスト {
        色: #E96900;
   }
</スタイル>

DOMモジュールをweex.requireModule('dom')に追加します。
domModule.addRule('fontFace', {
    'fontFamily': "アイコンフォント2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

uni.setStorageSync('テスト', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})

<スクリプト>
    エクスポートデフォルト{
        作成された() {
        	console.log("nvue が作成されました!");
            タイムアウトを設定する(() => {
                uni.getStorage({
                	キー: 'テスト',
                    成功: (res) => {
                    	console.log("前のページから渡されたデータを取得します" + res.data)
                    }
                })
            },200)
        }
    }
</スクリプト>

<テンプレート>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。 </テキスト>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。</text>
            </div>
        </div>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
    }
</スクリプト>
<スタイル>
    .アイテム {
        背景色: #fff;
        下部マージン: 50px;
    }
    .headImg{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: #555;
    }
    .rgtボックス{
        背景色: #fff;
    }
</スタイル>

<テンプレート>
    <div style="background-color: #ccc;flex-direction: column;">
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>短いテキスト、短いテキスト</text>
            </div>
        </div>
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>ここには長いテキストがあります、 ...</text>
            </div>
        </div>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト {}
</スクリプト>
<スタイル>
    。アイテム {
        背景色: #fff;
        下部マージン: 50px;
    }
    .headImg{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: #555;
    }
    .rgtボックス{
        幅: 600ピクセル;
        最小高さ: 100px;
        左マージン: 130px;
        上マージン: -100px; 
        背景色: #fff;
    }
</スタイル>