利用uni-app 开发的iOS app 发布到App Store全流程

本笔记记录了本人利用HBuilderX 开发uni-app项目到打包iOS app包后，上架App Store商店详细全过程步骤，希望对有需要的小伙伴给予些许帮助。

因该markdown排版不兼容问题，文章会跳转至 有道云 在线分享链接中 阅读原文

原文截图：

最新 App store 上架教程（uni-app版） - Release Notes

1.0.3 20200927

• 更新官方对应用审核流程的状态。
  注：最新审核后续将同步社区另一篇记录 AppStore 审核被拒原因记录及解决措施

1.0.2 20200925

• 新增首次驳回拒绝邮件解决措施。

1.0.1 20200922

• 首次提交关于App Store上架步骤流程：
  兼容检查 -> 账号申请 -> 证书申请 -> 发布准备 -> App Store上架 -> 审核后续
• 提交审核iOS审核团队联系方式；

简介

HBuilderX 3.3.0+ 更新uni-app编译器，支持基于 Vite 编译到小程序平台。

至此，uni-app在App/H5/小程序全平台支持Vue 3.0开发，且全平台支持Vite编译器，下载 HBuilderX 3.3.0+ 体验。

Tips：

• H5/PC Web 平台：hello-uniapp H5 端已迁移 vue3，点击体验

除支持 vue3 语法特性外，uni-app 特有的生命周期钩子支持 Composition API，如 onLaunch，onShow，onLoad... ，使用方法见 Vue2 迁移 Vue3 文档

HBuilderX创建支持 vue3 的 uni-app 项目

从 HBuilderX 3.3.0+ 起，支持创建 vue3 的 uni-app 项目，一套代码运行到多端：

1. 创建一个 uni-app 项目

2. 在项目的 manifest 的「基础配置」中切换 「vue 版本选择」，默认是 vue2，切换为 vue3 即可

cli 创建支持 vue3 的 uni-app 项目

1. 创建 Vue3/Vite 工程

   # 创建以 javascript 开发的工程  
   npx degit dcloudio/uni-preset-vue#vite my-vue3-project  
   
   # 创建以 typescript 开发的工程  
   npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project  

2. 进入工程目录

   cd my-vue3-project  

3. 安装依赖

   npm i  或  yarn  

4. 运行

   # 运行到 h5   
   npm run dev:h5  
   # 运行到 app   
   npm run dev:app  
   # 运行到 微信小程序  
   npm run dev:mp-weixin  

5. 打包

   # 打包到 h5   
   npm run build:h5  
   # 打包到 app   
   npm run build:app  
   # 打包到 微信小程序  
   npm run build:mp-weixin  

更新依赖版本

参考：https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion

从 vue2 迁移到 vue3

请参看官方文档从 vue2 迁移到 vue3

注意事项

• vue3 响应式基于 Proxy 实现，不支持iOS9和ie11。vue3 中文文档。
• 暂不支持新增的 Teleport,Suspense 组件。
• 在 Vue3 中， 处理 API Promise 化 调用结果的方式不同于 Vue2。更多
  • Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法
  • Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据

欢迎开发者反馈使用该版本遇到的问题，我们将积极收集意见。

HMS生态已经有不少的好功能了，不知道有志同道合的朋友一起研究开发一版uni的插件系统吗？

生成jpg 格式缩略图,以视频名称命名并保存在视频旁边,如果已经有图片,则直接范围图片路径.
Navit.js

async getAndroidVideoThumb(path)  
{  
                path=plus.io.convertLocalFileSystemURL( path);  
        var pathns=path.split(".");  
        pathns[pathns.length-1]="jpg";  
        var imgpath=pathns.join(".");  
        var File = plus.android.importClass("java.io.File");  
        var file = new File(imgpath);  
        if(file.exists())return "file://"+plus.io.convertAbsoluteFileSystem(imgpath);  
        var FileOutputStream  = plus.android.importClass("java.io.FileOutputStream");  
        var outputStream = new FileOutputStream(file);  
        var Bitmap = plus.android.importClass("android.graphics.Bitmap");  
        var thum=plus.android.invoke("android.media.ThumbnailUtils","createVideoThumbnail",path,1);  
        var result= plus.android.invoke(thum,"compress",Bitmap.CompressFormat.JPEG,100,outputStream);  
        if(!result)return null;  
        plus.android.invoke(thum,"recycle");  
        thum=null;  
        plus.android.invoke(outputStream,"flush");  
        plus.android.invoke(outputStream,"close");  
        return "file://"+plus.io.convertAbsoluteFileSystem(imgpath);  
}

