weex<==>nvue书写样式需要注意的点(全部)

weex书写步骤
全局样式规划:将整个页面分割成合适的模块。
flex 布局:排列和对齐页面模块。
定位盒子:定位并设置偏移量。
细节样式处理:增加特定的具体样式。

1.通用样式

/*除此通用样式之外的属性,均不被支持*/
1.单位只支持px和wx(不受屏幕宽度和viewPortWidth影响),不支持相对单位(em、rem)和百分比,vw/vh等;
2. 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。(所以使用padding时应注意,会挤压内容)
3. overflow, 在 Android 平台,Weex 只支持 overflow:hidden。在 iOS 上,Weex 支持 overflow:hidden 和 overflow:visible,默认是 overflow:visible。
4. padding | margin  四个方向都一样可以简写,否则需分别设置
/*		padding {length}: 上、下、左、右四边内边距,默认值 0
		padding-left {length}:左内边距,默认值 0
		padding-right {length}:右内边距,默认值 0
		padding-top {length}:上内边距,默认值 0
		padding-bottom {length}:下内边距,默认值 0*/
5.background | border  |transition 等 不支持简写
/*	 border-style | border-bottom-style:solid ;
	 border-color | border-bottom-color: #E8E8E8;
     border-width | border-bottom-width: 1px;*/
6.Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex,默认值为 column	 

详情见我的weexNative或则css

7.position (这个基本差不多)
	/*	relative 是默认值,指的是相对定位;
		absolute 是绝对定位,以元素的容器作为参考系;
		fixed 保证元素在页面窗口中的对应位置显示;
		sticky 指的是仅当元素滚动到页面之外时,元素会固定在页面窗口的顶部。*/
8.目前仅 iOS 支持 box-shadow 属性,Android 暂不支持,可以使用图片代替。
		每个元素只支持设置一个阴影效果,不支持多个阴影同时作用于一个元素。

2.文本样式

/*文本类组件共享一些通用样式, 这类组件目前包括 <text>、<input>和<richtext>*/
&&&&&weex 文字必须放在text 下,否则无法进行以下文本设置&&&&&
color{color} (如果在不是文本类组件内设置 会不生效) 
/*age:
<style >
.red{
color:red;
}
</style >
<div class="red">文本</div>   此文本 将还是默认的黑色
*/
font-size {number}:文字大小(如果在不是文本类组件内设置 会不生效)
/*age:
<style >
.font{
font-size:28px;
}
</style >
<div class="font">文本</div>   此文本 将还是默认大小 
*/


font-style
font-style {string}:字体类别。可选值 normal | italic,默认为 normal。

font-weight
font-weight {string}:字体粗细程度

可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
normal 等同于 400, bold 等同于 700;
默认值: normal;iOS 支持 9 种 font-weight值;Android 仅支持 400700, 其他值会设为 400700

text-decoration
text-decoration {string}:字体装饰,可选值 none | underline | line-through,默认值为 none。

WARNING WARNING WARNING WARNING 

只支持 <text><ricthext>  WARNING WARNING

text-align     &&&&(不支持使用在div等组件)&&&&
text-align {string}:对齐方式。可选值 left | center | right,默认值为 left。

font-family
font-family {string}:设置字体。这个设置 不保证 在不同平台,设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。如果需要加载自定义字体,请参考相关dom.addRule。

text-overflow
text-overflow {string}:设置内容超长时的省略样式。可选值 clip | ellipsis

WARNING WARNING  WARNING  

只支持 <text><ricthext> WARNING  WARNING

lines
lines {number}: 正整数,指定最大文本行数,默认值为0,表示不限制最大行数。如果文本不够长,实际展示行数会小于指定行数。

&&&line-height&&&&
line-height {length}:正整数,每行文字高度。line-height是 top 至 bottom 的距离。line-heightline-height与font-size没有关系,因为line-height被 top 和 bottom 所限制,font-size 被 glyph 所解析。line-height和font-size相等一般会导致文字被截断。

word-wrap
word-wrap:<string> break-word | normal | anywhere. 对 Weex 来说 anywhere 表示在以字符为最小元素做截断换行,其它值或不指定该属性,都以英文单词为单位进行换行。

3.list 回收cell

/*<list> 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。

<cell>
用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对 <cell> 进行高效的内存回收以达到更好的性能。
<header>
当 <header> 到达屏幕顶部时,吸附在屏幕顶部。
<refresh>
用于给列表添加下拉刷新的功能。
<loading>
<loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。*/
如果 cell 太多会导致在屏幕外的cell 初始化时被回收,直到滑动cell再次出现在屏幕中才会显示,

