HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

支付宝小程序map高级定制渲染踩坑

地图 xml map 支付宝小程序

使用支付宝小程序的map callout气泡功能时出现了customCallout不显示 / xml文件不被编译等等一系列的问题,网上的信息比较杂乱,分享一下自己的解决过程

支付宝小程序中的customCallout在真机中只显示第一个,改用iconLayout实现功能;

使用map高级定制渲染时,xml文件不会被编译,按照支付宝官方文档,在manifest.json中添加:

"mp-alipay": {  
  "include": ["**/*.xml"]  
}

添加后没有效果,之后发现可以在项目根目录添加mini.project.json文件,在此文件中添加配置:

{  
  "enableAppxNg": true,  
  "include": ["**/*.xml"]  
}

marker:

// #ifdef MP-ALIPAY  
iconLayout: {  
  params: {  
    count: 1  
  },  
  src: '/static/map-xml/map-icon.xml'  
}  
// #endif

map-icon.xml:

<box layout="horizontal">  
  <text  
    id="test1"  
    clickable="true"  
    text="测试1"  
    padding-left="8"  
    padding-right="8"  
    font-size="16"  
    border-radius="6"  
    background-color="#FF0000"  
  />  
  <text  
    id="test2"  
    clickable="true"  
    text="测试2"  
    padding-left="8"  
    padding-right="8"  
    font-size="16"  
    border-radius="6"  
    background-color="#FF0000"  
  />  
</box>

编译成功后在支付宝开发者工具mini.project.json文件中的配置


xml文件需要放入static文件夹中,放在根目录时不会编译

真机运行后气泡正常显示

继续阅读 »

使用支付宝小程序的map callout气泡功能时出现了customCallout不显示 / xml文件不被编译等等一系列的问题,网上的信息比较杂乱,分享一下自己的解决过程

支付宝小程序中的customCallout在真机中只显示第一个,改用iconLayout实现功能;

使用map高级定制渲染时,xml文件不会被编译,按照支付宝官方文档,在manifest.json中添加:

"mp-alipay": {  
  "include": ["**/*.xml"]  
}

添加后没有效果,之后发现可以在项目根目录添加mini.project.json文件,在此文件中添加配置:

{  
  "enableAppxNg": true,  
  "include": ["**/*.xml"]  
}

marker:

// #ifdef MP-ALIPAY  
iconLayout: {  
  params: {  
    count: 1  
  },  
  src: '/static/map-xml/map-icon.xml'  
}  
// #endif

map-icon.xml:

<box layout="horizontal">  
  <text  
    id="test1"  
    clickable="true"  
    text="测试1"  
    padding-left="8"  
    padding-right="8"  
    font-size="16"  
    border-radius="6"  
    background-color="#FF0000"  
  />  
  <text  
    id="test2"  
    clickable="true"  
    text="测试2"  
    padding-left="8"  
    padding-right="8"  
    font-size="16"  
    border-radius="6"  
    background-color="#FF0000"  
  />  
</box>

编译成功后在支付宝开发者工具mini.project.json文件中的配置


xml文件需要放入static文件夹中,放在根目录时不会编译

真机运行后气泡正常显示

收起阅读 »

热更新的静默更新会导致数据错误的优化方案

升级中心 wgt升级 热更新

官方的热更新升级方案中是支持静默更新的,但是静默更新如果不重启常常会有页面样式错乱、数据加载错误等问题,看组件源码我们可以发现下载完成后是立即执行了wgt安装的操作,此时不重启app就会导致以上问题,这里我的思路是想在app在后台时执行安装并重启,或者在下次打开时执行安装并重启。

方案一、应用置于后台运行时安装热更新包并重启。
优点:更新会比较及时,只要应用置于后台了就会执行更新;
缺点:用户返回app时会执行安装重启,此时有明显的重启操作(安装完之后,我的wgt包20M需等3秒左右会重启),重启后会回到首页,这里可以记录重启前的页面,重启后重新定位该页面。

方案二、应用完全退出后重启时安装热更新包并再次重启。
优点:用户不会感觉到很明显的重启操作,不影响用户正常操作;
缺点:第一次启动时会有较长的时间停留在启动页(wgt包20M会停留在启动页7秒左右)安装完的重启几乎无感,很快,当然我们可以制作一个nvue的前端页面来代替启动页,并在这个页面用文字提示用户正在加载资源什么的(类似游戏打开先检查一番资源),获取用户信任,否则长时间的停留在启动页容易让用户误以为是app卡死。

