Write the Code. Change the World.

分类目录
5月 13

对于国内的开发生态,uniapp 的贡献可真不小。现在又推出 uts,有需要的是可以了解、学习、使用的。

什么是uts

uts,全称 uni type script,统一、强类型、脚本语言。

它可以被编译为不同平台的编程语言,如:

  • web平台,编译为JavaScript
  • Android平台,编译为Kotlin
  • iOS平台,编译为Swift(HX 3.6.7+ 版本支持)

uts 采用了与 ts 基本一致的语法规范,支持绝大部分 ES6 API。

什么是uts插件

现有的 uni-app,仍以js引擎为主。但从HBuilderX 3.6开始,uni-app 支持 uts 插件(3.6支持vue3编译器,3.6.8支持vue2编译器)。

也就是 uts 的第一步不是完整开发一个独立的 app,而是作为 uni-app 的插件。后续 uts 会持续迭代,达到完整开发 app 的水平。

uts 插件编译到 app 平台时,在功能上相当于 uni-app 之前的 app 原生插件,也就是 Kotlin 和 Swift 开发的插件。

开发 uts 插件不需要熟悉 Kotlin 和 Swift 的语法,因为使用的是基于 ts 的语法。但需要熟悉 Android 和 iOS 的系统 API,否则无法调用原生能力。

uts插件与uni原生语言插件的区别

在 HBuilderX 3.6 以前,uni-app 在 App 侧只有一种原生插件,即用 java 或 Objective-C 开发的插件。

在 uts 推出后,原来的 “App原生插件”,更名为 “App原生语言插件”。

不同的名字,代表它们需要开发者编写语言不同。但殊途同归,最后都编译为原生的二进制代码。

原生语言插件 uts插件
开发语言 java/oc uts
开发环境 Android Studio/XCode HBuilderX
打包方式 外挂aar 等产出物 编译时生成原生代码
js层调用方式 uni.requireNativePlugin() 普通的js函数/对象,可以直接 import,支持摇树优化

相当于原生语言插件,uts插件的优势:

  • 统一了编程语言(uts),一种语言开发所有平台,真正大前端。
  • 统一了开发工具(HBuilderX),免除搭建复杂的原生开发环境。
  • 插件封装中要理解的概念更少。 传统原生语言插件需要在js和原生层处理通信,使用各种特殊转换,使用特殊语法导入,注意事项很多。uts统一为纯前端概念,简单清晰。
  • uts 下前端和原生可以统一在 HBuilderX 中联调。而传统原生语言插件需要在多个开发工具间切换,联调复杂。

uts插件和Native.js的区别

  • Native.js 运行在js上,通过反射调用os api。功能和性能都不及真正的原生
  • uts 在 app 上不运行在 js 引擎里,是真正的原生。

文章来源

https://uniapp.dcloud.net.cn/plugin/uts-plugin.html

11月 21

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

11月 10

要实现 app 内版本更新得走以下几个流程:

  1. 对系统的获取(android 或 ios)。

  2. 对系统当前 app 版本的获取(1.0.1 + '.' + 100)(版本名称 + 版本号控制)。

  3. 对服务端接口请求 app 版本信息(定义当前最新版本号)。比如 app 之前的版本是 1.0.1.100,返回给前端就是这个。后来你新提交了一个版本 1.0.2.100,并审核通过了。当审核通过时,你修改后端配置,将版本号改成 1.0.2.100,这个时候返回前端就是 1.0.2.100。

  4. 用当前 app 版本信息和服务端版本信息进行对比。如果不一样,则表示服务端有新的版本。应弹窗提示用户进行 app 更新。(版本可以定义两个,android 和 ios 各一个,每个系统同一时间可能会不一样)。

  5. 弹窗提示用户是否要更新。用户点击确定。如果是 ios 系统,则跳转到商店更新(亲自测试可行)。如果是 android 系统,则下载安装包更新(没亲测过),ios 是必须要走商店,且只有一个商店,比较好弄,也正规。android 打个包就可以装,上商店也很多家都可以。说它简单是只要个正常的包就可以装,说它不简单就是商店太多,审核太麻烦,还得要软著,太心累。一般不到万不得已,根本就不想上 android 商店。

上边这个流程是在客户端做判断,并去处理升级。感觉不太好,因为客户端一旦上架你短时间内很难修改和改变。如果把判断放在服务端,你可以随时随地的修改。以备异常情况。(也是文章写着写着,想法也就变了)

运行环境管理对象(获取版本信息等能力)

官方文章

App升级中心

虽然 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 升级界面。有进度条显示那种。

11月 09

app 接受到推送消息后,如果用户点击消息,一般是到达目标页面。这个时候解析消息并进行处理。

unipush 消息推送

操作流程

  1. 当用户点击消息栏的消息时,通过 uni.onPushMessage 方法来接受消息。
  2. 获取接受消息里边的 payload 数据。payload 里边可以传递一些自定义的参数过来。
  3. 我们可以将想跳转的页面和参数定义在 page 里。并对 page 进行判断,如果 page 是 tab 页的,就做 tab 页跳转,非 tab 页就做非 tab 页跳转。
  4. 对消息数目角标清零 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" }
}
11月 09

