目次
2.rpxとインターフェースの適応、デザインドラフトは750rpxです
1. レイアウトはフレックスレイアウトを使用します
幅適応サイズは rpx を使用し、全画面幅は 100% を使用し、uniapp のデフォルトのデザインドラフトは 750 です (ツール - 「設定」エディター構成)。
2.rpxとインターフェースの適応、デザインドラフトは750rpxです
<view style="width: 375rpx;">121</view>常にディスプレイの半分、適応サイズ
3. ホーム ページに tabBar が表示されない
ページ内のページを tabBar に構成しないと、tabBar がホーム ページに表示されなくなります。
4. ジャンプページ/スタートジャンプページ
1. ナビゲーター: ローカル ページのみをリダイレクトできます。ターゲット ページは、 pages.json に登録する必要があります。そうしないと、ページがリダイレクトされるときにエラーが報告されます。
2.uni.navigateTo(): 特定のインターフェースにジャンプします。
デバッグ時は、特定のページ構成にジャンプし、pages.json で構成します。
,
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/info/info", //启动页面，必选
"query": "newsid=5158607" //启动参数，在页面的onLoad函数里面得到。
}
]
}5. uniapp で渡されるページのライフサイクル/値
vue3 のセットアップ構文では、onLoad、onShow を使用する場合、これらの関数を導入する必要があります
import {
onLoad
} from '@dcloudio/uni-app';値渡し
uni.navigateTo({
url: '/pages/test/test?id=1'
});受信値
onLoad((options) => {
console.log('接收传值：', options.id)
});6. 色の使い方
uni.scss で色を定義する
$uni-color-primary: #FF0099;scssで使用される
.b{
color: $uni-color-primary;
}7. フォントの使用
1. iconfont-Alibaba ベクター アイコン ライブラリでフォントをダウンロード
2. ファイルを入れて ttf を選択します
3. 引用
<style lang="scss">
@font-face {
font-family: test-font;
src: url('./static/fonts/Alimama_DongFangDaKai_Regular.ttf');
}
</style>4. 使用します。グローバルに使用する場合は、App.vue で使用します。
.b {
font-family: test-font;
}5.効果
オンライン @font-face ジェネレーター — Transfonter が Base64 を変換
8. SCSS/CSSのjsの値を取得する
jsコード
const sysHeight = (uni.getWindowInfo().screenHeight - 200).toString() + 'px'SCSS/CSS
height: v-bind('sysHeight');