小規模なプログラム開発経験のまとめ-ミニプログラム開発-php.cn

小規模なプログラム開発経験のまとめ

hzc

リリース： 2020-06-15 10:20:50

転載

3249 人が閲覧しました

1. WXML

1.1: wx:if および wx:else

フロントエンドは情報リストを取得します。バックエンドインターフェースを介して、データが存在する場合はデータの内容が表示され、存在しない場合は見つからない情報が表示されます。 if-else がこのスイッチにブール値を使用する場合、ページは最初は false 状態で表示され、次に true に更新されます。つまり、情報が見つからないというコンテンツがフラッシュされます。理想的。

<view wx:if="{{true}}">
	<text>这是信息列表</text>
</view>
<view wx:else>
	<text>找不到信息</text>
</view>

ログイン後にコピー

最良の方法は、先頭で info を null に設定します、

data:{
    info:null
}

ログイン後にコピー

<view wx:if="{{info === 1}}">
	<text>这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
</view>

ログイン後にコピー

1.2: wx:for

for ループwx:for-item="item" wx:key="item"

1.3: ブロックタグ

wx:if、wx:for、wx: を追加するには: 1.4: テンプレートコンポーネント template

は、パブリックページモジュール/コンポーネントであり、で直接使用できます。 wxml またはインポートされた方法。 CSS が関与する場合は、wxss の @import 経由で導入する必要があります。

/**
* 方式一：直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

ログイン後にコピー

1.5: スクリプト言語 wxs

は、特に wxml ページ上で実行されるスクリプト言語です。JavaScript とは異なり、ES6 構文の使用をサポートしておらず、参照することはできませんjs.

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

ログイン後にコピー

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

ログイン後にコピー

2. WXSS

2.1: 背景アイコン

完全な背景アイコンのみが使用できます。アプレットの背景 https 画像パス、プロジェクトでのアイコンの使用方法:

Vector svg: 完璧なスケーラビリティ、調整が簡単 (色、サイズなど);

data-uri: 画像サイズは 20Kb 未満です。base64 を使用してください。 [フロントエンドイメージの最適化導入方法の分析][segmentfault.com/a/119000001…]
大きなファイル：wxmlでイメージタグを直接使用
外部アイコンの紹介: ネットワークパスを使用してローカルにダウンロードして使用できる Alibaba ベクターライブラリなど。
#2.2: スタイルのリセット

2.3: フォントファミリー標準仕様

font-family: 
/*西文：*/
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文：*/
PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

ログイン後にコピー

2.4: rpx 単位の合理的な使用

rpx は画面幅のパーセンテージに相当する相対単位であり、次の状況では使用しないことをお勧めします。

##font-size と border-width; アニメーションアニメーションにはディスプレイスメントの変換が含まれます。一部のマシンが rpx を px に変換し、262.89px などの小数が表示される場合、WeChat はその値を 262px に引き下げます。、1pxのギャップが生じます。
QR コードなどのキャンバス描画、写真の共有など。
#3. JavaScript

3.1: wx.request メソッドの二次カプセル化

3.2: ページのライフサイクル

onLoad: ページの読み込み中、ページは 1 回だけ呼び出されます。ページパラメータオプションを取得できます。