主要的代码部分

uni-upgrade-center-app/utils/check-update.ts

// 静默更新,只有wgt有  
                    if (uniUpgradeCenterResult.is_silently) {  
                        uni.downloadFile({  
                            url,  
                            success: res => {  
                                if (res.statusCode == 200) {  
                                    uni.setStorageSync('WGTFilePath', res.tempFilePath)  
                                    // 下载好直接安装,下次启动生效  
                                    // plus.runtime.install(res.tempFilePath, {  
                                    //  force: false  
                                    // });  
                                }  
                            }  
                        });  
                        return;  
                    }  
保存wgt包的文件路径

App.vue
方案一:

onHide: function() {  
            let WGTFilePath = uni.getStorageSync('WGTFilePath')  
            if (WGTFilePath)  
                plus.runtime.install(WGTFilePath, {  
                    force: false  
                }, () => {  
                    uni.setStorageSync('WGTFilePath', '')  
                    plus.runtime.restart()  
                    return  
                })  
        },  

方案二:

onLaunch: function() {  
            let WGTFilePath = uni.getStorageSync('WGTFilePath')  
            if (WGTFilePath)  
                plus.runtime.install(WGTFilePath, {  
                    force: false  
                }, () => {  
                    uni.setStorageSync('WGTFilePath', '')  
                    plus.runtime.restart()  
                    return  
                })  
        },  

onShow: function() {  
            let WGTFilePath = uni.getStorageSync('WGTFilePath')  
            if (!WGTFilePath)//手动关闭启动页  
                plus.navigator.closeSplashscreen()  
},  

需要在配置文件关闭自动关闭启动页,并在app.vue手动处理  
  "splashscreen" : {  
            "alwaysShowBeforeRender" : false,  
            "waiting" : false,  
            "autoclose" : false,  
            "delay" : 0  
        },  
继续阅读 »

官方的热更新升级方案中是支持静默更新的,但是静默更新如果不重启常常会有页面样式错乱、数据加载错误等问题,看组件源码我们可以发现下载完成后是立即执行了wgt安装的操作,此时不重启app就会导致以上问题,这里我的思路是想在app在后台时执行安装并重启,或者在下次打开时执行安装并重启。

方案一、应用置于后台运行时安装热更新包并重启。
优点:更新会比较及时,只要应用置于后台了就会执行更新;
缺点:用户返回app时会执行安装重启,此时有明显的重启操作(安装完之后,我的wgt包20M需等3秒左右会重启),重启后会回到首页,这里可以记录重启前的页面,重启后重新定位该页面。

方案二、应用完全退出后重启时安装热更新包并再次重启。
优点:用户不会感觉到很明显的重启操作,不影响用户正常操作;
缺点:第一次启动时会有较长的时间停留在启动页(wgt包20M会停留在启动页7秒左右)安装完的重启几乎无感,很快,当然我们可以制作一个nvue的前端页面来代替启动页,并在这个页面用文字提示用户正在加载资源什么的(类似游戏打开先检查一番资源),获取用户信任,否则长时间的停留在启动页容易让用户误以为是app卡死。

主要的代码部分

uni-upgrade-center-app/utils/check-update.ts

// 静默更新,只有wgt有  
                    if (uniUpgradeCenterResult.is_silently) {  
                        uni.downloadFile({  
                            url,  
                            success: res => {  
                                if (res.statusCode == 200) {  
                                    uni.setStorageSync('WGTFilePath', res.tempFilePath)  
                                    // 下载好直接安装,下次启动生效  
                                    // plus.runtime.install(res.tempFilePath, {  
                                    //  force: false  
                                    // });  
                                }  
                            }  
                        });  
                        return;  
                    }  
保存wgt包的文件路径

App.vue
方案一:

onHide: function() {  
            let WGTFilePath = uni.getStorageSync('WGTFilePath')  
            if (WGTFilePath)  
                plus.runtime.install(WGTFilePath, {  
                    force: false  
                }, () => {  
                    uni.setStorageSync('WGTFilePath', '')  
                    plus.runtime.restart()  
                    return  
                })  
        },  

方案二:

