微信小程序的基礎(chǔ)知識儲備

閱讀 89108  ·  發(fā)布日期 2020-08-24 17:26  ·  溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】 【相關(guān)學(xué)習(xí)推薦:微信小程序開發(fā)教程】資源路徑說明template內(nèi)引入靜態(tài)資源,如image、video等標(biāo)簽的src屬性時,可以使用相對路徑或者絕對路徑 js文件或script標(biāo)簽內(nèi)(包括renderjs等)引入js文件時,可以使用相對路徑和絕對路徑。js文件不支持使用/開頭的方式引入// 絕對路徑,@指向項目根目錄... 【溫州小程序開發(fā),溫州微信公眾號,平陽做網(wǎng)站,平陽網(wǎng)站建設(shè)公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號,山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...

微信小程序的基礎(chǔ)知識儲備

【相關(guān)學(xué)習(xí)推薦:
微信小程序開發(fā)教程】資源路徑說明template內(nèi)引入靜態(tài)資源,如image、video等標(biāo)簽的src屬性時,可以使用相對路徑或者絕對路徑 js文件或script標(biāo)簽內(nèi)(包括renderjs等)引入js文件時,可以使用相對路徑和絕對路徑。
js文件不支持使用/開頭的方式引入// 絕對路徑,@指向項目根目錄,在cli項目中@指向src目錄 import add from '
@/common/add.js'
// 相對路徑 import add from '
../../common/add.js'
css文件或style標(biāo)簽內(nèi)引入css文件時(scss、less文件同理),可以使用相對路徑和絕對路徑。
/* 絕對路徑 */ @import url('
/common/uni.css'
);
@import url('
@/common/uni.css'
);
/* 相對路徑 */ @import url('
../../common/uni.css'
);
css文件或style標(biāo)簽內(nèi)引用的圖片路徑可以使用相對路徑也可以使用絕對路徑,需要注意的是,有些小程序端css文件不允許引用本地文件/* 絕對路徑 */ background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */ background-image: url(../../static/logo.png);
生命周期應(yīng)用生命周期函數(shù)名說明onLaunch當(dāng)uni-app 初始化完成時觸發(fā)(全局只觸發(fā)一次)onShow當(dāng) uni-app 啟動,或從后臺進(jìn)入前臺顯示onHide當(dāng) uni-app 從前臺進(jìn)入后臺onError當(dāng) uni-app 報錯時觸發(fā)頁面生命周期函數(shù)名說明onLoad監(jiān)聽頁面加載,其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù),參數(shù)類型為Object(用于頁面?zhèn)鲄ⅲ﹐nShow監(jiān)聽頁面顯示。
頁面每次出現(xiàn)在屏幕上都觸發(fā),包括從下級頁面點返回露出當(dāng)前頁面onReady監(jiān)聽頁面初次渲染完成。
注意如果渲染速度快,會在頁面進(jìn)入動畫完成前觸發(fā)onHide監(jiān)聽頁面隱藏onUnload監(jiān)聽頁面卸載onResize監(jiān)聽窗口尺寸變化onPullDownRefresh監(jiān)聽用戶下拉動作,一般用于下拉刷新onReachBottom頁面上拉觸底事件的處理函數(shù)onTabItemTap點擊 tab 時觸發(fā),參數(shù)為ObjectonShareAppMessage用戶點擊右上角分享onPageScroll監(jiān)聽頁面滾動,參數(shù)為ObjectonNavigationBarButtonTap監(jiān)聽原生標(biāo)題欄按鈕點擊事件,參數(shù)為ObjectonBackPress監(jiān)聽頁面返回,返回 event = {
from:backbutton、 navigateBack}
,backbutton 表示來源是左上角返回按鈕或 android 返回鍵;navigateBack表示來源是 uni.navigateBackonNavigationBarSearchInputChanged監(jiān)聽原生標(biāo)題欄搜索輸入框輸入內(nèi)容變化事件onNavigationBarSearchInputConfirmeds監(jiān)聽原生標(biāo)題欄搜索輸入框搜索事件,用戶點擊軟鍵盤上的“搜索”按鈕時觸發(fā)onNavigationBarSearchInputClicked監(jiān)聽原生標(biāo)題欄搜索輸入框點擊事件Vue生命周期函數(shù)名說明beforeCreate—created—beforeMount—mounted—beforeUpdate—updated—beforeDestroy—destroyed—路由uni-app路由統(tǒng)一有框架管理,開發(fā)者需要在pages.json里配置每個路由頁面的路徑及頁面樣式。
如仍希望采用 Vue Router 方式管理路由,可在插件市場搜索 Vue-Router。
路由跳轉(zhuǎn)uni-app 有兩種頁面路由跳轉(zhuǎn)方式:
使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)頁面棧路由方式頁面棧表現(xiàn)觸發(fā)時機(jī)初始化新頁面入棧uni-app 打開的第一個頁面打開新頁面新頁面入棧調(diào)用 API uni.navigateTo 、使用組件 頁面重定向當(dāng)前頁面出棧,新頁面入棧調(diào)用 API uni.redirectTo 、使用組件 頁面返回頁面不斷出棧,直到目標(biāo)返回頁調(diào)用 API uni.navigateBack 、使用組件 、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵Tab 切換頁面全部出棧,只留下新的 Tab 頁面調(diào)用 API uni.switchTab 、使用組件 、用戶切換 Tab重加載頁面全部出棧,只留下新的頁面調(diào)用 API uni.reLaunch 、使用組件 運行環(huán)境判斷// uEnvDev if (process.env.NODE_ENV === '
development'
) {
// TODO }
// uEnvProd if (process.env.NODE_ENV === '
production'
) {
// TODO }
頁面樣式與布局單位px為屏幕像素,rpx響應(yīng)式px,它們之間的換算公式為750 * 元素在設(shè)計稿中的寬度 / 設(shè)計稿基準(zhǔn)寬度樣式導(dǎo)入flex布局定義全局變量共用模塊Vue.prototypeglobalDataVuex參考文章 uni-app全局變量的幾種實現(xiàn)方式class與style綁定支持?jǐn)?shù)組合對象的方式計算屬性計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的條件渲染v-if v-show列表渲染v-for 注意攜帶key事件處理// 事件映射表,左側(cè)為 WEB 事件,右側(cè)為 ``uni-app`` 對應(yīng)事件{
click: '
tap'
, touchstart: '
touchstart'
, touchmove: '
touchmove'
, touchcancel: '
touchcancel'
, touchend: '
touchend'
, tap: '
tap'
, longtap: '
longtap'
, //推薦使用longpress代替 input: '
input'
, change: '
change'
, submit: '
submit'
, blur: '
blur'
, focus: '
focus'
, reset: '
reset'
, confirm: '
confirm'
, columnchange: '
columnchange'
, linechange: '
linechange'
, error: '
error'
, scrolltoupper: '
scrolltoupper'
, scrolltolower: '
scrolltolower'
, scroll: '
scroll'
}
表單控件綁定推薦使用uni-app的表單組件組件分為全局組件和局部組件都存在類似的操作,即導(dǎo)入,注冊,使用常見問題1、如何獲取上個頁面?zhèn)鬟f的數(shù)據(jù)onLoad(args)2、如何設(shè)置全局的數(shù)據(jù)和全局的方法vuex(uni-app已經(jīng)內(nèi)置了vuex)uni-app自帶統(tǒng)計平臺,只要稍作配制就可以使用uni統(tǒng)計官網(wǎng)地址:
#dcloud.net.cn/ 以上就是微信小程序的基礎(chǔ)知識儲備的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
微信
分享相關(guān)標(biāo)簽:
miniprogram 微信小程本文轉(zhuǎn)載于:
learnku,如有侵犯,請聯(lián)系[email protected]刪除
上一篇:
學(xué)習(xí)在Ubuntu 18.04 上搭建微信小程序和公眾號應(yīng)用開發(fā)環(huán)境
下一篇:
學(xué)習(xí)微信小程序如何使用echarts圖表相關(guān)文章相關(guān)視頻蘋果7plus怎么添加小程序到桌面?zhèn)€體戶怎么注冊微信小程序微信小程序?qū)崿F(xiàn)簽到的日歷功能學(xué)習(xí)在Ubuntu 18.04 上搭建微信小程序和...微信小程序的基礎(chǔ)知識儲備小程序API接口(一)第三方平臺開發(fā)小程序(一)登錄小程序中心
[溫州做小程序]