HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

(已解决)关于uniapp-微信小程序-监听web-view中的postMessage无响应问题

Webview webview通信 微信小程序

按照官方给出的示例 并且添加上message事件:

<template>  
    <view>  
        <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html" @message="message"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                webviewStyles: {  
                    progress: {  
                        color: '#FF3333'  
                    }  
                }  
            }  
        },  
methods:{  
message(data){  
console.log('我触发了')  
}  
}  
    }  
</script>

注意的是 message会在特定的时机接收到webview发送的消息(后退、组件销毁、分享),所以在H5页面发送postMessage后,在H5页面应当有后退、组件销毁、分享相关操作,那么在@message中才会调用。
于是我在H5中远程调用了uni :<script type="text/javascript" src="https://hellouniapp.dcloud.net.cn/hybrid/html/uni.webview.1.5.5.js"></script>
并且使用了postMessage

uni.postMessage({  
            data: { text:'123' }  
          });

但是在uni中却无法接收到,并且发现navigateBack等函数也无法调用,在此之后,我在uni官网查看到相关示例:https://uniapp.dcloud.net.cn/component/web-view.html#postmessage;其中有一个web-view的示例页面:


我查看该页面的源代码后(view-source:https://uniapp.dcloud.io/static/web-view.html),发现少了相关的兼容模块,在webview中的h5页面添加相关兼容sdk后,就能正常接收到消息了,如下:

var userAgent = navigator.userAgent;  
            if (userAgent.indexOf('AlipayClient') > -1) {  
                // 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。  
                document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');  
            } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {  
                // QQ 小程序  
                document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');  
            } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {  
                // 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。  
                document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');  
            } else if (/toutiaomicroapp/i.test(userAgent)) {  
                // 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。  
                document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');  
            } else if (/swan/i.test(userAgent)) {  
                // 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。  
                document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');  
            } else if (/quickapp/i.test(userAgent)) {  
                // quickapp  
                document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');  
            }  
            if (!/toutiaomicroapp/i.test(userAgent)) {  
                document.querySelector('.post-message-section').style.visibility = 'visible';  
            }
继续阅读 »

按照官方给出的示例 并且添加上message事件:

<template>  
    <view>  
        <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html" @message="message"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                webviewStyles: {  
                    progress: {  
                        color: '#FF3333'  
                    }  
                }  
            }  
        },  
methods:{  
message(data){  
console.log('我触发了')  
}  
}  
    }  
</script>

注意的是 message会在特定的时机接收到webview发送的消息(后退、组件销毁、分享),所以在H5页面发送postMessage后,在H5页面应当有后退、组件销毁、分享相关操作,那么在@message中才会调用。
于是我在H5中远程调用了uni :<script type="text/javascript" src="https://hellouniapp.dcloud.net.cn/hybrid/html/uni.webview.1.5.5.js"></script>
并且使用了postMessage

uni.postMessage({  
            data: { text:'123' }  
          });

但是在uni中却无法接收到,并且发现navigateBack等函数也无法调用,在此之后,我在uni官网查看到相关示例:https://uniapp.dcloud.net.cn/component/web-view.html#postmessage;其中有一个web-view的示例页面:


