一.<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;目前仅支持内联使用。