WARNING WARNING  WARNING  
但是像地图显示不出来  ,(解决办法==》将所有东西 放在一个cell ,不用多个cell)





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用uni-app提供的weex渲染引擎来实现在nvue页面中使用Canvas,从而获取视频的第一帧并将其保存到后端。具体步骤如下: 1. 在uni-app项目中创建一个weex页面,用于绘制Canvas并获取视频第一帧,例如可以创建一个名为`canvas.vue`的文件。 2. 在`canvas.vue`文件中引入weex-ui组件库,并在模板中使用wxc-canvas组件创建Canvas元素: ```html <template> <div> <wxc-canvas ref="canvas" v-bind="canvasStyle" @wxcCanvasDraw="handleCanvasDraw"></wxc-canvas> </div> </template> <script> import { WxCanvas } from 'weex-ui' export default { components: { WxCanvas }, props: { videoUrl: { // 视频地址 type: String, default: '' } }, data() { return { canvasStyle: { // Canvas样式 width: 750, height: 350, backgroundColor: '#000000' }, thumbnailUrl: '' // 缩略图地址 } }, methods: { handleCanvasDraw(ctx, size) { const video = uni.createVideoContext('video') // 获取视频元素 video.play() setTimeout(() => { // 延时绘制,确保视频播放完成 ctx.drawImage(video, 0, 0, size.width, size.height) // 绘制视频帧 const thumbnailUrl = this.$refs.canvas.toDataURL('image/jpeg') // 将画布转为base64格式 this.thumbnailUrl = thumbnailUrl // 将缩略图地址保存到变量中 uni.navigateBack() // 返回上一页 }, video.duration * 1000) } } } </script> ``` 这里我们通过`WxCanvas`组件创建了一个Canvas元素,并绑定了`canvasStyle`变量来设置Canvas样式。同时,我们绑定了`videoUrl`变量来获取视频地址,并在`handleCanvasDraw`函数中获取视频第一帧。在`handleCanvasDraw`函数中,我们首先通过`uni.createVideoContext`方法获取视频元素,然后调用`play`方法开始播放视频。由于绘制Canvas需要一些时间,因此我们通过`setTimeout`方法延时一段时间,确保视频播放完成后再绘制视频帧。最后,我们通过`toDataURL`方法将Canvas转为base64格式的图片,并将缩略图地址保存到`thumbnailUrl`变量中。需要注意的是,由于weex渲染引擎与webview渲染引擎有所不同,因此在使用weex渲染引擎时,需要使用`this.$refs.canvas`来获取Canvas元素。 3. 在nvue页面中,通过`uni.navigateTo`方法跳转到`canvas.vue`页面,并将视频地址作为参数传递过去: ```html <template> <div> <video style="height: 350rpx;width: 750rpx;" :src="videoUrl" @loadedmetadata="handleLoadedMetadata"></video> <view @click="handleUpload">上传视频</view> </div> </template> <script> export default { data() { return { videoUrl: '', // 视频地址 thumbnailUrl: '' // 缩略图地址 } }, methods: { handleLoadedMetadata() { const video = this.$refs.video // 获取视频元素 video.pause() // 暂停视频播放 uni.navigateTo({ // 跳转到weex页面,获取视频第一帧 url: '/pages/canvas/canvas', success: (res) => { res.eventChannel.emit('videoUrl', this.videoUrl) // 将视频地址传递到weex页面 res.eventChannel.on('thumbnailUrl', (thumbnailUrl) => { // 接收weex页面返回的缩略图地址 this.thumbnailUrl = thumbnailUrl // 将缩略图地址保存到变量中 }) } }) }, async handleUpload() { // 上传视频和缩略图到后端 const [videoRes, thumbnailRes] = await Promise.all([ uni.uploadFile({ url: 'your_backend_upload_api', filePath: this.videoUrl, name: 'video' }), uni.request({ url: 'your_backend_upload_api', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { thumbnailUrl: this.thumbnailUrl } }) ]) console.log(videoRes, thumbnailRes) } } } </script> ``` 在这个页面中,我们使用`<video>`标签来加载视频,并绑定了`loadedmetadata`事件,用于在视频元数据加载完成后调用`handleLoadedMetadata`函数。在`handleLoadedMetadata`函数中,我们通过`this.$refs.video`获取视频元素,并调用`pause`方法暂停视频播放。接着,我们使用`uni.navigateTo`方法跳转到`canvas.vue`页面,并将视频地址作为参数传递过去。在weex页面中,我们通过`res.eventChannel.emit`方法将视频地址传递到weex页面,并在`handleCanvasDraw`函数中获取视频地址。最后,我们在weex页面中使用`res.eventChannel.emit`方法将缩略图地址返回到nvue页面中,然后将视频和缩略图上传到后端。 需要注意的是,由于视频第一帧的绘制是异步的,因此在上传缩略图时需要确保第一帧已经绘制完成。如果上传缩略图的方法与视频加载的方法不在同一个组件中,可以使用全局事件或状态管理工具来传递缩略图地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值