uniapp常用开发技巧

一、小程序分享

由于微信对分享好友、朋友圈默认不具备此功能，如果需要添加则需要单独进行代码配置，配置也很简单只需要写一个对应的生命周期（和data同级）就可以。

	onShareAppMessage(){
			return {
				 title: '自定义分享标题',
			}
		},

默认不填写参数也可以使用分享功能，只不过都是按默认的参数执行的

参数名	类型	必填	说明	平台差异说明
title	String	是	分享标题
path	String	是	页面 path ，必须是以 / 开头的完整路径。注意：京东小程序，开头不要加'/'	QQ小程序不支持
imageUrl	String	否	分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4
content	String	否	百度小程序表现为：分享内容；支付宝小程序表现为：吱口令文案	百度小程序、支付宝小程序
desc	String	否	自定义分享描述	支付宝小程序、抖音小程序、京东小程序
bgImgUrl	String	否	自定义分享二维码的背景图，建议大小750*950（网络图片路径）	支付宝小程序
query	String	否	QQ小程序查询字符串，必须是 key1=val1&key2=val2 的格式。从这条转发消息进入后，可通过 qq.getLaunchOptionSync() 或 qq.onShow() 获取启动参数中的 query。	QQ小程序
templateId	String	否	开发者后台设置的分享素材模板 id	抖音小程序
mpId	String	否	微信小程序id，此场景用于分享到微信后，用户点击分享卡片，进入该appid对应的微信小程序，实现引流到微信小程序	京东小程序
type	Number	否	转发形式（0 - 微信小程序正式版；1 - 微信小程序开发版；2 - 微信小程序体验版；京东App9.0.0开始不填或者其他值都会先判断是否有url参数，如果有打开分享后显示url对应页面，否则默认生成京东小程序官方的一个分享中间页面，点击可跳到京东app里面的对应小程序。）	京东小程序
mpPath	String	否	微信小程序路径	京东小程序
channel	String	否	渠道（不写默认微信朋友，微信朋友圈）	京东小程序
url	String	否	h5链接地址（h5分享填写，不填默认中间页）	京东小程序
success	Function	否	接口调用成功的回调函数	支付宝小程序、百度小程序
fail	Function	否	接口调用失败的回调函数	支付宝小程序、百度小程序
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）	百度小程序

分享微信朋友圈

onShareTimeline() {},

但是只能对单独页面进行分享配置，如果想要对每个页面进行分享可以采用全局注册mixin的方式

utils/mixin.js

export default {
	data() {
		return {}
	},
	//1.发送给朋友
	onShareAppMessage() {},
	//2.分享到朋友圈
	onShareTimeline() {},
}

main.js

// 导入并挂载全局的分享方法
import share from './utils/mixin.js'
Vue.mixin(share)

二、适配ios底部距离

<view class="flexC submit ">
	  <view class="flexC">提交</view>
</view>

.flexC {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		view {
			border-radius: 10px;
			width: 90%;
			height: 80rpx;
			background: skyblue;
			color: #fff;
		}
	}

这是一个很常见的场景，在页面的底部固定住按钮方便用户操作，在安卓中是正常显示的，因为ios底部有一个菜单的横线就会遮住

添加一个类名就好了

<view class="flexC submit iosPadding">
	<view class="flexC">提交</view>
</view>

<style lang="scss">
.iosPadding {
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
</style>

safe-area-inset-left: 安全区域距离左边界的距离

safe-area-inset-right: 安全区域距离右边界的距离

safe-area-inset-top: 安全区域距离顶部边界的距离

safe-area-inset-bottom: 安全区域距离底部边界的距离

三、平台条件编译

因为uniapp是一个多端的开发框架，所以一套代码编译成多个应用避免不了使用条件编译。

什么是条件编译？

例如：想打包成h5又想打包成小程序，想在h5中做一个公众号的分享，但是这些jssdk的参数在小程序又不需要获取，这时候就可以用条件编译只在h5平台执行某段代码。

白话：不同平台执行不同的代码

官方：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

例如：

(1) js条件编译

	onLoad() {
			// h5
			//#ifndef H5
				console.log(1);
			//#endif 
			// 小程序
			//#ifndef MP-WEIXIN
				console.log(2);
			//#endif 
		},

（2）html条件编译

	<view class="flexC submit iosPadding">
		<!-- #ifdef H5 -->
		<view class="flexC">H5提交</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flexC">微信小程序提交</view>
		<!-- #endif -->
	</view>

（3）css条件编译

	// #ifdef H5
		.submit view {
			background: blue;
		}
	// #endif

	// #ifdef MP-WEIXIN
		.submit view {
			background: red;
		}
	 // #endif