uiniapp使用

在微信小程序中打开

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没集成的第三方插件 或者是有一些其他的骚操作那么肯定是要使用离线打包的

1. 下载Android Studio
2. 下载android 离线SDK（注意版本）
3. 发行原生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.com/uview/common/bell-selected.png" ></image>
   			 		<image class="u-page__item__slot-icon" slot="inactive-icon" src="https://cdn.uviewui.com/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.com/t/c/font_3696730_6tpgrrnftv7.woff2?t=1665403666278') format('woff2'),
	       url('https://at.alicdn.com/t/c/font_3696730_6tpgrrnftv7.woff?t=1665403666278') format('woff'),
	       url('https://at.alicdn.com/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实时通讯

1. 先到腾讯云上面找到IM实时通讯（有集成ui，和没有ui的）
2. 下载TuIkit源码，找到uniapp的复制到项目里，npm安装对应缺少的依赖
3. 把文件拉到根目录里，static，utils，ployfill，debug
4. 在main.js中引入mixins
5. 把组件复制到自己的项目里面 ui+逻辑
6. pagejson中添加路由
7. 在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.com/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.com/ 登录点击证书，完成这四个的新建，生成.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();
}