移动端开发基础【10】template和black以及uniapp的几种支持

时间:2024-03-09 21:25:34

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