uniapp 打包 app 时，默认安全区域的颜色是白色。如果页面和安全区域接触的区域不是白色，就会出现色差，这个时候体验就真心不好啊。不过，可以设置去搞掉。
我也是在做聊天功能时才碰触到颜色的问题。
https://uniapp.dcloud.net.cn/collocation/manifest-app.html#full-manifest
在文档中，找到 safearea 配置，复制过去在 manifest.json 找到 app-plus 添加进去去配置。
"safearea": {
"bottom": {
"offset": "none"
}
},
可以这样设置。
https://blog.csdn.net/CSDN877425287/article/details/107484287
要实现 app 内版本更新得走以下几个流程：
对系统当前 app 版本的获取（1.0.1 + ‘.’ + 100）(版本名称 + 版本号控制)。
对服务端接口请求 app 版本信息（定义当前最新版本号）。比如 app 之前的版本是 1.0.1.100，返回给前端就是这个。后来你新提交了一个版本 1.0.2.100，并审核通过了。当审核通过时，你修改后端配置，将版本号改成 1.0.2.100，这个时候返回前端就是 1.0.2.100。
用当前 app 版本信息和服务端版本信息进行对比。如果不一样，则表示服务端有新的版本。应弹窗提示用户进行 app 更新。（版本可以定义两个，android 和 ios 各一个，每个系统同一时间可能会不一样）。
弹窗提示用户是否要更新。用户点击确定。如果是 ios 系统，则跳转到商店更新（亲自测试可行）。如果是 android 系统，则下载安装包更新（没亲测过），ios 是必须要走商店，且只有一个商店，比较好弄，也正规。android 打个包就可以装，上商店也很多家都可以。说它简单是只要个正常的包就可以装，说它不简单就是商店太多，审核太麻烦，还得要软著，太心累。一般不到万不得已，根本就不想上 android 商店。
上边这个流程是在客户端做判断，并去处理升级。感觉不太好，因为客户端一旦上架你短时间内很难修改和改变。如果把判断放在服务端，你可以随时随地的修改。以备异常情况。（也是文章写着写着，想法也就变了）
虽然 uniapp 官方提供了套件，但还是个人用户实现的更自由些（套件的升级 ui 界面 好像不能任意自定义）。
一定要使用条件编译，也就是 app 才需要这样。因为有些 api 只有 app 端才有的。
// #ifdef APP-PLUS
# 从服务端获取 app 版本信息
GetAppVersion().then(res => {
// 获取当前已安装的 app 的版本信息
let curVersion = plus.runtime.version + '.' + plus.runtime.versionCode;
let osName = uni.getSystemInfoSync().platform;
if (osName == 'ios') {
if (res.ios_version && res.ios_version != curVersion) {
// 弹提示是否要更新。如果更新，就跳转到苹果应用商店
uni.showModal({
title: '更新提示',
content: '发现新版本，是否要更新?',
cancelColor: '#383838',
confirmColor: '#ffc80b',
success(res) {
if (res.confirm) {
let appleId = 6443910575;
plus.runtime.launchApplication(
{
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
},
function(e) {
console.log(e.message);
}
);
}
}
});
}
} else if (osName == 'android') {
if (res.android_version && res.android_version != curVersion && res.downUrl) {
// 弹窗提示是否要更新。如果更新，跳转到特定商店更新或下载更新。（弹窗省略了，去商店也省了）
var downTask = plus.downloader.createDownload(url, {}, function(d, status) {
//d为下载的文件对象
if (status == 200) {
//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
plus.runtime.openFile(d.filename); //选择软件打开文件
uni.showToast({
icon: 'none',
title: '更新成功'
})
} else {
//下载失败
plus.downloader.clear(); //清除下载任务
uni.showToast({
icon: 'none',
title: '更新失败'
})
}
})
//开始下载
downTask.start();
//监听下载进度
downTask.addEventListener('statechanged', (task) => {
let percentage = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100
);
if (percentage == 100) {
// 更新完成
}
})
}
}
});
// #endif
上边仅供参考，实际情况需调试。后一个思路，由服务端判断是否要更新，并提供更新信息（下载地址，商店地址等）这种方式比较好。还有 android 这边如果自己做下载更新，还得做个好看的 ui 升级界面。有进度条显示那种。
app 接受到推送消息后，如果用户点击消息，一般是到达目标页面。这个时候解析消息并进行处理。
plus.runtime.setBadgeNumber(0); 。 // #ifdef APP-PLUS
let goPage = (value) => {
let tabbars = ['pages/home/index', 'pages/pdd/index', 'pages/message/index', 'pages/mine/index'];
let isTab = false;
for(let tabbar of tabbars) {
if (value.indexOf(tabbar) >= 0) {
isTab = true;
break;
}
}
if (isTab) {
uni.switchTab({
url: value
});
} else {
uni.navigateTo({
url: value
});
}
}
// 通过推送消息进来的
uni.onPushMessage((res) => {
plus.runtime.setBadgeNumber(0);
if (res && res.data && res.data.payload && res.data.payload.page) {
goPage(res.data.payload.page)
}
});
// #endif
消息推送那边，我们把 page 参数 放在 payload 里。
{
"appId": "__UNI__XXXX",
"push_clientid": "6eb119fabc0123f545086eexxxxxxxx",
"title": "小区宝来电",
"content": "人生若只如初见，何事秋风悲画扇。",
"payload": { "page": "pages/home/topic/detail?id=6" }
}
习惯了服务端调用接口（unipush1），没有使用过云函数的朋友，又对 unipush2 的文档没完全操作一遍。一般会觉得 unipush2 的服务端调用有些奇怪。其实，如果按照文档走下去，也会没事。
其实，unipush2 的服务端调用和传统的服务端调用接口一样的。只是这里是调用的 dcloud 的 url。把那个 url 当做是服务端要调用的接口就可以了。
那这个 url 又怎么来，就是通过对建立的云函数 url 化就可以了。这里，重点就是讲怎么建立云函数以及怎么将云函数 url 化，还有通过 postman 进行测试。
其实，通过这种方式，更自由简单。只要读 dcloud 的文档就可以了，完全不考虑个推，也不用去注册个推账号。
如果已打包成功，在 dcloud 上推送证书也配置好了，并且通过 dcloud 的后台测试成功过推送。准备工作就不用看了。直接看最后的正题如何建云函数以及 url 化，还有调用。
这里以 ios 端为例，以手机端基座为例。（正式版就是直接打包和换个证书）
1.1 – 配置 app 模块。
打开项目根目录下的 manifest.json 文件， 切换到 App模块配置， 按图这样勾选，保存。
1.2 打包基座。
点击顶部菜单， 发行->原生App-云打包，出现弹窗， 按上图这样配置，打包基座。会提示您打包成功或失败。肯定要成功哈。有了基座就方便干事了。
1.3 运行到基座。
将手机和 mac 连接好。点击顶部菜单，运行->运行到手机或模拟器->运行到iOS App基座，弹窗，确定直到提示成功，手机那边启动 app就好了。
1.4 在手机端打开 app，同意各种权限。
推送虽然用到个推，可用户不用管个推，dcloud 官方自己管就可以。
点击下边链接，进入到 dcloud 开发中心进行证书配置。一定要选择好对应的 app， 就是当前应用选择。
点击侧边栏，选择 应用信息，开始配置信息，iOS BundleId 配正确，关联服务空间选选好。
再点击侧边栏的 厂商推送设置，如上图所示，进行配置。
https://dev.dcloud.net.cn/pages/app/push2/thirdparty
获取 cid
uni.getPushClientId({
success: (res) => {
let push_clientid = res.cid
console.log('客户端推送标识:',push_clientid)
},
fail(err) {
console.log(err)
}
});
如果前边的动作都正确，你应该会收到推送的。
到这里一定要保证能收到通知。到此，仅仅是使用 dcloud 的后台测试，不能用于正式项目场景。正式项目场景往往需要通过后端接口调用推送。比如有人支付了一个报名了一个活动。可以通过后端把这个推送信息发送到活动发布者那里，告诉他有人参加了活动，请及时处理。
1.1 创建云开发环境，关联云服务空间
鼠标放在项目名称上，右键选择 创建uniCloud云开发环境，选择 阿里云。选择什么云，和你在 dcloud 后台创建关联的云一样就可以了。先默认创建一个云开发环境。
1.2 创建云函数
1.3 配置和编写云函数
package.json
{
"name": "unipush",
"version": "1.0.0",
"main": "index.js",
"description": "消息推送",
"extensions": {
"uni-cloud-push": {}
},
"author": "vini123"
}
index.js
'use strict';
exports.main = async (event, context) => {
let body = event.body;
if (event.isBase64Encoded) {
body = Buffer.from(body);
}
if(!body) {
return { message: 'no body'};
}
const param = JSON.parse(body);
// 云函数是通用的，和项目没有直接的关系。通过传递 appId,可以为多个项目进行推送
const uniPush = uniCloud.getPushManager({
appId: param.appId
});
return await uniPush.sendMessage({
"push_clientid": param.push_clientid,
"title": param.title,
"content": param.content,
"payload": param.payload,
"force_notification": true,
"request_id": param.request_id,
"badge": param.badge
});
};
1.4 上传和运行云函数。因为该函数写了需要接受参数，不方便直接运行。如果想直接运行，将上边的参数直接写死。直接 send。鼠标右键上传并运行 就好。这里是动态的，仅仅上传部署就好了。
同名函数会相互覆盖。记得记得。所以这里 unipush 就要做一个通用的。（未关联云服务空间是不能上传的，先进行关联）
1.5 后台查看云函数
如果能看到上图这样的，表示你云函数已经好了。怕 dcloud 域名长不好记，可以绑定你自己备案过的域名。通过设置 CNAME 记录来映射。
1.6 函数 url 化说明
在云函数->云函数管理 页面，点击页面底下的 云函数URL化 的编辑按钮，设置访问 path。
通过https://${云函数Url化域名}/${path}直接访问函数，其中${path}是配置的函数触发路径或其子路径。
https://${云函数Url化域名}/ 部分，你创建云空间的时候就有了。只是你如果自定义成自己的域名后，会变成你的域名。这些在云函数详情页面都会完全显示。我们只需要定义 path 部分。path 最好和函数名一致，这样比较好理解。比如叫 unipush， 就知道这个 url 是做推送用的。完整的 url 如：https://xxx.com/unipush 简单吧，自定义的域名短呀短，好记呀好记。
1.7 使用 postman 调用该函数（就是以 get 方式访问该 url，参数记得要带上。访问方式要注意 get 和 post 会有所不同）
postman 配置如上图所示。这里没有任何授权，也就是任何人都可以调用。注意保护好隐私。
手机端接受到推送效果如上图所示。
1.8 上边算是测试完成了。你可以在自己的服务端如 php、java、go等服务端去请求 url 调用。
这里是 php 的实例：
$data = [
'appId' => '__UNI__Axxxxx,
'push_clientid' => 'fe6d8614ddcc42a30fc10xxxxxxx',
'title' => '小区宝来电',
'content' => '人生若只如初见，何事秋风悲画扇。',
'payload' => ['text' => '体验一下吧'],
];
curl('https://xxxx.com/unipush', json_encode($data), true, true);
/**
* @param string $url 请求网址
* @param bool $params 请求参数
* @param bool $post 请求方式，是否是post
* @param bool $https 请求http协议，是否是https
* @return bool|mixed
*/
function curl($url, $params = false, $post = false, $https = false)
{
$httpInfo = array();
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36');
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
if ($post === true) {
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_URL, $url);
} else {
if ($params === false) {
curl_setopt($ch, CURLOPT_URL, $url);
} else {
if (is_array($params)) {
$params = http_build_query($params);
}
curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);
}
}
if ($https === true) {
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 对认证证书来源的检查
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
}
$response = curl_exec($ch);
if ($response === false) {
Illuminate\Support\Facades\Log::error(sprintf('curl 错误。 url:%s, error:%s', $url, curl_error($ch)));
return false;
}
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$httpInfo = array_merge($httpInfo, curl_getinfo($ch));
curl_close($ch);
return $response;
}
处理 ** API getFileSystemManager is not yet implemented** 问题
wx.chooseImage({
success: res => {
let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], 'base64')；
}
})
wx.canvasToTempFilePath({
success: res => {
let base64 = wx.getFileSystemManager().readFileSync(res, 'base64')；
}
});
对应到 uniapp，将 wx 换成 uni 即可。如：
# 该方法在微信小程序中可行，混编的 h5 不行，可通过条件编译处理
uni.getFileSystemManager().readFileSync(r, 'base64');
# 处理如下
// 将网络图片转换成 base64 各不相同
// #ifdef APP-PLUS
uni.request({
url: this.extra.topic.thumbnail,
method: 'GET',
responseType: "arraybuffer",
success: res => {
const arrayBuffer = new Uint8Array(res.data); //先将本地图片路径转换成array类型
const base64Img = uni.arrayBufferToBase64(arrayBuffer); //再转换成base64类型
}
});
// #endif
// #ifdef MP
uni.getImageInfo({
src: this.extra.topic.thumbnail,
success: res => {
if (res.errMsg == 'getImageInfo:ok') {
const base64Img = uni.getFileSystemManager().readFileSync(res.path, 'base64');
}
},
fail: error => {
this.extra.topic = null;
}
});
// #endif
使用一个 url 链接就可以打开一个 app，是个多方便的事情。不过，得先安装该 app 啊。不过，肯定是蛮好的。
{
"applinks": {
"apps": [],
"details": [
{
"appID": "VQYDABC49G.pro.xiangrong.xiaoqubao",
"paths": [ "/ulink/*"]
}
]
}
}
apps 就是空的，appID 的 VQYDABC49G 去开发账号中 Certificates, Identifiers & Profiles 的 Identifiers 中查看，就是 App ID Prefix。后半的 pro.xiangrong.xiaoqubao 就是 Bundle ID。
paths 自己定义。用于处理可以跳转到App的链接，支持通配符*，?以及NOT进行匹配，匹配的优先级是从左至右依次降低。 apple-app-site-association 放在根目录，paths 加个路劲方便和其他路径区分开来。如果该域名也有其他业务的话。
上边的内容你要修改的好好的。然后放在域名映射的根目录的 .well-known 文件夹下。然后通过 xxxx/.well-known/apple-app-site-association 能够访问到就可以。
当然，如果使用 nginx，可以直接在 nginx 的 .conf 中配置 location 也可以。
"capabilities" : {
"entitlements" : {
"com.apple.developer.associated-domains" : [ "applinks:zeipan.com" ]
}
},
测试。上边的部分都准备好了，打开备忘录，输入link 地址。 比如： https://zeipan.com/ulink/?title=test。 保存，点击链接。如果上边都配置对了，这个时候就可以打开刚才安装的 app。
接受参数。 通过 https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments 获取参数。有了参数，你就可以做想做的事情，比如跳转到某个页面，传递某个参数等等。
这里以接受参数，然后跳转到某个页面为例：
let params = null;
if(plus.runtime.arguments != ""){
try{
params = JSON.parse(plus.runtime.arguments);
}catch(e){
let arr = plus.runtime.arguments.split('?');
params = {};
if (arr.length == 2) {
arr = arr[1].split('&');
for(let str of arr) {
let p = str.split('=');
if (p.length == 2) {
params[p[0]] = decodeURIComponent(p[1]);
}
}
}
}
let tabbars = ['views/home/index', 'views/message/index', 'pages/mine/index'];
if (params.page) {
let isTab = false;
for(let tabbar of tabbars) {
if (params.page.indexOf(tabbar) >= 0) {
isTab = true;
break;
}
}
if (isTab) {
uni.switchTab({
url: params.page
});
} else {
uni.navigateTo({
url: params.page
});
}
}
}
注意对传递的 url 进行 encodeURIComponent 和 decodeURIComponent。
通过各种方式方法将 app 上传到 app sotre connect 中，准备提交新版本，进行发布时，发布构建版本不不见了。这个时候肯定会很着急的。咋办咋办呢。有一个反馈也行啊，没有任何反馈就是一抹黑。网上说使用了某个权限，没有在 plist 中进行说明。说明了就好。这个是一方面，也不全面。
登录进去 app store connect，然后选择你的app，点击上方的 TestFlight，在这里可以看见你上传的 app 信息。如果是在处理中，等等就好（这是一个反馈，免得一抹黑），如果准备提交。你就可以去构建版本了。
判断手机上是否安装了常用的 app 是一个很必要的功能。比如你 ios 端，想做微信登录功能，就得先判断手机是否安装了微信。因为如果你不判断，直接显示微信按钮，如果用户手机根本没装微信，app 上架就会不成功。
https://ask.dcloud.net.cn/article/35621
https://ask.dcloud.net.cn/article/39182
let pinfo = {
pname: 'com.tencent.mm',
action: 'weixin://'
}
let hasWeixin = plus.runtime.isApplicationExist(pinfo);
console.log(hasWeixin)
通过 URLscheme 信息，通过 plus.runtime.isApplicationExist 来判断。
常用的 app URLscheme信息
| 平台 | pname | action |
|---|---|---|
| 微信 | com.tencent.mm | weixin:// |
| com.tencent.mobileqq | mqq:// | |
| 微博 | com.sina.weibo | sinaweibo:// |
| 淘宝 | com.taobao.taobao | taobao:// |
| 支付宝 | com.eg.android.AlipayGphone | alipay:// |
| 京东 | com.jingdong.app.mall | openApp.jdMobile:// |
| 高德地图 | com.autonavi.minimap | iosamap:// |
| 百度地图 | com.baidu.BaiduMap | baidumap:// |
| 优酷 | com.youku.phone | youku:// |
| 拼多多 | com.xunmeng.pinduoduo | pinduoduo:// |
| 小区宝 | pro.xiangrong.xiaoqubao | xiaoqubao:// |
哈哈，当然我们小区宝也有
拼多多 URLscheme
# app 系统
let osName = plus.os.name;
console.log(osName);
# 系统名字 Android，iOS
app 中能直接打开小程序也是一个很好的体验。那么怎么搞呢。 uniapp 混编的是这样弄的。
https://uniapp.dcloud.net.cn/api/other/open-miniprogram.html#navigatetominiprogram
https://www.html5plus.org/doc/zh_cn/share.html#plus.share.ShareService.launchMiniProgram
先通过 getService 拿到 weixin，再调用 launchMiniProgram 方法。
// #ifdef APP-PLUS
plus.share.getServices((res) => {
let weixin = res.find(i => i.id === 'weixin');
if (weixin) {
weixin.launchMiniProgram({
id: 'gh_b8e08725bcda',
path: 'pages/meet/index',
type: 0
}, (res) => {
}, (err) => {
});
}
}, (err) => {
console.log("获取分享服务列表失败： " + JSON.stringify(e));
});
// #endif
注意点：
近期评论