uniapp制作微信小程序 不管是自带的tabber底部导航栏还是自定义的都会出现切换页面会一闪一闪的.

复现:安卓手机上的微信小程序,

ios不会出现 , 安卓手机app也不会出现 安卓的小程序会出现切换闪一下
这是uniapp的bug吗?

参考官方说明内容：
如果其他软件能检测到手机，但是HBuilder无法检测到，将HBuilder安装目录下的tools目录（MAC下为HBuilder.app/Contents/tools目录）下的文件备份，然后将tools\1.0.31目录下的文件拷贝到tools目录下，重启HBuilder

首先app和小程序支付的参数不一样，小程序是驼峰的，app不是

小程序的是：appId，signType，timeStamp，nonceStr，package
app的是：appid，partnerid，prepayid，noncestr，timestamp，package

var orderInfo = {
"appid":res.data.appId,
"noncestr":res.data.nonceStr,
"package":res.data.packageValue,
partnerid":res.data.partnerId,
"prepayid":res.data.prepayId,
"timestamp":res.data.timeStamp,
"sign":res.data.sign
}

uni.requestPayment({
provider: 'wxpay',
orderInfo: orderInfo, //微信 订单数据

然后就可以调起支付了，当然，你需要看看，你签名对不对
校验接口 https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=20_1

这个超过1就得考虑使用的组件是否有定时器没有清除加速了或者出现死循环

二维码生成不了大多都是val属性没有绑定到值所引起的,在hospital-qrcode页面有一个反例可以参考.
这个页面生成不了二维码的主要原因是路由传参的值需要在onLoad中获取,但事先需要在data()中定义这个对
象,在created时初始化了对象.生命周期顺序:created->onLoad->qrcode mounted->mouted

    ...  
    data() {  
        patientInfo: {}  
    }  
    ...

这就造成了`tki-qrcode`组件在`mounted`的时候获取的`val`是`undefined`(patientInfo.qrcode=undefined)  
,以下为`tki-qrcode`挂载源码  
```javacript  
mounted: function () {  
    if (this.loadMake) {  
        if (!this._empty(this.val)) { // -> val为undefined,就不会执行_makeCode()函数  
            setTimeout(() => {  
                this._makeCode()  
            }, 0);  
        }  
    }  
}  
```  
所以呢,需要给`tki-qrcode`新增一个属性`:onval="true"`,在`onLoad`后`patientInfo`对象有了数据  
,`val`会重新绑定值,自动生成二维码.  

                    <view class="qrcode">  
                        <tki-qrcode class="uni-popupTabbar-qrcodeimg" ref="qrcode" cid="hosCode" :val="patientInfo.qcode" :icon="qrcode"  
                         :size="200" unit="upx" :loadMake="true" :onval="true">  
                        </tki-qrcode>  
                        <!-- 反例! 二维码不会生成-->  
                        <tki-qrcode class="uni-popupTabbar-qrcodeimg" ref="qrcode" cid="hosCode" :val="patientInfo.qcode" :icon="qrcode"  
                         :size="200" unit="upx" :loadMake="true" >  
                        </tki-qrcode>  
                    </view>

1.技术选择：uni-app的UniPush（集成个推）、Java SpringBoot

2.前端代码：App.vue的onLaunch方法中加入

// #ifdef APP-PLUS  
    const _handlePushClick = function(message) {  
        // 自行处理消息点击事件  
        let {payload} = message;  
        console.log( message );  
    };  
    const _handlePushReceive = function(message) {  
        // 消息接收事件，手动创造本地通知信息  
        plus.push.createMessage(msg.content, message.payload, {  
            title: message.title  
        })  
    };  
    plus.push.addEventListener('click', _handlePushClick);    
    plus.push.addEventListener('receive', _handlePushReceive);    
    APPUpdate();  
// #endif

3.后端代码：

// 如果需要使用HTTPS，直接修改url即可  
//private static String url = "https://api.getui.com/apiex.htm";  
private static String url = "http://api.getui.com/apiex.htm";  
private static String appKey = "你的app key";  
private static String masterSecret = "你的app MasterSecret";  

    /**  
     * APP发送系统通知  
     * @param noticeForm 前端表单 包括title、content  
     * @return  
     */  
@PostMapping("/notice")  
public void notice(@RequestBody AppNoticeForm noticeForm) {  
        // 获取应用基本信息  
        IGtPush push = new IGtPush(url, appKey, masterSecret);  
        // 选择透传通知模板，个推离线只支持透传  
        TransmissionTemplate template = new TransmissionTemplate();  
        template.setAppId(appId);  
        template.setAppkey(appKey);  

        String payload = JSONUtil.toJsonStr(form);  
        template.setTransmissionContent(payload);    // 设置透传内容  
        template.setTransmissionType(2);    // 2代表客户端收到消息后需要自行处理  

        // 配置第三方厂商推送  
        Notify notify = new Notify();  
        notify.setTitle(form.getTitle());  
        notify.setContent(form.getContent());  
        notify.setType(GtReq.NotifyInfo.Type._intent);  
        // 设置intent 注意格式要正确（修改你的包名）  
        notify.setIntent("intent:#Intent;action=android.intent.action.oppopush;" +  
                "launchFlags=0x14000000;" +  
                "component=你的包名/io.dcloud.PandoraEntry;S.UP-OL-SU=true;" +  
                "S.title=" + form.getTitle() + ";" +  
                "S.content="+  form.getContent() + ";" +  
                "S.payload=" + payload + ";end");  
        notify.setPayload(payload);  
        template.set3rdNotifyInfo(notify);  

        List<String> appIds = new ArrayList<>();  
        appIds.add(appId);  
        AppMessage message = new AppMessage();  
        message.setData(template);  
        message.setAppIdList(appIds);  
        message.setOffline(true);  
        message.setOfflineExpireTime(8* 1000 * 3600);    // 离线有效时间 单位毫秒  
        message.setStrategyJson("{\"default\":1}");  
    // 推送给所有用户  
        IPushResult ret = push.pushMessageToApp(message);  
    }

4.在dcloud的开发者中心配置 厂商推送设置 即可完成离线推送
参考: UniPush使用指南

本文实现推送，使用的是透传信息。
以下内容只做学习记录，等全部测试完成后，更新代码。
iOS推送流程说明：
iOS的消息是分两部分的：一部分是走APNs的通知栏消息，另一部分是走个推通道的透传消息。这两部分是服务端推送代码里面应用设定好的，分别是两个不同的方法。如果消息下发的时候，当应用是在后台的（也就是应用是离线）那么会收到APNs的通知，透传消息就进离线了；只有当APP下次在线的时候（也就是下次应用到前台的时候）才会通过个推通道下发，如果当下发的时候应用是在前台的，客户端就直接收到透传消息。
安卓推送流程说明：
在线情况下使用的是个推消息通道；离线情况，如果不集成厂商，那么透传信息进入离线，只有当app在线时，才会触发；离线情况集成厂商，会走厂商通道。
在使用的过程中，尤其应该注意payload的类型，以及苹果端对于在线、离线消息的处理

由于项目需要，公告自动滚动展示，在网上找了下，有些是可以实现的，
例如：

https://ask.dcloud.net.cn/article/35712
但是有点小问题：公共字数过长的话，展示不全。

还有的是使用css的动画效果实现，大家都知道css动画是指定了时间的，如果公告内容过多的话，会展示

所以重新写了一个组件，也有点瑕疵，就是公告滚动完之后再滚动下前会有一段的空白，后面再优化

组件地址：
git@codehub.devcloud.huaweicloud.com:uni-appComponent00001/uni-appDemo.git

使用方法：
1、将 /components/screenTextScroll.vuecopy到自己的项目中（components目录下）
2、在main.js中添加代码

import screenTextScroll from '@/components/screenTextScroll.vue'   
Vue.component('textscroll', screenTextScroll)

3、在需要使用的视图中调用

<textscroll :list="list" />

list为滚动的文字集合