admin管理员组文章数量:1655524
这里写目录标题
- 在微信小程序中打开
- 1. 先打开微信开发者工具安全设置
- 2.uniapp设置
- 生命周期
- App.vue 小程序的生命周期是小程序的
- 页面的生命周期是小程序(组件用的vue)
- 组件的生命周期是vue的
- 事件,属性设置用vue
- 标签是小程序的,语法用的vue
- 新建一个页面
- 条件编译
- 打包
- 云打包
- 原生App云打包
- 配置打包权限
- 小程序打包
- 离线打包
- 使用vuex
- 传值
- 父传子
- 子传父
- 兄弟$ emit , $ on
- provide/inject 祖孙
- 其他使用Vuex
- uniapp使用vant weapp
- 自定义tabBar
- 一 使用自己写的插件
- 0.先配置好packages.json
- 1.创建tabar组件
- 2. 每个页面使用
- 二 使用uview的tabbar插件
- 1.创建tabbar.vue组件
- 2.配置pages.json的tabbar
- 3.页面使用
- 使用阿里巴巴矢量图icon
- 1. icon图标库下载
- 2. 页面style设置
- 3.页面使用
- nvue和vue的区别
- SDK 软件开发工具包
- 支付
- ios
- 安卓
- uvue uni-app 的一种渲染方式
- 使用场景
- css 不同
- nvue和vue通信
- nvue——>vue
- vue——>nvue
- 腾讯IM实时通讯
- uniapp配置easycom
- manifest.json设置
- app-plus自定义导航栏
- 左右按钮
- 中间搜索框
- 三方登录
- uniapp的支付
- bug
- 1.上下滑动对应
- ucharts图表 (像echarts)
- echart 图表使用renderjs
- mescroll-uni
- uniapp中返回上一页传值的方法,getCurrentPages()
- 使用$emit $on 实现页面点赞联动
- _vm.e0 is not a function
- 弹层/蒙层业务中常常用到,当页面内容可滚动时,出现弹窗,滚动弹层会导致页面也跟着滚动。
- 获取用户名
- 获取手机号
- getLocation,经纬度转城市位置
- 手机号加密解密
- window 运行到ios手机上
- 1.申请一个苹果账号
- 2.申请ios测试证书(p12)
- 3.申请ios描述文件(mobileprovision)
- 4.打包ipa
- 5.安装ipa
- mac电脑 运行 ios真机模拟
- 前端实现iPhone绕过AppStore从浏览器直接安装App
- 申请苹果开发者(付费)
- uniapp发送formdata表单请求
- uniapp app上传图片----从相册选择
- uniapp app上传图片----拍照获取
- uniapp uni-popup 弹窗遮罩层部分还可以滚动
- uni-app子组件onLoad、onReady事件无效
- 生成二维码并保存到本地h5-app
- 返回上一页 app 和h5写法
- 返回上一页并携带数据
- uni-app横竖屏切换之后样式错乱字体变大解决方法
- video ios端黑屏
- video ios 点击播放自动全屏问题
- uniapp 打包ios,首次安装允许网络请求后页面空白
- uniapp 获取清理缓存
在微信小程序中打开
1. 先打开微信开发者工具安全设置
2.uniapp设置
生命周期
App.vue 小程序的生命周期是小程序的
页面的生命周期是小程序(组件用的vue)
pages下的.vue文件是页面
项目 | Value |
---|---|
电脑 | $1600 |
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参) wx.navigateTo({ url: ‘/pages/page6/page6?id=1001’, })另一个页面onLoad获取 |
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
onResize | 监听窗口尺寸变化 App、微信小程序、快手小程序 |
onPullDownRefresh | 监听用户下拉动作 |
onReachBottom | 页面滚动到底部的事件 |
onShareAppMessage | 用户点击右上角分享(小程序) |
组件的生命周期是vue的
除去pages下的.vue文件。一般放在components文件下的
项目 | Value |
---|---|
beforeCreate | 在实例初始化之前被调用。 |
created | 在实例创建完成后被立即调用。 |
beforeMount | 在挂载开始之前被调用。 |
mounted | 挂载到实例上去之后调用。 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁, |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed | Vue 实例销毁后调用。 |
事件,属性设置用vue
标签是小程序的,语法用的vue
新建一个页面
在pages文件夹上右键新建页面
条件编译
将注释里面的代码编译到不同平台
官网
html 写法
<!-- #ifdef H5 -->
<text>只在H5中展示</text>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<text>只在微信小程序中展示</text>
<!-- #ifdef -->
js写法
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// js写法
//#ifdef H5
console.log('H5')
//#endif
//#ifdef MP
console.log('小程序')
//#endif
},
methods: {
}
}
css写法
.title {
font-size: 36rpx;
color: #8f8f94;
/* css写法 */
/* #ifdef H5 */
color: aqua;
/* #endif */
/* #ifdef MP */
color:hotpink;
/* #endif */
}
打包
云打包
云打包即使通过官方在云服务器已经提供好的打包环境进行打包,不用用户在本地再进行环境搭建进行打包。
会有打包慢的情况
原生App云打包
打包完成之后会有一个压缩包,安卓手机可以直接打开
ios需要签名
配置打包权限
小程序打包
离线打包
添加链接描述
如果使用了自己开发组件,或者h5+plus没集成的第三方插件 或者是有一些其他的骚操作那么肯定是要使用离线打包的
- 下载Android Studio
- 下载android 离线SDK(注意版本)
- 发行原生app本地打包(注意appid要相同)
使用vuex
uiniapp可以直接使用vuex
创建文件夹store 存放store.js
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
username:'丢丢'
},
mutations: {
SETUSERNAME(state, value){
state.username = value
console.log(state.username)
}
},
actions: {},
getters: {}
})
main.js中引入
import Vue from 'vue'
import store from './store/store.js'
Vue.prototype.$store = store
const app = new Vue({
...App, store,
})
页面使用
onLoad() {
console.log(this.$store.state)
this.$store.commit('setHasLogin','123')}
传值
父传子
props 和vue一样
子传父
this.$emit("getChild1",this.list);
<child1 @getChild1 = "getChild1" ></child1>
兄弟$ emit , $ on
uni.$emit()
onShow(){
uni.$on('',(res)=>{})
}
provide/inject 祖孙
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}}
其他使用Vuex
uniapp使用vant weapp
添加链接描述
自定义tabBar
一 使用自己写的插件
0.先配置好packages.json
只需要将页面路径放进去就可以
"tabBar": {
"selectedColor":"#79D5AD",
"color": "#999999",
"backgroundColor":"#ffffff",
"borderStyle": "white",
"height":"0px",
"list": [{
"pagePath":"pages/activity/activity",
"text": " "
},{
"pagePath":"pages/recommendation/recommendation",
"text": " "
},{
"pagePath":"pages/message/message",
"text": " "
},{
"pagePath":"pages/user/user",
"text": " "
}]
}
1.创建tabar组件
下面就是tabBar组件:这样就可以使用uni.switchTab({})路由切换tabBar页面,:style="{‘padding-bottom’: paddingBottomHeight + ‘rpx’}"是给iphone X以上的手机tabBar适配了一个padding-bottom;
<template>
<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
<cover-view class="tabbar-item"
v-for="(item, index) in list"
:key="index"
@click="tabbarChange(item.path)"
>
<cover-image class="item-img" :src="item.icon_a" v-if="current == index"></cover-image>
<cover-image class="item-img" :src="item.icon" v-else></cover-image>
<cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view>
</cover-view>
</cover-view>
</template>
<script>
export default {
props: {
current: String
},
data() {
return {
paddingBottomHeight: 0, //苹果X以上手机底部适配高度
list: [{
text: '首页',
icon: '/static/images/home.png', //未选中图标
icon_a: '/static/images/home_i.png', //选中图片
path: "activity", //页面路径
},{
text: '分类',
icon: '/static/images/classify.png',
icon_a: '/static/images/classify_i.png',
path: "recommendation",
}
]
};
},
created() {
let that = this;
uni.getSystemInfo({
success: function (res) {
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
model.forEach(item => {
//适配iphoneX以上的底部,给tabbar一定高度的padding-bottom
if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
that.paddingBottomHeight = 40;
}
})
}
});
},
watch: {
},
methods: {
tabbarChange(path) {
uni.switchTab({
url: path
})
}
}
};
</script>
<style lang="scss" scoped>
.tabbarActive{
color: #79D5AD !important;
}
.tabbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100rpx;
background-color: #ffffff;
.tabbar-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100rpx;
.item-img{
margin-bottom: 4rpx;
width: 46rpx;
height: 46rpx;
}
.item-name{
font-size: 26rpx;
color: #A3A3A3;
}
}
}
</style>
2. 每个页面使用
下面使用tabBar页面引入自定义tabBar组件:记得加上uni.hideTabBar({})把官方tabBar隐藏
<template>
<view>
<view-tabbar :current="0"></view-tabbar>
</view>
</template>
<script>
import Tabbar from '@/components/tabbar.vue'
export default {
components: {
'view-tabbar': Tabbar
},
onShow() {
uni.hideTabBar({
animation: false
})
},
}
</script>
二 使用uview的tabbar插件
1.创建tabbar.vue组件
//tabbar.vue
<template>
<view>
<u-tabbar
:value="current?current:0"
@change="ChangBar"
:fixed="true"
:placeholder="false"
:safeAreaInsetBottom="true"
activeColor="#dd524d"
>
<u-tabbar-item text="首页">
<image class="u-page__item__slot-icon" slot="active-icon" src="https://cdn.uviewui/uview/common/bell-selected.png" ></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="https://cdn.uviewui/uview/common/bell.png" ></image>
</u-tabbar-item>
<view class="jia">+</view>
<u-tabbar-item text="我的" icon="../../static/logo.png"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>export default {
props:{
current:Number
},
data() {
return {
list: [{
pagePath: "pages/index/index",
iconPath: "/static/logo.png",
selectedIconPath: "/static/logo.png",
text: '首页'
},{
pagePath: "pages/home/home",
iconPath: "/static/logo.png",
selectedIconPath: "/static/logo.png",
text: '我的' } ],
}
},
methods: {
ChangBar(e) {
uni.switchTab({ url: '/'+this.list[e].pagePath})
}
} ,
}
</script>
<style lang="scss" scoped>
.jia{
height: 100rpx;
width: 100rpx;
border-radius: 50%;
background-color: deeppink;
text-align: center;
line-height: 100rpx;
margin-top: -50rpx;
}
</style>
2.配置pages.json的tabbar
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/home/home",
"text": "我的"
}],
"current": 0
}
app.vue
onLaunch: function() {
uni.hideTabBar({})
},
onShow: function() {
uni.hideTabBar({})
},
3.页面使用
局部使用每个页面都需要引入
原文链接
//home.vue
<view-tabbar :current="1"></view-tabbar>
import Tabbar from '@/components/tabBar/tabBar.vue'
全局使用
先定义store.js
state: {
current:0
},
mutations: {
SETCURRENT(state, value){
state.current = value
console.log(state.current)
}
},
//main.js注册
import tabBar from './components/tabBar/tabBar.vue'
Vue.component('tabBar',tabBar)
//tabbar.vue
<u-tabbar
:value="$store.state.current"
@change="ChangBar"
:fixed="true"
:placeholder="false"
:safeAreaInsetBottom="true"
activeColor="#dd524d"
>
ChangBar(e) {
this.$store.commit('SETCURRENT',e)
uni.switchTab({ url: '/'+this.list[e].pagePath})
}
} ,
使用阿里巴巴矢量图icon
1. icon图标库下载
下载到本地+复制代码到uniapp
2. 页面style设置
url 地址需要加https
<style lang="scss" scoped>
@font-face {
font-family: 'iconfont'; /* Project id 3696730 */
src: url('https://at.alicdn/t/c/font_3696730_6tpgrrnftv7.woff2?t=1665403666278') format('woff2'),
url('https://at.alicdn/t/c/font_3696730_6tpgrrnftv7.woff?t=1665403666278') format('woff'),
url('https://at.alicdn/t/c/font_3696730_6tpgrrnftv7.ttf?t=1665403666278') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fangdajing:before {
content: "\e867";
}
</style>
3.页面使用
<view class="iconfont icon-fangdajing"></view>
nvue和vue的区别
区别:1、调用vue需要使用webview渲染方式,调用nvue使用的是weex方式的原生渲染;2、vue界面的css支持媒体查询,nvue页面的css不支持媒体查询。3、 nvue页面均采用flex布局方式,vue页面可以有多种布局方式。
vue文件走的webview渲染
nvue走weex方式的原生渲染
SDK 软件开发工具包
包含安卓skd,ios的sdk
腾讯地图,点击登录
支付
ios
不能使用支付宝,微信支付,使用虚拟币,1币,6币像王者一样
安卓
可以使用支付宝微信
在支付界面需要用到条件编译 #ifdef
用uni.getSystemInfo获取到环境信息
uvue uni-app 的一种渲染方式
文章链接
文章链接2
当开发App的时候使用,同名下app端优先使用nvue,非app优先vue
nvue和vue页面构成相同,不支持ts
nvue只能通过uni.request()请求接口
nvue不能使用全局变量
只能用flex布局
使用场景
- 首页以及tabBar切换的那几个页面用nvue,二级页使用vue页面
- 长列表或瀑布流滚动。
css 不同
不支持less ,sass
border属性不能简写
引入要在style src=“”区别
nvue和vue通信
nvue——>vue
在 nvue中使用 uni.postMessage(data) 发送数据,参数 data 只能是 json 数据,json 数据的值只支持字符串。
在vue中使用 onUniNViewMessage 函数监听数据。
//nvue
<script>
export default {
methods: {
postMessage(item){
uni.postMessage({ name:’慕课网’, data:item }) }
} }
</script>
//vue
<script>
export default {
onUniNViewMessage:(e) => {
const data = e.data
uni.$emit(‘data’,data)
}
}
</script>
vue——>nvue
方法一:使用 storage 缓存的方式进行参数传递。
在 vue 页面中打开 nvue 页面,并且通过 setStorageSync 方法将数据保存到缓存中。
详细见文章链接2
方法二:使用 globalData 全局数据的方式进行参数传递。
在 vue 页面中定义全局数据。
详细见文章链接2
腾讯IM实时通讯
- 先到腾讯云上面找到IM实时通讯(有集成ui,和没有ui的)
- 下载TuIkit源码,找到uniapp的复制到项目里,npm安装对应缺少的依赖
- 把文件拉到根目录里,static,utils,ployfill,debug
- 在main.js中引入mixins
- 把组件复制到自己的项目里面 ui+逻辑
- pagejson中添加路由
- 在debug中配置id和密匙
uniapp配置easycom
组件引用方式两种:使用vue方式,easycom方式
easycom的作用主要是,在pages.json文件里面配置了easycom,使用组件的时候就不用每次都在页面里面引入一下了。
官网
manifest.json设置
分享,地图(app设置里面没有腾讯地图,小程序的有),支付,获取用户通讯目录,
app-plus自定义导航栏
官网
左右按钮
//点击按钮
onNavigationBarButtonTap(e){}
中间搜索框
onNavigationBarSearchInputChanged(e){//内容改变
}
onNavigationBarSearchInputConfirmed(e){//点击软键盘上的搜索按钮
}
隐藏软键盘
//跳转页面之前隐藏软键盘
uni.hideKeyboard()
三方登录
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
console.log(loginRes.authResult.openid);
//拿到openid
uni.getUserInfo({
provider:'weixin',
success:(res)=>{
//res
}
})
}
});
uniapp的支付
bug
1.上下滑动对应
上面选项部分 通过:scroll-into-view实现索引跟随,需要view的id=“不能以数字开头”
下面swiper 动态设置高度,根据.home-data的高度
当底部的数据是动态加载的话,直接用creatSelectQuery()获取不到
需要使用getSystemInfo
bug:ios端因为刘海屏的原因滚动头部有滚动问题,小程序没问题。需要减去头部的高度
条件编译ifdef 判断一下如果是ios,安卓就改一下,小程序不用,用if也可以
判断手机型号ios和android需要减一下高度
ucharts图表 (像echarts)
ucharts
echart 图表使用renderjs
<script module="echarts" lang="renderjs">
mescroll-uni
mescroll的uni版本, 提供和两个组件, 其中支持配置成系统自带的下拉组件
添加链接描述
uniapp中返回上一页传值的方法,getCurrentPages()
场景:从A页面跳到B页面,操作成功后,uni.navigateBack()返回A页面并传值,不是链接带参数
第一种使用onshow
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
B页面传
let obj={
name: '老王',
age:'18'
}
prevPage.onShow(obj);
uni.navigateBack()
A页面接收
onShow(options){
console.log(options)
}
第二种使用$vm
B页面传,A页面不用接收,data里的值已经被修改了
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.$vm.sup_name ='老王'
prevPage.$vm.age = '18'
使用$emit $on 实现页面点赞联动
回显
视频点赞返回上一个页面可以回显
使用$emit 和 $on
uni.$emit('changVideoLove',{itemId:this.$refs.right[index].userData.id,num:isFabulous})
onLoad 里面监听
uni.$on('changVideoLove', info => {})
_vm.e0 is not a function
uniapp写小程序,就是代码格式的问题,找了半天是多了一个</ view>
弹层/蒙层业务中常常用到,当页面内容可滚动时,出现弹窗,滚动弹层会导致页面也跟着滚动。
在弹层中添加:@touchmove.stop.prevent (真机有效
获取用户名
<input
type="nickname"
v-model="userData.name"
@blur="getnickname"
placeholder="请输入昵称"
id="nickname-input"
/>
//获取用户名称
getnickname(e) {
uni.createSelectorQuery()
.in(this) // 注意这里要加上 in(this)
.select('#nickname-input')
.fields({
properties: ['value']
})
.exec(res => {
const nickName = res?.[0]?.value;
this.userData.name = nickName;
this.upUserData(1);
});
},
获取手机号
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" > 修改手机号 </button>
// 授权手机号
getPhoneNumber(e) {
let that = this;
if (
e.detail.errMsg == "getPhoneNumber:fail user deny" ||
e.detail.errMsg == "getPhoneNumber:fail:user deny"
) {
wx.showModal({
title: "请先授权手机号",
content: "提供便捷登录方式以及提供询价服务",
success(res) {
if (res.confirm) {
console.log("用户点击确定");
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
} else {
if (e.detail.code && e.detail.code != null) {
// 另一个接口
this.getPhoneNew(e.detail.code);
return;
}
uni.request({
url: URL + "/wx/user/" + appid + "/phone",
method: "get",
data: {
openid: wx.getStorageSync("openId"),
iv: e.detail.iv,
encryptedData: e.detail.encryptedData,
sessionKey: wx.getStorageSync("sessionKey"),
},
success: function (phoneResult) {
if (res.code === 500) {
wx.showToast({
title: phoneResult.msg,
icon: "none",
duration: 2000,
});
} else {
wx.showToast({
title: "操作成功",
icon: "none",
duration: 2000,
});
let user = wx.getStorageSync("userInfo");
let userInfo = {
nickname: user.nickname,
headimgurl: user.headimgurl,
phone: phoneResult.data,
};
wx.setStorageSync("userInfo", userInfo);
that.userData.phone = phoneResult.data;
}
},
});
}
},
getLocation,经纬度转城市位置
1.wx.getLocation获取经纬度
2.根据腾讯地图api 转换经纬度到城市
wx.getLocation({
success(res) {
//经纬度转城市位置
uni.request({
url:
"https://apis.map.qq/ws/geocoder/v1/?location=" +
res.latitude +
"," +
res.longitude +
"&key=" +
that.globalData.TXMap +
"&get_poi=1",
success(res) {
if (res.data.result) {
that.cityName = res.data.result.ad_info.city;
that.getAreaCode(that.cityName);
if (that.cityName.endsWith("市")) {
that.cityName = that.cityName.split("市", 1)[0];
}
let data = {
cityName: that.cityName,
};
uni.$emit("cityName", data);
uni.setStorageSync("Location", that.cityName);
uni.setStorageSync("cityName", that.cityName);
}
},
});
},
手机号加密解密
1.请求后端接口,返回加密电话号
2.需要引入js文件进行解密
import { JSEncrypt } from './jsencrypt'//解密js文件
// 加密公钥
const publicKey = '';
// 解密私钥
const privateKey = '30820277020100300d06092a8.............5b';
// 加密
export function rsaEncrypt (msg) {
const jsencrypt = new JSEncrypt()
jsencrypt.setPublicKey(publicKey)
const encryptMsg = jsencrypt.encrypt(msg)
return encryptMsg
}
// 解密
export function rsaDecrypt (msg) {
const decrypt = new JSEncrypt()
decrypt.setPrivateKey(privateKey)
const decryptMsg = decrypt.decrypt(msg)
return decryptMsg
}
window 运行到ios手机上
原文链接
1.申请一个苹果账号
2.申请ios测试证书(p12)
3.申请ios描述文件(mobileprovision)
4.打包ipa
5.安装ipa
打包成功后下载ipa包
mac电脑 运行 ios真机模拟
mac 电脑下载 Xcode,并连上手机
注册苹果开发者账号
hbuilder x 直接可以运行到app ios 模拟虚拟机
前端实现iPhone绕过AppStore从浏览器直接安装App
原文链接
申请苹果开发者(付费)
原文链接
1.https://developer.apple/ 登录点击证书,完成这四个的新建,生成.certSigningRequest文件和Profiles文件
2.苹果电脑 把.cer文件放到钥匙串访问里面,导出.p12文件。(可能遇到信任问题,直接设置全部信任)
3. .mobildprovision文件在官网Profiles里面生成
4. uniapp里面运行手机
uniapp发送formdata表单请求
因为uniapp不支持直接传输formdata,只提供了uploadFile方法上传文件,但是利用该方法就可以传输formdata了。
原文链接
uni.uploadFile({
header: {
Authorization: "Bearer " + getToken(),
},
url: config.baseUrl + "/media/information",
timeout: 1000 * 6,
file: this.imageValue[0],
name: "file",
formData: this.FormData,
success: (res) => {
console.log(res);
},
complete: () => {},
fail: (res) => {},
});
uniapp app上传图片----从相册选择
uni.chooseImage({
count: 1, //默认9
sizeType: ["compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera "], //从相册选择
success: function (res) {
that.filePath = res.tempFilePaths[0];
},
});
uni.uploadFile({
filePath: config.file,
name: 'file',
method: "post",
timeout: config.timeout || timeout,
url: config.baseUrl || baseUrl + config.url,
formData: config.data,
header: {
// 如果是在h5中,header里去掉’content-type’: ‘multipart/form-data’,
//若是在小程序真机中图片上传失败,header里加上’content-type’: ‘multipart/form-data’,就可以了
'Authorization': "Bearer " + getToken(),
},
})
uniapp app上传图片----拍照获取
cameraImg() {
//从相机拍照
var cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
var that = this;
cmr.captureImage(
function (path) {
that.filePath = path;
that.imageValue = [];
that.imageValue.push({
path: path,
});
that.$refs.popupImg.close("bottom");
},
function (error) {
console.log("Capture image failed: " + error.message);
},
{ resolution: res, format: fmt }
);
},
uniapp uni-popup 弹窗遮罩层部分还可以滚动
<!-- 弹窗出现禁止页面滚动 -->
<page-meta
:page-style="'overflow:' + (show ? 'hidden' : 'visible')"
></page-meta>
<uni-popup
ref="addpop"
background-color="#fff"
@change="changeShow"
:mask-click="false"
></uni-popup>
//弹窗出现禁止页面滚动
changeShow(e) {
this.show = e.show;
},
uni-app子组件onLoad、onReady事件无效
今天用uniapp开发项目,页面上的onLoad,onReady方法是可以起作用的,但是组件中使用却没有起作用。
使用uniapp开发组件时用到页面初始化参数,于是在封装的子组件上写了onload方法,发现始终无法调用。
经过一番尝试后还是不行,看文档发现uni-app 支持的页面生命周期函数是包含onLoad的,但有时却不起作用。
这是因为组件中并不能使用页面生命周期函数。
最终将onLoad,onReady换成mounted解决了问题。
在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理。
生成二维码并保存到本地h5-app
二维码插件链接uniapp
<template>
<view>
<canvas
id="qrcode"
canvas-id="qrcode"
style="width: 200px; height: 200px"
@longtap="longtap"
></canvas>
</view>
</template>
<script>
import UQRCode from "../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js";
export default {
data() {
return { tempFilePath: "" };
},
props: ["code"],
mounted() {
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = this.code;
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件,this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
},
methods: {
//长按保存
longtap() {
let that = this;
uni.showModal({
title: "提示",
content: "是否保存二维码到本地",
success: function (res) {
//需要有个延时
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: "qrcode",
fileType: that.fileType,
width: that.canvasWidth,
height: that.canvasHeight,
success: (res) => {
//res.tempFilePath在h5端是base64格式的
//app端就是临时路径,直接保存就行
if (res.tempFilePath) {
that.saveImg(res.tempFilePath);
}
},
fail: (err) => {
console.log(err);
},
});
}, 300);
},
});
},
saveImg(url) {
// #ifdef H5
var oA = document.createElement("a");
oA.download = "图片名称.png"; // 设置下载的文件名,默认是'下载'
oA.href = url; //图片url
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
// #endif
// #ifdef APP-PLUS
uni.saveImageToPhotosAlbum({
filePath: url,
success: function () {
uni.showToast({
title: "图片保存成功",
icon: "none",
});
},
});
// #endif
},
},
};
</script>
返回上一页 app 和h5写法
let pages = getCurrentPages(); //获取页面栈
let beforePage = pages[pages.length - 2]; //上一页
// #ifdef H5
beforePage.getData(1);
//#endif
// #ifdef APP-NVUE
beforePage.$vm.getData(1); //直接调用上一页的方法
//#endif
uni.navigateBack({
//返回上一页
delta: 1,
});
返回上一页并携带数据
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
B页面传
let obj={
name: '老王',
age:'18'
}
prevPage.onShow(obj);
uni.navigateBack()
A页面接收
onShow(options){
console.log(options)
}
B页面传,A页面不用接收,data里的值已经被修改了
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.$vm.sup_name ='老王'
prevPage.$vm.age = '18'
uni-app横竖屏切换之后样式错乱字体变大解决方法
uni-app横竖屏切换之后字体变大,具体为,切换到横屏后,又进入一个竖屏新页面,此时这个页面的字体会变大。
退出横屏时,首先进入一个 空白页,空白页中在继续进行跳转 我的场景是,进入视频横屏,然后退出横屏,所以是拦截原生返回,自定义返回时,进入一个空白页面,然后再空白页面回退两个页面
添加链接描述
video ios端黑屏
添加链接描述
computed:{
videoHtml: function() {
return `<video autoplay loop muted controls="controls" width="100%" height="870px"><source src="${this.videoSrc}" type="video/mp4"></video>`;
}
}
<view v-html="videoHtml"></view>
video ios 点击播放自动全屏问题
ios中:
只需要在标签里面写上:webkit-playsinline=‘true’ playsinline=‘true’
android中:
android端部分视频也会存在自动全屏问题,添加:x5-video-player-type=“h5-page”
添加链接描述
uniapp 打包ios,首次安装允许网络请求后页面空白
添加链接描述
uniapp 获取清理缓存
//获取
getStorageSize() {
let that = this;
// #ifdef H5
uni.getStorageInfo({
success(res) {
let size = res.currentSize;
if (size < 1024) {
that.storageSize = size + " B";
} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
that.storageSize = Math.floor((size / 1024) * 100) / 100 + " KB";
} else if (size / 1024 / 1024 >= 1) {
that.storageSize =
Math.floor((size / 1024 / 1024) * 100) / 100 + " M";
}
},
});
// #endif
// #ifdef APP-PLUS
plus.cache.calculate(function (size) {
let sizeCache = parseInt(size);
if (sizeCache == 0) {
that.storageSize = "0B";
} else if (sizeCache < 1024) {
that.storageSize = sizeCache + "B";
} else if (sizeCache < 1048576) {
that.storageSize = (sizeCache / 1024).toFixed(2) + "KB";
} else if (sizeCache < 1073741824) {
that.storageSize = (sizeCache / 1048576).toFixed(2) + "MB";
} else {
that.storageSize = (sizeCache / 1073741824).toFixed(2) + "GB";
}
}); // #endif
},
//清除
handleCleanTmp(params) {
let that = this;
uni.showModal({
title: "提示",
content: "确定清除缓存吗?",
confirmText: "立即清除",
success(res) {
if (res.confirm) {
// #ifdef H5
uni.clearStorageSync();
uni.showToast({
title: "清除成功",
icon: "none",
});
that.storageSize = 0
// #endif
// #ifdef APP-PLUS
let os = plus.os.name;
if (os == "Android") {
let main = plus.android.runtimeMainActivity();
let sdRoot = main.getCacheDir();
let files = plus.android.invoke(sdRoot, "listFiles");
let len = files.length;
for (let i = 0; i < len; i++) {
let filePath = "" + files[i]; // 没有找到合适的方法获取路径,这样写可以转成文件路径
plus.io.resolveLocalFileSystemURL(
filePath,
function (entry) {
if (entry.isDirectory) {
entry.removeRecursively(
function (entry) {
//递归删除其下的所有文件及子目录
uni.showToast({
title: "缓存清理完成",
duration: 2000,
});
getStorageSize(); // 重新计算缓存
that.storageSize = 0
},
function (e) {
console.log(e.message);
}
);
} else {
entry.remove();
}
},
function (e) {
console.log("文件路径读取失败");
}
);
}
} else {
// ios
plus.cache.clear(function () {
uni.showToast({
title: "缓存清理完成",
duration: 2000,
});
});
} // #endif
}
},
});
return getStorageSize();
}
本文标签: uiniapp
版权声明:本文标题:uiniapp使用 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729706728a1210812.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论