onLaunch: function() {  
            let WGTFilePath = uni.getStorageSync('WGTFilePath')  
            if (WGTFilePath)  
                plus.runtime.install(WGTFilePath, {  
                    force: false  
                }, () => {  
                    uni.setStorageSync('WGTFilePath', '')  
                    plus.runtime.restart()  
                    return  
                })  
        },  

onShow: function() {  
            let WGTFilePath = uni.getStorageSync('WGTFilePath')  
            if (!WGTFilePath)//手动关闭启动页  
                plus.navigator.closeSplashscreen()  
},  

需要在配置文件关闭自动关闭启动页,并在app.vue手动处理  
  "splashscreen" : {  
            "alwaysShowBeforeRender" : false,  
            "waiting" : false,  
            "autoclose" : false,  
            "delay" : 0  
        },  
收起阅读 »

Web简谱渲染引擎

跳转到我的项目

https://blog.csdn.net/Date_Boy/article/details/142333049

https://blog.csdn.net/Date_Boy/article/details/142333049

继续阅读 »

跳转到我的项目

https://blog.csdn.net/Date_Boy/article/details/142333049

https://blog.csdn.net/Date_Boy/article/details/142333049

收起阅读 »

个人全职接单!时间充裕,诚心做事,合作靠谱,全职做项目

uniapp 外包接单 外包

全栈经验,这方面的软件开发的比较多,有相关案例,时间充裕,诚心合作,个人全职工作。不接二开和游戏,其他都可做。uniapp 做过很多,十分熟练,有需要请联系我 V:zwwz123123

全栈经验,这方面的软件开发的比较多,有相关案例,时间充裕,诚心合作,个人全职工作。不接二开和游戏,其他都可做。uniapp 做过很多,十分熟练,有需要请联系我 V:zwwz123123

H5莫名出现取消<uni-actionsheet>节点

已知bug

APP.vue中style加入全局隐藏
uni-actionsheet {
display: none !important;
}

APP.vue中style加入全局隐藏
uni-actionsheet {
display: none !important;
}

mqtt-vue2,mqtt-vue app,nvue 示例

https://ext.dcloud.net.cn/plugin?id=20250 地址 打开uniapp的插件市场 下载
https://ext.dcloud.net.cn/plugin?id=20250 地址 打开uniapp的插件市场 下载

uniCloud 短信服务1001报错问题

微信小程序 uni_app 短信

阿里云短信函数设置了定时触发,会有1001的报错,报错信息是smsKey不能为空,官方文档也标注了更新至最新后不需要填写smsKey,解决办法是在HBuilder X里,选中短信发送函数,右击后选中管理公共模块或扩展库依赖,然后勾选上uni-cloud-sms并确定即可

继续阅读 »

阿里云短信函数设置了定时触发,会有1001的报错,报错信息是smsKey不能为空,官方文档也标注了更新至最新后不需要填写smsKey,解决办法是在HBuilder X里,选中短信发送函数,右击后选中管理公共模块或扩展库依赖,然后勾选上uni-cloud-sms并确定即可

收起阅读 »

大家好啊,新手一枚,请多关照哈

大家好啊,新手一枚,请多关照哈。。。。。。。。。。。。。。。

大家好啊,新手一枚,请多关照哈。。。。。。。。。。。。。。。

安卓.9图启动图变形苹果storyboard 启动图片代做原生插件bug解决uniapp flutter开发

35岁被那个了,开发经验丰富,

原生Android iOS,uniapp flutter,vue,小程序都可以干,

同学朋友都是这行的,可接整体项目,可接项目咨询,项目设计,项目风险咨询等,

主要是性价比高,专业还便宜,

都在一线干的资深码农,如果你是老板请联系我,不一定就能省大钱办大事,还有惊喜,

如果你是一个技术需要解决问题请联系我,总之多问一嘴不收费,可能就有意外收获!QQ 1004898113

继续阅读 »

35岁被那个了,开发经验丰富,

原生Android iOS,uniapp flutter,vue,小程序都可以干,

同学朋友都是这行的,可接整体项目,可接项目咨询,项目设计,项目风险咨询等,

主要是性价比高,专业还便宜,

都在一线干的资深码农,如果你是老板请联系我,不一定就能省大钱办大事,还有惊喜,

如果你是一个技术需要解决问题请联系我,总之多问一嘴不收费,可能就有意外收获!QQ 1004898113

收起阅读 »