目录
一、小程序分享
二、适配ios底部距离
三、平台条件编译
由于微信对分享好友、朋友圈默认不具备此功能,如果需要添加则需要单独进行代码配置,配置也很简单 只需要写一个对应的生命周期(和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)
提交
.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底部有一个菜单的横线 就会遮住
添加一个类名就好了
提交
- 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 APP-PLUS |
仅出现在 App 平台下的代码 |
#ifndef H5 |
除了 H5 平台,其它平台均存在的代码 |
#ifdef H5 || MP-WEIXIN |
在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集) |
例如:
(1) js条件编译
onLoad() {
// h5
//#ifndef H5
console.log(1);
//#endif
// 小程序
//#ifndef MP-WEIXIN
console.log(2);
//#endif
},
H5提交
微信小程序提交
(3)css条件编译
// #ifdef H5
.submit view {
background: blue;
}
// #endif
// #ifdef MP-WEIXIN
.submit view {
background: red;
}
// #endif