一.<template>和<block>
Uniapp項目的基本結構是<template></template>里面在包裹一個<view></view>。但是uniapp還支持在<template></template>模板里面嵌套<template></template>和<block></block>,用來列表渲染和條件渲染。
需要注意的是<template/>和<block/>他們不是一個組件,僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
<block/>標簽還有一個好處:uniapp中循環推薦使用block,它在頁面中是不顯示的。
二、ES6支持
對於大部分的ES6 API在uniapp中使用是完全支持的,並且還支持ES7的 await/async語法。
Uniapp上支持哪些ES6 API就不詳細分享了,有興趣的可以去uniapp官網的介紹中去了解。
這里就說三個注意點:
(1)在項目的App端,安卓支持不依賴安卓的版本號。因為uniapp的js代碼運行在自帶的獨立jscore中,所以沒有js的瀏覽器兼容性問題。
(2)Uniapp的vue頁面在安卓低端機上只有CSS瀏覽器有兼容性問題,因為vue 頁面仍然渲染在webview中,受安卓版本影響,太新的CSS語法在低版本不支持。
(3)Uniapp默認不需要在微信工具里面開啟ES6轉換,但是如果用了微信的wxml自定義組件,uniapp編譯器並不會處理這些文件中的ES6代碼,需要去微信工具里面開啟轉換。從HBuilderX調起微信工具時,如果發現工程下有wxcomponents目錄會自動配置微信工程打開es6轉換。
三、NPM支持
在uniapp中支持使用npm安裝第三方包。
(1)初始化npm工程
如果之前沒有使用過npm管理依賴,也就是uniapp項目的根目錄下沒有package.json文件,需要先在uniapp項目的根目錄執行命令初始化npm工程。
命令是:npm init –y
(2)安裝依賴
在uni-app項目的根目錄底下執行安裝npm包的命令:
Npm install packageName –save
(3)在uni-app項目中使用安裝的npm包,使用方法是在js中引入npm包,如下:
Import package from ‘packageName’
Const package=require(‘packageName’)
三、TypeScript支持
在uni-app中使用ts開發,與在Vue.js中的ts開發流程相同,可以參考。需要注意的是,在vue文件的script節點聲明lang=”ts”,聲明lang=”ts”后,該vue文件import引進來的所有vue 組件,均需要使用ts編寫。
四、renderjs
Renderjs是一個運行在視圖層的js,它的功能比WXS更加強大,並且它只支持app-vue和H5平台,其他平台均不支持。
使用renderjs開發可以實現大幅度降低邏輯層和視圖層的通訊損耗,提供高性能視圖交互能力;也可以在視圖層操作dom,運行for web的js庫;並且renderjs以vue組件的寫法運行在view層。
使用方式:
在script節點設置lang為renderjs
<script lang=”renderjs”> Export default { Mounted() { //…. } Methods : { //…… } } </script>
需要注意的是:可以使用dom、bom和API,但不可以直接訪問邏輯層數據;視圖層和邏輯層的通訊方式與WXS一致;觀測更新的數據在view層可以直接訪問到;不要直接引用大型類庫,推薦通過動態創建script方式引用;view層的頁面引用資源的路徑相對於根目錄計算,如:./static/test.js;目前僅支持內聯使用。