1.簡述微信小程序原理
微信小程序采用JavaScript、WXML、WXSS三種技術進行開發,本質就是一個單頁面應用,
所有的頁面渲染和事件處理,都在一個頁面內進行,但又可以通過微信客戶端調用原生的各種接口
微信的架構,是數據驅動的架構模式,它的UI和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現
小程序分為兩個部分webview和appService。其中webview主要用來展現UI,appService用來處理業務邏輯、
數據以及接口調用。他們在兩個進程中運行,通過系統層JSBridge實現通信,實現UI的渲染、事件的處理
2.簡單描述下微信小程序的相關文件類型
微信小程序項目結構主要有四個文件類型
- WXML:(WeiXin Markup Language）:是框架設計的一套標簽語言,結合基礎組件、事件系統,可以構建出頁面結構。內部主要是微信自己定義的一套組件
- WXSS: (WeiXin Style Sheets)是一套樣式語言,用於描述WXML的組件樣式
- js 邏輯處理,網絡請求
- json小程序設置,如頁面注冊,頁面標題及tabBar
主要文件
- app.json必須有這個文件,如果沒有這個文件,項目無法進行,因為微信框架把這個作為配置文件入口,整個小程序的全局配置。包括頁面注冊,網絡設置,以及小程序的window背景色,配置導航條樣式,配置默認標題
- app.js必須要有這個文件,沒有也是會報錯!但是這個文件創建一下就行,什么都不需要寫以后我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變量
- app.wxss可選
3.小程序的雙向綁定和vue哪里不一樣
小程序直接this.data的屬性是不可以同步到視圖的,必須調用:
this.setData({ // 這里設置 })
4.小程序的wxss和css有哪里不一樣的地方
WXSS和CSS類似,不過在CSS的基礎上做了一些補充和修改
- 尺寸單位 rpx
rpx響應像素,可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在iphone6上,屏幕寬度為375px,
- 共有750個物理像素,則750rpx=375px=750物理像素使用@import標識符來導入外聯樣式。@import后跟需要導入的外聯樣式表的相對路徑,用;表示語句結束
/** index.wxss **/ @import './base.wxss'; .container{ color: red; }
5.小程序頁面間有哪些傳遞數據的方法
使用全局變量實現數據傳遞在app.js文件中定義全局變量globalData,將存儲的信息存放在里面
// app.js App({ // 全局變量 globalData: { userInfo: null } })
使用的時候，直接使用 getApp() 拿到存儲的信息
- 使用 wx.navigateTo與 wx.redirectTo 的時候，可以將部分數據放在 url 里面，並在新頁面 onLoad 的時候初始化
//pageA.js // Navigate wx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male', }) // Redirect wx.redirectTo({ url: '../pageD/pageD?name=raymond&gender=male', }) // pageB.js ... Page({ onLoad: function(option){ console.log(option.name + 'is' + option.gender) this.setData({ option: option }) } })
需要注意的問題:
wx.navigateTo和wx.redirectTo不允許跳轉到tab所包含的頁面
onload只執行一次
- 使用本地緩存Storage相關