习惯了服务端调用接口(unipush1),没有使用过云函数的朋友,又对 unipush2 的文档没完全操作一遍。一般会觉得 unipush2 的服务端调用有些奇怪。其实,如果按照文档走下去,也会没事。

其实,unipush2 的服务端调用和传统的服务端调用接口一样的。只是这里是调用的 dcloud 的 url。把那个 url 当做是服务端要调用的接口就可以了。
那这个 url 又怎么来,就是通过对建立的云函数 url 化就可以了。这里,重点就是讲怎么建立云函数以及怎么将云函数 url 化,还有通过 postman 进行测试。

其实,通过这种方式,更自由简单。只要读 dcloud 的文档就可以了,完全不考虑个推,也不用去注册个推账号。

unipush2.0 官方文档

准备工作

如果已打包成功,在 dcloud 上推送证书也配置好了,并且通过 dcloud 的后台测试成功过推送。准备工作就不用看了。直接看最后的正题如何建云函数以及 url 化,还有调用。

这里以 ios 端为例,以手机端基座为例。(正式版就是直接打包和换个证书)

准备打包 app

1.1 - 配置 app 模块。

打开项目根目录下的 manifest.json 文件, 切换到 App模块配置, 按图这样勾选,保存。

1.2 打包基座。

点击顶部菜单, 发行->原生App-云打包,出现弹窗, 按上图这样配置,打包基座。会提示您打包成功或失败。肯定要成功哈。有了基座就方便干事了。

1.3 运行到基座。

将手机和 mac 连接好。点击顶部菜单,运行->运行到手机或模拟器->运行到iOS App基座,弹窗,确定直到提示成功,手机那边启动 app就好了。

1.4 在手机端打开 app,同意各种权限。

dcloud 后台配置证书

推送虽然用到个推,可用户不用管个推,dcloud 官方自己管就可以。

点击下边链接,进入到 dcloud 开发中心进行证书配置。一定要选择好对应的 app, 就是当前应用选择。

点击侧边栏,选择 应用信息,开始配置信息,iOS BundleId 配正确,关联服务空间选选好。

再点击侧边栏的 厂商推送设置,如上图所示,进行配置。

https://dev.dcloud.net.cn/pages/app/push2/thirdparty

dcloud 后台测试推送

获取 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
    });
};

云函数

uniPush.sendMessage 介绍

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;
        }
11月 06

处理 ** 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
11月 03

使用一个 url 链接就可以打开一个 app,是个多方便的事情。不过,得先安装该 app 啊。不过,肯定是蛮好的。

相关链接

apple 文档

uniapp 文档

操作一波

  1. 创建 app id 的时候,要将 Associated Domains 打钩。

  1. 服务器端准备 apple-app-site-association 文件。该文件就是文件名,不需要任何后缀,内容如下:
{
    "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 也可以。

  1. 上边都配置好了。然后,在 app 程序端配置打包就好。这里是 uniapp 的搞法。打开配置文件 mainfest.json ,找到 App 常用其他设置,然后在关联域这里添加新项即可。比如添加 applinks:zeipan.com, 通过源码视图就可以看的到的。如:
                "capabilities" : {
                    "entitlements" : {
                        "com.apple.developer.associated-domains" : [ "applinks:zeipan.com" ]
                    }
                },
  1. 打包。如果是 uniapp,先打包基座。删除手机上的已有 app(如果之前打包过)。然后运行,运行到 App Ios 基座。

  2. 测试。上边的部分都准备好了,打开备忘录,输入link 地址。 比如: https://zeipan.com/ulink/?title=test。 保存,点击链接。如果上边都配置对了,这个时候就可以打开刚才安装的 app。

  3. 接受参数。 通过 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。

11月 02

通过各种方式方法将 app 上传到 app sotre connect 中,准备提交新版本,进行发布时,发布构建版本不不见了。这个时候肯定会很着急的。咋办咋办呢。有一个反馈也行啊,没有任何反馈就是一抹黑。网上说使用了某个权限,没有在 plist 中进行说明。说明了就好。这个是一方面,也不全面。

不灯下黑

登录进去 app store connect,然后选择你的app,点击上方的 TestFlight,在这里可以看见你上传的 app 信息。如果是在处理中,等等就好(这是一个反馈,免得一抹黑),如果准备提交。你就可以去构建版本了。

11月 02

判断手机上是否安装了常用的 app 是一个很必要的功能。比如你 ios 端,想做微信登录功能,就得先判断手机是否安装了微信。因为如果你不判断,直接显示微信按钮,如果用户手机根本没装微信,app 上架就会不成功。

https://ask.dcloud.net.cn/article/35621

https://ask.dcloud.net.cn/article/39182

调用 api

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://
QQ 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 设置 URLscheme

IOS 配置方法

Android 配置方法

https://uniapp.dcloud.net.cn/tutorial/app-ios-schemes.html#