我查看该页面的源代码后(view-source:https://uniapp.dcloud.io/static/web-view.html),发现少了相关的兼容模块,在webview中的h5页面添加相关兼容sdk后,就能正常接收到消息了,如下:

var userAgent = navigator.userAgent;  
            if (userAgent.indexOf('AlipayClient') > -1) {  
                // 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。  
                document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');  
            } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {  
                // QQ 小程序  
                document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');  
            } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {  
                // 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。  
                document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');  
            } else if (/toutiaomicroapp/i.test(userAgent)) {  
                // 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。  
                document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');  
            } else if (/swan/i.test(userAgent)) {  
                // 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。  
                document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');  
            } else if (/quickapp/i.test(userAgent)) {  
                // quickapp  
                document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');  
            }  
            if (!/toutiaomicroapp/i.test(userAgent)) {  
                document.querySelector('.post-message-section').style.visibility = 'visible';  
            }
收起阅读 »

vue3 + ts + pinia + uv-ui 模板项目

模板 uview vue3 uni_app
  1. 配置好vue3 + ts + pinia框架,ui库使用uview(uv-ui就是uview的vue3版本),下载项目就可以直接使用
  2. 本模板只是简单模板,里面包含 hooks|pages|components|pinia|工具类等示例代码,以及各种声明文件和ts类型配置
  3. 封装request,可以直接进行接口调用

模板插件地址

继续阅读 »
  1. 配置好vue3 + ts + pinia框架,ui库使用uview(uv-ui就是uview的vue3版本),下载项目就可以直接使用
  2. 本模板只是简单模板,里面包含 hooks|pages|components|pinia|工具类等示例代码,以及各种声明文件和ts类型配置
  3. 封装request,可以直接进行接口调用

模板插件地址

收起阅读 »

unicloud 完全放弃海外用户 !?

unicloud海外用户访问非常慢,我客户在台湾,连个图片都拉不出来
最傻的是,我想开阿里CDN,居然还要我验证bsapp.com,这是阿里自己的域名,阿里自己都搞不清楚吗?
简单来说,目前我们测试下来,别说国外了,连台湾、香港都很慢
要用这个功能的三思

unicloud海外用户访问非常慢,我客户在台湾,连个图片都拉不出来
最傻的是,我想开阿里CDN,居然还要我验证bsapp.com,这是阿里自己的域名,阿里自己都搞不清楚吗?
简单来说,目前我们测试下来,别说国外了,连台湾、香港都很慢
要用这个功能的三思

ios appstore 不更新版本的情况下,删除封面或截图

ios appstore 不更新版本的情况下,删除封面或截图,是利用appstore的漏洞
有偿提供方法

QQ:543610866,注明来历

ios appstore 不更新版本的情况下,删除封面或截图,是利用appstore的漏洞
有偿提供方法

QQ:543610866,注明来历

#插件讨论# 【 uni-pay - DCloud前端团队 】电脑微信端发起支付调用native扫码支付

在unicloud中使用uni-pay的前端组件时,如果是在电脑微信端打开h5链接,调用uni-pay前端组件发起支付时,目前会调用jsapi进行支付。

使用jsapi支付需要获取code然后换取openid,需要访问获取code的链接并重定向,而且可能会遇到code被重复使用等问题(好巧不巧我就遇到了)

但是电脑端的微信打开h5链接,其实也是一个pc浏览器的环境,在ua中可以判断,所以其实是可以调用native进行扫码支付的。

native扫码支付不需要获取code和openid,相比jsapi在开发难度上没这么麻烦,而且都是扫码支付,用native和jsapi没啥区别,那就用开发简单的native方式。

但是目前使用uni-pay前端组件在电脑微信端默认使用的jsapi,在组件上指定mode为pc也没用,最后在组件中发现了问题,将使用jssdk判断浏览器类型的方式换成使用modeCom计算属性进行判断,就可以在电脑微信端h5中调用native支付了,其余代码均不需要修改。

//在uni-pay.vue的createOrder方法中,将jsSdk.checkPlatform() === "pc"修改为this.modeCom === "pc"  
// 创建支付  
async createOrder(data = {}) {  
    let { options } = this;  
    Object.assign(options, data);  
    if (options.provider === "appleiap") {  
    // ios内购走特殊逻辑  
        return this._appleiapCreateOrder(options);  
    }  
    // #ifdef H5  
    // 判断如果是pc访问,则强制扫码模式  
    // if (jsSdk.checkPlatform() === "pc") {  
        //  options.qr_code = true;  
    // }  

    if (this.modeCom === "pc") {  
        options.qr_code = true;  
    }  
    // #endif  
    ...... // 其余代码  
}
继续阅读 »

在unicloud中使用uni-pay的前端组件时,如果是在电脑微信端打开h5链接,调用uni-pay前端组件发起支付时,目前会调用jsapi进行支付。

使用jsapi支付需要获取code然后换取openid,需要访问获取code的链接并重定向,而且可能会遇到code被重复使用等问题(好巧不巧我就遇到了)

但是电脑端的微信打开h5链接,其实也是一个pc浏览器的环境,在ua中可以判断,所以其实是可以调用native进行扫码支付的。

native扫码支付不需要获取code和openid,相比jsapi在开发难度上没这么麻烦,而且都是扫码支付,用native和jsapi没啥区别,那就用开发简单的native方式。

但是目前使用uni-pay前端组件在电脑微信端默认使用的jsapi,在组件上指定mode为pc也没用,最后在组件中发现了问题,将使用jssdk判断浏览器类型的方式换成使用modeCom计算属性进行判断,就可以在电脑微信端h5中调用native支付了,其余代码均不需要修改。

//在uni-pay.vue的createOrder方法中,将jsSdk.checkPlatform() === "pc"修改为this.modeCom === "pc"  
// 创建支付  
async createOrder(data = {}) {  
    let { options } = this;  
    Object.assign(options, data);  
    if (options.provider === "appleiap") {  
    // ios内购走特殊逻辑  
        return this._appleiapCreateOrder(options);  
    }  
    // #ifdef H5  
    // 判断如果是pc访问,则强制扫码模式  
    // if (jsSdk.checkPlatform() === "pc") {  
        //  options.qr_code = true;  
    // }  

    if (this.modeCom === "pc") {  
        options.qr_code = true;  
    }  
    // #endif  
    ...... // 其余代码  
}
收起阅读 »

Vue3组件库 Wot Design Uni v1.x版本发布新增支持支付宝、钉钉小程序平台

ui组件

介绍

一个基于Vue3+TS开发的uni-app组件库,提供60+高质量组件,支持暗黑模式、国际化和自定义主题。

特性

  • 支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台.
  • 60+ 个高质量组件,覆盖移动端主流场景.
  • 使用 Typescript 构建,提供良好的组件类型系统.
  • 支持国际化,内置 6 种语言包.
  • 提供丰富的文档和组件示例.
  • 支持修改 CSS 变量实现主题定制.
  • 支持暗黑模式

地址

Github
文档网站
插件市场
QQ群

投票吧

最后,帮你最希望组件库在2024新增的功能/组件投票吧!

投票吧!

继续阅读 »

介绍

一个基于Vue3+TS开发的uni-app组件库,提供60+高质量组件,支持暗黑模式、国际化和自定义主题。

特性

  • 支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台.
  • 60+ 个高质量组件,覆盖移动端主流场景.
  • 使用 Typescript 构建,提供良好的组件类型系统.
  • 支持国际化,内置 6 种语言包.
  • 提供丰富的文档和组件示例.
  • 支持修改 CSS 变量实现主题定制.
  • 支持暗黑模式

地址

Github
文档网站
插件市场
QQ群

投票吧

最后,帮你最希望组件库在2024新增的功能/组件投票吧!

投票吧!

收起阅读 »

使用 PageSpy 简化问题复现与跟踪

uniapp web_view 小程序 控制台 控制台调试 支付宝小程序 微信小程序 WebView调试

PageSpy

一款可以用来调试「Web 、H5 、WebView 、支付宝原生小程序、微信原生小程序、UniApp 小程序」等环境的平台,由货拉拉大前端开源。

它支持「实时在线调试」和「离线日志回放」两种模式,帮助大家在不同的场景下使用调试功能,全部功能都是一键启用。

我们诚挚的邀请大家在线体验,点击查看 PageSpy 调试各种框架项目

  • 仓库地址:访问 <https://github.com/HuolalaTech/page-spy-web/> ;
  • 视频教程:访问 <https://space.bilibili.com/3493272492181886>

遇到任何问题,请大家加入技术支持群讨论:查看群二维码

继续阅读 »

PageSpy

一款可以用来调试「Web 、H5 、WebView 、支付宝原生小程序、微信原生小程序、UniApp 小程序」等环境的平台,由货拉拉大前端开源。

它支持「实时在线调试」和「离线日志回放」两种模式,帮助大家在不同的场景下使用调试功能,全部功能都是一键启用。

我们诚挚的邀请大家在线体验,点击查看 PageSpy 调试各种框架项目

  • 仓库地址:访问 <https://github.com/HuolalaTech/page-spy-web/> ;
  • 视频教程:访问 <https://space.bilibili.com/3493272492181886>

遇到任何问题,请大家加入技术支持群讨论:查看群二维码

收起阅读 »

关于云打包iOS提交AppStore提示警告问题

云端打包 iOS Appstore

App Store Connect 上传要求使用 iOS 17 SDK 编译

2024年3月21号 iOS云端打包已全面升级为 XCode 15.2 和 iOS 17.2 SDK

升级XCode15.2后,需注意以下事项:

苹果在2024年2月6号发布公告要求:
从2024年4月29日开始上传 AppStore 要求使用 XCode 15 和 iOS 17 SDK 编译安装包。
公告详情:从 4 月 29 日开始生效的 App Store Connect 上传要求

目前HBuilderX云端打包iOS平台编译环境为 XCode 14.3.1 和 iOS 16.4 SDK。
因此云端打包后使用 Transporter 工具上传到 AppStore 会提示以下警告:

SDK version issue. This app was built with the iOS 16.4 SDK. Starting April 29, 2024, all iOS and iPadOS apps must be built with the iOS 17 SDK or later, included in Xcode 15 or later, in order to be uploaded to App Store Connect or submitted for distribution. (90725)

注意:此警告只是提示信息,并不影响继续提交 AppStore,开发者可继续上传并提交审核。

@2024年3月21号更新
正式版云端打包机已全面升级到 XCode 15.2 和 iOS 17.2 SDK。

@2024年3月7号更新
目前已经将Alpha版本云端打包环境升级到 XCode 15.2 和 iOS 17.2 SDK,在 Alpha 版本试运行1-2周时间。
预计在3月中将正式版云端打包机完成升级。

关于 App Store 提交的隐私更新

苹果在2024年2月29号发布公告要求:
开发者将需要在其 App 中包含隐私清单
公告详情:关于 App Store 提交的隐私更新

目前uni-app云端打包还未支持隐私清单,使用 Transporter 工具上传到 AppStore 会提示以下警告:

ITMS-91053: Missing API declaration - Your app’s code in the “HBuilder” file references one or more APIs that require reasons, including the following API categories: NSPrivacyAccessedAPICategoryFileTimestamp. While no action is required at this time, starting May 1, 2024, when you upload a new app or app update, you must include a NSPrivacyAccessedAPITypes array in your app’s privacy manifest to provide approved reasons for these APIs used by your app’s code. For more details about this policy, including a list of required reason APIs and approved reasons for usage, visit: https://developer.apple.com/documentation/bundleresources/privacy_manifest_files/describing_use_of_required_reason_api.

注意:此警告只是提示信息,并不影响继续提交 AppStore,开发者可继续上传并提交审核。

@2024年4月24号更新
云端打包机2024年4月24号开始已经更新HBuilderX4.08正式版本支持隐私清单。
uni-app项目请更新到HBuilderX4.08及以上版本重新提交云端打包,uni-app x项目需更新到HBuilderX4.13及以上版本重新提交云端打包。详情

继续阅读 »

App Store Connect 上传要求使用 iOS 17 SDK 编译

2024年3月21号 iOS云端打包已全面升级为 XCode 15.2 和 iOS 17.2 SDK

升级XCode15.2后,需注意以下事项:

苹果在2024年2月6号发布公告要求:
从2024年4月29日开始上传 AppStore 要求使用 XCode 15 和 iOS 17 SDK 编译安装包。
公告详情:从 4 月 29 日开始生效的 App Store Connect 上传要求

目前HBuilderX云端打包iOS平台编译环境为 XCode 14.3.1 和 iOS 16.4 SDK。
因此云端打包后使用 Transporter 工具上传到 AppStore 会提示以下警告:

SDK version issue. This app was built with the iOS 16.4 SDK. Starting April 29, 2024, all iOS and iPadOS apps must be built with the iOS 17 SDK or later, included in Xcode 15 or later, in order to be uploaded to App Store Connect or submitted for distribution. (90725)

注意:此警告只是提示信息,并不影响继续提交 AppStore,开发者可继续上传并提交审核。

@2024年3月21号更新
正式版云端打包机已全面升级到 XCode 15.2 和 iOS 17.2 SDK。

@2024年3月7号更新
目前已经将Alpha版本云端打包环境升级到 XCode 15.2 和 iOS 17.2 SDK,在 Alpha 版本试运行1-2周时间。
预计在3月中将正式版云端打包机完成升级。

关于 App Store 提交的隐私更新

苹果在2024年2月29号发布公告要求:
开发者将需要在其 App 中包含隐私清单
公告详情:关于 App Store 提交的隐私更新

目前uni-app云端打包还未支持隐私清单,使用 Transporter 工具上传到 AppStore 会提示以下警告:

ITMS-91053: Missing API declaration - Your app’s code in the “HBuilder” file references one or more APIs that require reasons, including the following API categories: NSPrivacyAccessedAPICategoryFileTimestamp. While no action is required at this time, starting May 1, 2024, when you upload a new app or app update, you must include a NSPrivacyAccessedAPITypes array in your app’s privacy manifest to provide approved reasons for these APIs used by your app’s code. For more details about this policy, including a list of required reason APIs and approved reasons for usage, visit: https://developer.apple.com/documentation/bundleresources/privacy_manifest_files/describing_use_of_required_reason_api.

注意:此警告只是提示信息,并不影响继续提交 AppStore,开发者可继续上传并提交审核。

@2024年4月24号更新
云端打包机2024年4月24号开始已经更新HBuilderX4.08正式版本支持隐私清单。
uni-app项目请更新到HBuilderX4.08及以上版本重新提交云端打包,uni-app x项目需更新到HBuilderX4.13及以上版本重新提交云端打包。详情

收起阅读 »

【找活】

求职

多年uniapp开发经验,有活的DD,Q1656567911

多年uniapp开发经验,有活的DD,Q1656567911

招聘一个uniapp前端兼职开发每天4-6小时,可远程

招聘 uniapp

能力要求

  1. 熟悉uniapp, vue,熟悉使用uniapp开发微信小程序和App。
  2. 能用uniapp尽可能复现设计图。
  3. 能做复杂交互动画效果。

能力要求

  1. 熟悉uniapp, vue,熟悉使用uniapp开发微信小程序和App。
  2. 能用uniapp尽可能复现设计图。
  3. 能做复杂交互动画效果。

[uni-id-co]: PrePayResourceExhausted:DB read action failed, resource exhausted

admin

uni-admin没有更改代码 登陆的时候突然出现[uni-id-co]: PrePayResourceExhausted:DB read action failed, resource exhausted
解决方法:数据库读取次数到限制了

uni-admin没有更改代码 登陆的时候突然出现[uni-id-co]: PrePayResourceExhausted:DB read action failed, resource exhausted
解决方法:数据库读取次数到限制了

ui-cms read properties of undefined (reading 'listCover') 错误

解决:uni_modules\uni-media-library\components\media-list\index,vue里面的mediaItem.thumb.cover改为mediaItem.cover

uni_modules\uni-media-library\components\media-info\index,vue里面的currentMedia.thumb.detailCover改为currentMedia.detailCover

继续阅读 »

解决:uni_modules\uni-media-library\components\media-list\index,vue里面的mediaItem.thumb.cover改为mediaItem.cover

uni_modules\uni-media-library\components\media-info\index,vue里面的currentMedia.thumb.detailCover改为currentMedia.detailCover

收起阅读 »