WeChatミニプログラムの基礎知識予備-ミニプログラム開発-php.cn

リソースパスの説明

画像、ビデオ、その他のタグの src 属性などの静的リソースをテンプレートに導入する場合、相対パスまたは絶対パスを使用できます。

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

ログイン後にコピー

js ファイルまたはスクリプトタグ ( renderjs などを含む）js ファイルを導入する際には、相対パスと絶対パスを使用できます。 js ファイルは、/

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from &#39;@/common/add.js&#39;
// 相对路径
import add from &#39;../../common/add.js&#39;

ログイン後にコピー

で始まる / の導入をサポートしていません。css ファイルを css ファイルまたはスタイルタグに導入する場合 (同じことが scss およびless ファイルにも当てはまります) )、相対パスと絶対パスを使用できます。

/* 绝对路径 */
@import url(&#39;/common/uni.css&#39;);
@import url(&#39;@/common/uni.css&#39;);
/* 相对路径 */
@import url(&#39;../../common/uni.css&#39;);

ログイン後にコピー

CSS ファイルまたはスタイルタグで参照される画像パスには、相対パスまたは絶対パスを使用できます。一部のアプレット CSS ファイルはローカルファイルを参照できないことに注意してください。

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

ログイン後にコピー

#ライフサイクル

アプリケーションライフサイクル

##関数名onLaunchonShowonHideonError

説明
ユニアプリの初期化が完了するとトリガーされます (グローバル) 1 回のみトリガーされます)
ユニアプリの開始時、またはバックグラウンドからフォアグラウンドに入ったとき
ユニアプリがフォアグラウンドからバックグラウンドに入ったとき
ユニアプリがエラーを報告したときにトリガーされる

#ページのライフサイクル

##関数名説明onLoadページの読み込みをリッスンします。パラメータは前のページで渡されたデータです。パラメータのタイプはオブジェクトです (ページパラメータに使用されます) )ページの表示を聞きます。ページが画面に表示されるたびにトリガーされます。これには、下位レベルのページポイントから戻って現在のページを表示する場合も含まれます。最初のページの完了をリッスンします。ページのレンダリング。レンダリング速度が速い場合、ページエントリアニメーションが完了する前にがトリガーされることに注意してください。 #onUnloadonResizeonPullDownRefreshonReachBottom onTabItemTaponShareAppMessage #onPageScroll#ページのスクロールを聞きます。パラメータは Object##onNavigationBarButtonTap関数名


	onShow
	onReady
	#onHide
ページのアンロードをリッスンします
ウィンドウサイズの変更をリッスン
ユーザーのプルダウンアクションを監視します。通常はプルダウンの更新に使用されます。
ページプルダウンイベントの処理関数
タブがクリックされるとトリガーされ、パラメータは Object です
ユーザーが上部をクリックします右隅で共有します
	## です#ネイティブのタイトルバーボタンのクリックイベントをリッスンします。パラメーターは Object
onBackPress	ページリターンをリッスン、リターンイベント = {from:backbutton, navigateBack}、 backbutton は、ソースが左上隅の戻るボタンまたは Android のリターンキーであることを示し、navigateBack は、ソースが uni.navigateBack
onNavigationBarSearchInputChanged	Listen to であることを示します。ネイティブタイトルバーの検索入力ボックスの入力コンテンツ変更イベント
onNavigationBarSearchInputconfirmeds	ユーザーが「検索」ボタンをクリックしたときにトリガーされる、ネイティブのタイトルバーの検索入力ボックスの検索イベントをリッスンします。ソフトキーボード上で
#onNavigationBarSearchInputClicked	ネイティブタイトルバーの検索入力ボックスのクリックイベントを聞く
	##Vue ライフサイクル

説明

##作成前
#—

#作成済み#マウント前—マウント済み#更新前更新#— —#破壊—

# —

#—

#破壊前

路由

uni-app路由统一有框架管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转

页面栈

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

运行环境判断

// uEnvDev
if (process.env.NODE_ENV === &#39;development&#39;) {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === &#39;production&#39;) {
    // TODO
}

ログイン後にコピー

页面样式与布局

单位

px为屏幕像素,rpx响应式px,它们之间的换算公式为750 * 元素在设计稿中的宽度 / 设计稿基准宽度

样式导入

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }</style>

ログイン後にコピー

flex布局

<style>/*主要有两个概念 容器与项目*/
 .container{
    display: flex; 
    flex-direction:row;
    flex-wrap:nowrap;
    flex-flow: row nowrap;/*简写方式*/
    justify-content: center;/*定义项目在主轴上的对齐方式*/
    align-items:center;/*定义项目在交叉轴上如何对齐*/}.item {
  order: 1;
  flex-grow:0;/*定义项目的放大比例*/
  flex-shrink:1;/*定义了项目的缩小比例*/
  align-self:auto;/*单个项目有与其他项目不一样的对齐方式*/}</style>

ログイン後にコピー

定义全局变量

共用模块
Vue.prototype
globalData
Vuex

参考文章 uni-app全局变量的几种实现方式

class与style绑定

支持数组合对象的方式

计算属性

计算属性是基于它们的响应式依赖进行缓存的

条件渲染

v-if v-show

列表渲染

v-for 注意携带key

事件处理

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件{
    click: &#39;tap&#39;,
    touchstart: &#39;touchstart&#39;,
    touchmove: &#39;touchmove&#39;,
    touchcancel: &#39;touchcancel&#39;,
    touchend: &#39;touchend&#39;,
    tap: &#39;tap&#39;,
    longtap: &#39;longtap&#39;, //推荐使用longpress代替
    input: &#39;input&#39;,
    change: &#39;change&#39;,
    submit: &#39;submit&#39;,
    blur: &#39;blur&#39;,
    focus: &#39;focus&#39;,
    reset: &#39;reset&#39;,
    confirm: &#39;confirm&#39;,
    columnchange: &#39;columnchange&#39;,
    linechange: &#39;linechange&#39;,
    error: &#39;error&#39;,
    scrolltoupper: &#39;scrolltoupper&#39;,
    scrolltolower: &#39;scrolltolower&#39;,
    scroll: &#39;scroll&#39;}

ログイン後にコピー