获取视频第一帧
:src="item.videourl+ '?x-oss-process=video/snapshot,t_0,f_jpg'"
隐藏状态栏和虚拟按键
plus.navigator.setFullscreen(true) //隐藏状态栏
plus.navigator.hideSystemNavigation() //隐藏虚拟按键
常用class
样式绑定
:class="[{'box1': key==currentIndex}, 'box2']"
循环绑定
<text>{{item}} {{index==0?num1Count:index==1?num2Count:''}} </text>
Nvue滚动绑定
1.<scroller style="height: 300rpx;background-color: pink;">
<view v-for="(item,index) in 100" :ref="'content'+index">111</view>
</scroller>
2.const dom = weex.requireModule('dom');
3.gotoBottom(){
var doc="content"+99;//最后一项
dom.scrollToElement(this.$refs[doc][0], {
offset:0,
animated:false
});
}
4.mounted() {
this.gotoBottom();
}
前端-常用时间
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
month >= 1 && month <= 9 ? (month = '0' + month) : '';
day >= 0 && day <= 9 ? (day = '0' + day) : '';
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
console.log(JSON.stringify(timer));
安装time.js
1.npm install time-operation --save
2.import $time from "@/js/time.js"
3.console.log($time.formatTime(1616623902000));
Nvue页面添加阿里图标字体文件
1.app.vue底下style里加
@font-face {
font-family: 'iconfont';
src: url('https://at.alicdn.com/t/font_2449187_n9b19w5d3zi.ttf') format('truetype');
}
.myFont {
font-family: iconfont;
}
onLaunch底下加
const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
fontFamily: 'iconfont',
src: "url('https://at.alicdn.com/t/font_2449187_n9b19w5d3zi.ttf')"
});
2.指定页面加
<text class="myFont" style="font-size: 30px;"></text>
ios隐藏安全距离-安卓虚拟按键背景色
1.在manifest.json底下app-plus下面加
"safearea": {
"bottom": {
"offset": "none"
}
}
2.在指定页面加
var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.GREEN);
swiper动画绑定
:style="{width:bar+'px',transform:offset}"
return {
offset:"translateX("+uni.getSystemInfoSync().windowWidth/4+")"
}
模拟器上访问本机资源
可以用10.0.2.2代替127.0.0.1和localhost;
复杂运算-计算属性
data{},后加
computed: {
user_number: ()=> {
return uni.getStorageSync('number')
}
}
<view v-if="item.userid==user_number">
三元运算符
:class="[isState==true?'text':'text1']"
//text和text1为样式
读取本地json数据
1.新建sin.json文件
{
"sin":123
}
var sin = require( '../../json/sin.json' );
console.log(sin.sin);
弹出框覆盖导航栏
1.新建sub文件,底下放test.nvue文件
<template>
<view style="align-items: center;justify-content: center;background-color: red;">
<image src="../../../static/logo.png" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
2.配置pages.json
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"app-plus":{
"subNVues":[{
"id":"sin",
"path":"pages/index/sub/test",
"type":"popup",
"style":{
"margin":"auto",
"width":"85%",
"height":"300rpx",
"border-radius":"10rpx"
}
}]
}
}
}]
3.主页面直接调用
uni.getSubNVueById(“sin”).show(“none”,250)
自定义uni组件
1.新建com目录,目录下新建sin.vue文件
<template>
<view style="background-color: red;width: 200rpx;height: 200rpx;">
{{title}}
</view>
</template>
<script>
export default {
props:{
title:""
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
2.页面上直接应用就ok
<template>
<view>
<sin title="123"></sin>
</view>
</template>
<script>
import sin from '@/com/sin.vue'
export default {
components: {
sin
},
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
修改input光标颜色
style{
caret-color: red;
}
修改状态栏图标颜色
"navigationBarTextStyle": "white",//修改状态栏图标颜色只支持white/black
提示微信开发者工具manifest.json源码视图加上
"app-plus" : {
"compilerVersion" : 3
}
动画过渡(基于uni-ui)
<template>
<view>
<view>
<button type="primary" @click="open">fade</button>
<uni-transition :mode-class="['fade','slide-top']" :show="show" @change="change" :styles="obj"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
obj:{
width:"100px",
height:"100px",
backgroundColor:"red"
}
}
},
methods: {
open() {
this.show = !this.show
},
change() {
console.log('触发动画')
}
}
}
</script>
<style>
</style>
压缩并上传图片(同步)
async header1() { //上传
var headerPath = await this.choose(); //选择图片临时路径
console.log(headerPath);
var file_path = await this.compress(headerPath); //压缩后的图片路径
console.log("压缩后的图片路径" + file_path);
var uploadPath = await this.upload(file_path);
console.log("上传完毕地址"+uploadPath);
this.header_img=file_path;
},
choose() { //选择图片
return new Promise((res) => {
uni.chooseImage({
count: 1,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
res(tempFilePaths[0])
}
})
})
},
compress(img_path) { //压缩图片
return new Promise((resolve) => {
plus.io.resolveLocalFileSystemURL(img_path, (img_obj) => {
img_obj.file((file) => {
console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
if (file.size > 50480) { //文件大于50k
plus.zip.compressImage({
src: img_path,
dst: "_doc/header.jpg",
quality: 20,
overwrite: true //有dst必填否则失败
},
(suc) => {
resolve(suc.target);
console.log('压缩后图片信息:' + suc.target); // 压缩后图片地址
}, (err) => {
console.log('err');
});
} else {
// resolve(imgPath);
resolve(img_path);
}
})
});
})
},
upload(file_path) {
return new Promise((resolve) => {
uni.uploadFile({
url: href + 'file/upload',
filePath: file_path,
name: 'file',
formData: {
path: 'user/' + uni.getStorageSync("number"),
number: uni.getStorageSync("number")
},
success: (uploadFileRes) => {
uni.setStorageSync("header", uploadFileRes.data);
resolve(uploadFileRes.data)
}
});
})
},
挂载全局请求
main.js
import { sin } from 'js/api.js';
Vue.prototype.$sin=sin;;
api.js
const myUrl = "http://192.168.101.85:8080/";
export const sin = ((options) => {
return new Promise((resove, reject) => {
uni.request({
url: myUrl + options.url,
data: options.data,
method: options.method || "GET",
success: (res) => {
resove(res)
},
fail: (err) => {
reject(err)
}
})
})
})
页面
async method(){
const res=await this.$sin({
url:"tongzhi"
});
console.log(res)
}
nvue刷新+样式
<template>
<view>
<!-- <view class="box">
</view> -->
<list style="background-color: #007AFF;">
<refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'" @pullingdown='onpullingdown' style=" border-width: 0px;border-style: solid;border-color: red;">
<text style="text-align: center;font-size: 30rpx;" space="emsp">{{refreshText}}</text>
<loading-indicator></loading-indicator>
</refresh>
<cell v-for="i in iis">
<text>{{i}}</text>
</cell>
</list>
</view>
</template>
<script>
import obj from '@/js/link.js'
var href = obj.obj.link();
export default {
data() {
return {
iis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
refreshing: false,
refreshText: '↓ 下拉刷新'
}
},
methods: {
onrefresh() {
if (this.refreshing) return;//过快拦截
this.refreshing = true;
setTimeout(() => { //松开还原
this.refreshing = false;
this.refreshText = '↓ 下拉刷新'
}, 1000)
},
onpullingdown(e) {
console.log(e.pullingDistance);
if(e.pullingDistance>=150){
this.refreshing = false;
this.refreshText = '↑ 松开释放'
}
}
}
}
</script>
<style>
.box {
height: 100rpx;
background-image: linear-gradient(to bottom right, #AD18F9, #05DFC7);
}
</style>
获取设备高度(app)
1.绑定指定view
:style="obj"
2. data绑定
obj: {
height: ""
}
3.获取设备高度
const res = uni.getSystemInfoSync();
this.obj.height = res.windowHeight + "px";
下拉刷新
1.普通刷新
打开"enablePullDownRefresh": true
"app-plus": {
"pullToRefresh": {
"color": "#FF0000"
}
}
放在方法下
onPullDownRefresh() {// 监听下拉刷新动作的执行方法,每次手动下拉刷新都会执行一次
setTimeout(function() {
uni.stopPullDownRefresh(); //停止下拉刷新动画
}, 100);
}
2.自定义刷新
"pullToRefresh": {
"support": true,
"color": "#FF0000",
"style": "snow-flake",
"contentdown": {
"caption": "下拉可刷新"
},
"contentover": {
"caption": "释放可刷新"
},
"contentrefresh": {
"caption": "正在刷新"
}
},
沉浸式导航栏
{
"path": "pages/dongtai/dongtai",
"style": {
"navigationBarTitleText": "我的动态",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ff0000",
"enablePullDownRefresh": false,
"transparentTitle":"auto" //关键句
// "navigationStyle":"custom"
}
}
嵌套循环v-for
<view style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #EEEEEE;" v-for="item in arrs">
<view>
<image :src="item.header" mode="aspectFit" style="height: 120rpx;width: 120rpx;border-radius: 60rpx;"></image>
</view>
<view style="display: flex;flex-direction: column;margin-left: 50rpx;">
<view>
<text style="font-size: 30rpx;font-weight: bold;">{{item.content}}</text>
</view>
<view>
<image :src="i" mode="aspectFit" style="height: 150rpx;width: 150rpx;margin: 10rpx;" v-for="i in item.imgs"></image>
</view>
</view>
</view>
使用安装uView(界面必须view不能使用div否则渲染不出)
cnpm i uview-ui
// main.js
import uView from "uview-ui";
Vue.use(uView);
/* uni.scss */
@import 'uview-ui/theme.scss';
在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
修改导航栏字体
onNavigationBarButtonTap(e) {
if (e.index == 0) { //编辑
/* uni.setNavigationBarTitle({
title:"cehi" //这是修改后的导航栏文字
}) */
const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.setTitleNViewButtonStyle(e.index, {
text: "完成"
});
var txt= currentWebview.getStyle().titleNView.buttons[0].text;
if(txt=="完成"){
currentWebview.setTitleNViewButtonStyle(e.index, {
text: "编辑"
});
}else{
currentWebview.setTitleNViewButtonStyle(e.index, {
text: "完成"
});
}
} else {
}
}
pages.json常用
"app-plus": {
"titleNView": {
"splitLine": {
"color": "#f2f2f2"
},
"buttons": [{
"text": "按钮2",
"fontSrc": "/static/uni.ttf",
"fontSize": "22px",
"float": "left",
"color": "#FF0000"
},
{
"text": "按钮1",
"width": "150rpx",
"fontSrc": "/static/uni.ttf",
"fontSize": "30rpx",
"float": "right"
}
]
},
"pullToRefresh": {
"color": "#FF0000"
}
}