zoukankan      html  css  js  c++  java
  • 移动端开发基础【10】template和black以及uniapp的几种支持

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

    官网:http://www.lenbor.com
  • 相关阅读:
    五.hadoop 从mysql中读取数据写到hdfs
    四.idea本地调试hadoop程序
    eclipse 中运行 Hadoop2.7.3 map reduce程序 出现错误(null) entry in command string: null chmod 0700
    hadoop HDFS常用文件操作命令
    三.hadoop mapreduce之WordCount例子
    Maven学习之(三)Maven插件创建web项目
    Eclipse下把jar包放到工程lib下和通过buildpath加载有什么不同(解决找不到类的中级方法)
    Java ExecutorServic线程池(异步)
    Lo4j(二)级别和优化
    Lo4j(一)初识
  • 原文地址:https://www.cnblogs.com/lenbor/p/12966706.html
Copyright © 2011-2022 走看看