微信小程式的基礎知識儲備-小程式開發-PHP中文網

#資源路徑說明

#template內引入靜態資源，如image、video等標籤的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檔案或script標籤內（包括renderjs等）引入js檔案時，可以使用相對路徑和絕對路徑。

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

登入後複製

css檔案或style標籤內引入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檔案或style標籤內引用的圖片路徑可以使用相對路徑也可以使用絕對路徑，需要注意的是，有些小程式端css檔案不允許引用本機檔案

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

登入後複製

生命週期

應用生命週期

#函數名稱##onHide



說明
#onLaunch	當uni-app 初始化完成時觸發（全域只觸發一次）
onShow	當uni-app 啟動，或從後台進入前台顯示

當uni-app 從前台進入後台

onError

當uni-app 報錯時觸發頁面生命週期#函數名稱#onLoad監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用於頁面傳參）onShow監聽頁面顯示。頁面每次出現在螢幕上都會觸發，包括從下級頁麵返回露出目前頁面#onReady監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發onHide監聽頁面隱藏##onUnloadonResize##onPullDownRefresh監聽使用者下拉動作，一般用於下拉刷新#onReachBottom頁面上拉觸底事件的處理函數## onTabItemTaponShareAppMessage #onPageScroll#onNavigationBarButtonTap








監聽頁面卸載
#監聽視窗尺寸變化





點選tab 時觸發，參數為Object
使用者點選右上角分享
監聽頁面滾動，參數為Object

監聽原生標題列按鈕點選事件，參數為Object

onBackPress

監聽頁面返回，返回event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或android 返回鍵；navigateBack表示來源是uni.navigateBack

#onNavigationBarSearchInputChanged監聽原生標題列搜尋輸入框輸入內容變更事件#原生#onNavigationBarSearchInputConfirmeds監聽標題列搜尋輸入框搜尋事件，使用者點擊軟鍵盤上的「搜尋」按鈕時觸發監聽原生標題列搜尋輸入框點選事件Vue生命週期函數名稱說明beforeCreate—created —beforeMount—#mounted—


	onNavigationBarSearchInputClicked

########################################### ###beforeUpdate######—############updated######—###########beforeDestroy###### —############destroyed######—#############

路由

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;}

登入後複製