app-plus の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +uniapp+app-plus へ行く。
• +uniapp+app-plus の差分を削除

#author("2024-03-17T12:59:38+08:00","default:Admin","Admin")
#author("2024-07-21T08:35:37+08:00","default:Admin","Admin")
[[uni-app]]

&color(red){※前提条件：vue3 的uniapp开发};

#contents

* 概要 [#d54feb37]

以plus开头的方法都是属于HTML5+环境调用的方法。

plus不能在浏览器环境下使用，它必须在手机APP上才能使用

#codeprettify{{
// #ifdef APP-PLUS
var appid = plus.runtime.appid;
console.log('应用的 appid 为：' + appid);
// #endif
}}

* API [#y841e7c4]

** getCurrentPages() [#y97d73ee]

函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

#codeprettify{{
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'\}\}); //动态重设bounce效果
    // #endif
  }
}
}}

** $vm [#y5b844d5]

当前页面的 Vue 实例

通过页面的 Vue 实例可以获取页面的数据、调用页面上的方法以及监听页面的生命周期等
#codeprettify{{
const page = getCurrentPages()[0];
const vm = page.$vm;
// 监听生命周期，小程序端部分其他生命周期需在页面选项中配置过才可生效
vm.$on('hook:onHide', () => {
  console.log('onHide');
});
// 获取页面数据
console.log(vm.$data.title);
// 调用页面方法
vm.test()
}}

* 使用模拟器调试 [#qd8e5fe3]

下面是使用夜深浏览器的设置

 https://blog.csdn.net/weixin_53221528/article/details/135032877

adb路径为模拟器对应的端口号
#codeprettify{{
夜神模拟器：62001
天天模拟器：6555
海马玩模拟器：26944
逍遥模拟器：21503
雷电模拟器：5555
}}

* 打包 [#i1cdf923]

“发行”-> “原生APP-云打包”

&ref(uniapp_apk1.png);

官方文档

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

** keytool.exe [#w774f493]

keytool.exe文件存放于JDK安装后的下面路径里面

 %安装路径%\Java\jdk1.8.0_40\bin
* Troubleshooting [#efeac19d]

大部分APP的运行错误都是下面的错误开头的

 reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->

** Uncaught TypeError: Cannot read property 'FormData' of undefined [#wde0e682]


&color(red){非常重要};
- 因为App的js运行在jscore下而不是浏览器里，没有浏览器专用的js对象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象。
- new FormData 也是浏览器定制的对象，只适用于web端，uniapp非H5端不支持
- 【还有】在uni-app中,props是无法访问this的，而在h5中是可以的，所以这个错误会在uni-app的APP端出现，而h5是正常的
- axios 在小程序里用不了

解决方法1：

- 使用uniapp 自带的api uni.uploadFile(OBJECT)
- 使用flyio
 https://wendux.github.io/dist/#/doc/flyio/readme

#codeprettify{{
 XXX
}}

** Uncaught SyntaxError: Invalid left-hand side in assignment [#pe05cf65]

即左边的参数引用报错。 

** 检测到当前使用的ADB不支持反向代理，如果出现连接不上的问题，请更换HBuilder自带的ADB进行真机运行或保持手机和电脑在同一个局域网下 [#de748542]

重新连接一次手机即可

** [Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. [#baca428e]

原因不明，解决方法：
#codeprettify{{
methods: {
    toJSON(){
        return this;			
    },
}}


** 图标、启动页面设置不起作用 [#c6e76c8a]

uniapp的“运行到手机”的话，manifest里面设置的图标等不起作用，只有打包之后才能生效



#hr();
Comment：
#comment_kcaptcha