自定义editor富文本编辑器组件时要注意
onEditorReady() {
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
要加入in(this),要不会报context null
onEditorReady() {
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
要加入in(this),要不会报context null
收起阅读 »
关于在uniapp中使用支付宝登录授权，使用网页授权
因为客户要求可以用支付宝一键登录app,可是不知道为什么官方没有集成支付宝登录，又看了插件市场的要收费的插件，就打了退堂鼓，打算自己研究下，不过安卓开发已经好几年没搞了，现在感觉都已经不会了，而且ios的我也没搞过，用自己做原生插件怕是不行，参考：https://blog.csdn.net/fkew2009/article/details/87621753
下面给大家提供一个思路：
//跳转到支付宝去要授权
goAlipay(){
let alipayUrl="https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=https://www.xxxxxxx.com/alipayCallback.html"
let openURL="alipays://platformapi/startapp?appId=20000067&url="+encodeURIComponent(alipayUrl);
console.log("openURL:" + openURL);
plus.runtime.openURL(openURL,err=>{
uni.showToast({
title:"打开支付宝失败！请检查是否已安装？",
icon:'none'
})
})
},然后单独新建一个alipayCallback.html网页用于支付宝回调，内容如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div>
如果没有跳转请------
<a href="lkk://abc" id="url">点击这里</a>
</div>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var code = getQueryVariable("auth_code");
console.log(code);
//alert("code：" + code);
document.getElementById('url').href = "testapp://io.lkk/login?"+encodeURIComponent(JSON.stringify({"code":code}));
window.location.href="testapp://io.lkk/login?"+encodeURIComponent(JSON.stringify({"code":code}));
}
</script>
</body>
</html>
然后到manifest.json下配置下scheme,用户在支付宝里跳回app，具体参考：https://ask.dcloud.net.cn/article/409
然后就是到支付宝开发平台添加应用了，怎么创建我就不废话了，你们可以自己百度，主要是配置回调地址，特意截图了，应该可以看明白吧？
然后你们自定义基座下，记得改下版本号，发现不改版本号，制作出来的基座还是和之前一样没变化，
然后将获取到auth_code，传给服务器让他们去获取其他信息了
可以在app.js里获取：
onShow: function() {
console.log('App Show')
var args = plus.runtime.arguments;
console.log('[args参数]',args);
let argsUrl = JSON.parse(decodeURIComponent(args.split('?')[1]));
if (argsUrl.code) {
// 处理args参数，如直达到某新页面等
plus.runtime.arguments = {};
uni.redirectTo({
url: "/pages/login/login?code="+argsUrl.code
});
}
},argsUrl.code 就是从支付宝返回的auth_code,发给服务器的逻辑我放到login页面里了，这个我就不贴出来了，
总结：
该方法确实可以得到支付宝的登录授权，就是体验不好，因为有alipayCallback.html中间页面，支付宝会报警告如下：
全过程大概要用户点击四次屏幕，体验太不好，我也是没法想到其他好法子了，Android我测试是没有问题的，iOS没测，不过听说在iOSscheme会不行，回头疫情好了去公司我再测测看行不行
不知道为什么用不了，支付宝既然有这个为什么不给用呢？百度谷歌都不知道该怎么用，如果有知道怎么用的兄弟告诉我下，感谢不尽！
因为客户要求可以用支付宝一键登录app,可是不知道为什么官方没有集成支付宝登录，又看了插件市场的要收费的插件，就打了退堂鼓，打算自己研究下，不过安卓开发已经好几年没搞了，现在感觉都已经不会了，而且ios的我也没搞过，用自己做原生插件怕是不行，参考：https://blog.csdn.net/fkew2009/article/details/87621753
下面给大家提供一个思路：
//跳转到支付宝去要授权
goAlipay(){
let alipayUrl="https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=https://www.xxxxxxx.com/alipayCallback.html"
let openURL="alipays://platformapi/startapp?appId=20000067&url="+encodeURIComponent(alipayUrl);
console.log("openURL:" + openURL);
plus.runtime.openURL(openURL,err=>{
uni.showToast({
title:"打开支付宝失败！请检查是否已安装？",
icon:'none'
})
})
},然后单独新建一个alipayCallback.html网页用于支付宝回调，内容如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div>
如果没有跳转请------
<a href="lkk://abc" id="url">点击这里</a>
</div>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var code = getQueryVariable("auth_code");
console.log(code);
//alert("code：" + code);
document.getElementById('url').href = "testapp://io.lkk/login?"+encodeURIComponent(JSON.stringify({"code":code}));
window.location.href="testapp://io.lkk/login?"+encodeURIComponent(JSON.stringify({"code":code}));
}
</script>
</body>
</html>
然后到manifest.json下配置下scheme,用户在支付宝里跳回app，具体参考：https://ask.dcloud.net.cn/article/409
然后就是到支付宝开发平台添加应用了，怎么创建我就不废话了，你们可以自己百度，主要是配置回调地址，特意截图了，应该可以看明白吧？
然后你们自定义基座下，记得改下版本号，发现不改版本号，制作出来的基座还是和之前一样没变化，
然后将获取到auth_code，传给服务器让他们去获取其他信息了
可以在app.js里获取：
onShow: function() {
console.log('App Show')
var args = plus.runtime.arguments;
console.log('[args参数]',args);
let argsUrl = JSON.parse(decodeURIComponent(args.split('?')[1]));
if (argsUrl.code) {
// 处理args参数，如直达到某新页面等
plus.runtime.arguments = {};
uni.redirectTo({
url: "/pages/login/login?code="+argsUrl.code
});
}
},argsUrl.code 就是从支付宝返回的auth_code,发给服务器的逻辑我放到login页面里了，这个我就不贴出来了，
总结：
该方法确实可以得到支付宝的登录授权，就是体验不好，因为有alipayCallback.html中间页面，支付宝会报警告如下：
全过程大概要用户点击四次屏幕，体验太不好，我也是没法想到其他好法子了，Android我测试是没有问题的，iOS没测，不过听说在iOSscheme会不行，回头疫情好了去公司我再测测看行不行
不知道为什么用不了，支付宝既然有这个为什么不给用呢？百度谷歌都不知道该怎么用，如果有知道怎么用的兄弟告诉我下，感谢不尽！
关于官方上传文件的请求方式，默认是post请求，不可直接修改请求方式
官方默认上传文件的请求方式是post，且不可修改，经过琢磨，我用以下方法可以修改请求方式为put，如果其他API不可以修改请求方式可以试试这个方法
uni.uploadFile({
url: `${baseUrl}/user/updateUserAvatar`,
filePath: res1.tempFilePaths[0],
formData: {
'account': this.userInfo.user.userAccount,
**'_method': 'PUT'** **//重点是这个，在额外参数里加**
},
name: "multipartFile",
success:res2 => {
},
fail: err2 => {
}
})官方默认上传文件的请求方式是post，且不可修改，经过琢磨，我用以下方法可以修改请求方式为put，如果其他API不可以修改请求方式可以试试这个方法
uni.uploadFile({
url: `${baseUrl}/user/updateUserAvatar`,
filePath: res1.tempFilePaths[0],
formData: {
'account': this.userInfo.user.userAccount,
**'_method': 'PUT'** **//重点是这个，在额外参数里加**
},
name: "multipartFile",
success:res2 => {
},
fail: err2 => {
}
})
web2app vue应用 back 回退处理
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// 扩展API准备完成后要执行的操作
function plusReady() {
console.log("plus ready");
let click_back_time = Date.now();
/** 监听返回键 */
plus.key.addEventListener(
"backbutton",
() => {
if (/** 顶层页面 可以自己改成其他的meta参数，自己在router中定义是否为顶层页面 */ router.app.$route.meta.title.hide_back) {
/** 2s 内连续两次回退 退出应用 */
if (Date.now() - click_back_time > 2 * 1000) {
Toast("继续点击返回将退出应用");
click_back_time = Date.now();
} else {
plus.runtime.quit();
}
} else {
router.back();
}
},
false,
);
}if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// 扩展API准备完成后要执行的操作
function plusReady() {
console.log("plus ready");
let click_back_time = Date.now();
/** 监听返回键 */
plus.key.addEventListener(
"backbutton",
() => {
if (/** 顶层页面 可以自己改成其他的meta参数，自己在router中定义是否为顶层页面 */ router.app.$route.meta.title.hide_back) {
/** 2s 内连续两次回退 退出应用 */
if (Date.now() - click_back_time > 2 * 1000) {
Toast("继续点击返回将退出应用");
click_back_time = Date.now();
} else {
plus.runtime.quit();
}
} else {
router.back();
}
},
false,
);
}
uni.createSelectorQuery().in(this).select(".test"); select()里面不支持数字和中文如何解决，
uni.createSelectorQuery().in(this).select(".test");select()里面不支持数字和中文如何解决，DOMException: Failed to execute 'matches' on 'Element': '#2019-09' is not a valid selector. 有没有什么方法，我想获取dom 的top,可以在app ios 兼容的
uni.createSelectorQuery().in(this).select(".test");select()里面不支持数字和中文如何解决，DOMException: Failed to execute 'matches' on 'Element': '#2019-09' is not a valid selector. 有没有什么方法，我想获取dom 的top,可以在app ios 兼容的
收起阅读 »
Android uni小程序SDK集成原生功能模块教程
Android uni小程序SDK集成 原生功能模块
SDK 提供了丰富的原生能力，您可根据需求自行添加功能模块，各功能模块所需的依赖库及资源文件，在uniMPSDK/Features目录中
目录结构
|-- uniMPSDK/Features
|-- Feature 依赖库说明.xls // 功能模块配置表
|-- libs // 各功能模块的依赖库存放位置请参考 Feature 依赖库说明.xls 配置表，添加模块所需依赖。修改项目相关配置信息；
集成方式
下面以 map 模块为例
首先查看Feature 依赖库说明.xls 表格说明需要添加amap-libs-release.aar,map-amap-release.aar两个库文件 及其AndroidManifest.xml等配置！
将amap-libs-release.aar,map-amap-release.aar两个库文件拷贝到项目中。主Module中的libs下。
地图依赖库文件拷贝完毕后。需要在build.gradle配置导入你引用的两个库文件。
implementation files('libs/map-amap-release.aar')
implementation files('libs/amap-libs-release.aar')参考Feature 依赖库说明.xls 中Map配置信息修改工程项目：
- 修改AndroidManifest.xml 增加以下权限及配置
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.READ_LOGS"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS"/>
<meta-data android:name="com.amap.api.v2.apikey" android:value="%申请高德地图apikey%"/>- 修改dcloud_properties.xml配置
在dcloud_properties.xml添加以下信息
features节点
<feature name="Maps" value="io.dcloud.js.map.amap.JsMapPluginImpl"></feature>
services节点
<service name="Maps" value="io.dcloud.js.map.MapInitImpl"/>以上配置完毕后。运行项目即可体验模块功能了。
功能模块与 API 对应关系
| 功能模块 | 5+APP项目 | uni-app项目 |
|---|---|---|
| Audio(音频) | plus.audio | https://uniapp.dcloud.io/api/media/record-manager https://uniapp.dcloud.io/api/media/audio-context |
| Audio(MP3格式音频支持库) | plus.audio | |
| Barcode(二维码) | plus.barcode | https://uniapp.dcloud.io/api/system/barcode |
| Bluetooth(低功耗蓝牙) | plus.bluetooth | https://uniapp.dcloud.io/api/system/bluetooth |
| Camera(摄像头) | plus.camera | |
| Contacts(通讯录) | plus.contacts | |
| Device(设备信息) | plus.device | https://uniapp.dcloud.io/api/system/info |
| Downloader(文件下载) | plus.downloader | https://uniapp.dcloud.io/api/request/network-file?id=downloadfile |
| Fingerprint(指纹识别) | plus.fingerprint | https://uniapp.dcloud.io/api/other/authentication |
| Geolocation(基础定位库) | plus.geolocation | https://uniapp.dcloud.io/api/location/location |
| Geolocation(高德定位) | plus.geolocation | https://uniapp.dcloud.io/api/location/location |
| Geolocation(系统定位) | plus.geolocation | https://uniapp.dcloud.io/api/location/location |
| iBeacon | plus.ibeacon | https://uniapp.dcloud.io/api/system/ibeacon |
| IO(文件系统) | plus.io | https://uniapp.dcloud.io/api/file/file |
| LivePusher(直播推流) | plus.video.LivePusher | https://uniapp.dcloud.io/api/media/live-player-context |
| Maps(高德地图) | plus.map | https://uniapp.dcloud.io/api/location/map |
| Messaging(短彩邮件消息) | plus.messaging | |
| Navigator(运行环境信息) | plus.navigator | https://uniapp.dcloud.io/api/system/info |
| Oauth(登录基础库) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(小米登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(QQ登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(新浪微博登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(微信登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Payment(支付基础库) | plus.payment | https://uniapp.dcloud.io/api/plugins/payment |
| Payment(支付宝支付) | plus.payment | https://uniapp.dcloud.io/api/plugins/payment |
| Payment(微信支付) | plus.payment | https://uniapp.dcloud.io/api/plugins/payment |
| Share(分享基础库) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Share(QQ分享) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Share(新浪微博分享) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Share(微信分享) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Speech(语音识别基础库) | plus.speech | https://uniapp.dcloud.io/api/plugins/voice |
| Speech(百度语音识别) | plus.speech | https://uniapp.dcloud.io/api/plugins/voice |
| SQLite(数据库) | plus.sqlite | |
| Statistic(友盟统计) | plus.statistic | |
| Uploader(文件上传) | plus.uploader | https://uniapp.dcloud.io/api/request/network-file?id=uploadfile |
| VideoPlayer(视频播放) | plus.video.VideoPlayer | https://uniapp.dcloud.io/api/media/video |
| XHR(网络请求) | plus.net | https://uniapp.dcloud.io/api/request/request?id=request |
| nvue原生组件: map(高德地图) | 不支持 | https://uniapp.dcloud.io/component/map |
| nvue原生组件: barcode(二维码) | 不支持 | https://uniapp.dcloud.io/component/barcode |
| nvue原生组件: live-pusher(直播推流) | 不支持 | https://uniapp.dcloud.io/component/live-pusher |
| nvue原生组件: video视频 | 不支持 | https://uniapp.dcloud.io/component/video |
| nvue原生组件: canvas | 不支持 | https://github.com/dcloudio/NvueCanvasDemo |
Android uni小程序SDK集成 原生功能模块
SDK 提供了丰富的原生能力，您可根据需求自行添加功能模块，各功能模块所需的依赖库及资源文件，在uniMPSDK/Features目录中
目录结构
|-- uniMPSDK/Features
|-- Feature 依赖库说明.xls // 功能模块配置表
|-- libs // 各功能模块的依赖库存放位置请参考 Feature 依赖库说明.xls 配置表，添加模块所需依赖。修改项目相关配置信息；
集成方式
下面以 map 模块为例
首先查看Feature 依赖库说明.xls 表格说明需要添加amap-libs-release.aar,map-amap-release.aar两个库文件 及其AndroidManifest.xml等配置！
将amap-libs-release.aar,map-amap-release.aar两个库文件拷贝到项目中。主Module中的libs下。
地图依赖库文件拷贝完毕后。需要在build.gradle配置导入你引用的两个库文件。
implementation files('libs/map-amap-release.aar')
implementation files('libs/amap-libs-release.aar')参考Feature 依赖库说明.xls 中Map配置信息修改工程项目：
- 修改AndroidManifest.xml 增加以下权限及配置
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.READ_LOGS"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS"/>
<meta-data android:name="com.amap.api.v2.apikey" android:value="%申请高德地图apikey%"/>- 修改dcloud_properties.xml配置
在dcloud_properties.xml添加以下信息
features节点
<feature name="Maps" value="io.dcloud.js.map.amap.JsMapPluginImpl"></feature>
services节点
<service name="Maps" value="io.dcloud.js.map.MapInitImpl"/>以上配置完毕后。运行项目即可体验模块功能了。
功能模块与 API 对应关系
| 功能模块 | 5+APP项目 | uni-app项目 |
|---|---|---|
| Audio(音频) | plus.audio | https://uniapp.dcloud.io/api/media/record-manager https://uniapp.dcloud.io/api/media/audio-context |
| Audio(MP3格式音频支持库) | plus.audio | |
| Barcode(二维码) | plus.barcode | https://uniapp.dcloud.io/api/system/barcode |
| Bluetooth(低功耗蓝牙) | plus.bluetooth | https://uniapp.dcloud.io/api/system/bluetooth |
| Camera(摄像头) | plus.camera | |
| Contacts(通讯录) | plus.contacts | |
| Device(设备信息) | plus.device | https://uniapp.dcloud.io/api/system/info |
| Downloader(文件下载) | plus.downloader | https://uniapp.dcloud.io/api/request/network-file?id=downloadfile |
| Fingerprint(指纹识别) | plus.fingerprint | https://uniapp.dcloud.io/api/other/authentication |
| Geolocation(基础定位库) | plus.geolocation | https://uniapp.dcloud.io/api/location/location |
| Geolocation(高德定位) | plus.geolocation | https://uniapp.dcloud.io/api/location/location |
| Geolocation(系统定位) | plus.geolocation | https://uniapp.dcloud.io/api/location/location |
| iBeacon | plus.ibeacon | https://uniapp.dcloud.io/api/system/ibeacon |
| IO(文件系统) | plus.io | https://uniapp.dcloud.io/api/file/file |
| LivePusher(直播推流) | plus.video.LivePusher | https://uniapp.dcloud.io/api/media/live-player-context |
| Maps(高德地图) | plus.map | https://uniapp.dcloud.io/api/location/map |
| Messaging(短彩邮件消息) | plus.messaging | |
| Navigator(运行环境信息) | plus.navigator | https://uniapp.dcloud.io/api/system/info |
| Oauth(登录基础库) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(小米登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(QQ登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(新浪微博登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Oauth(微信登录) | plus.oauth | https://uniapp.dcloud.io/api/plugins/login |
| Payment(支付基础库) | plus.payment | https://uniapp.dcloud.io/api/plugins/payment |
| Payment(支付宝支付) | plus.payment | https://uniapp.dcloud.io/api/plugins/payment |
| Payment(微信支付) | plus.payment | https://uniapp.dcloud.io/api/plugins/payment |
| Share(分享基础库) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Share(QQ分享) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Share(新浪微博分享) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Share(微信分享) | plus.share | https://uniapp.dcloud.io/api/plugins/share |
| Speech(语音识别基础库) | plus.speech | https://uniapp.dcloud.io/api/plugins/voice |
| Speech(百度语音识别) | plus.speech | https://uniapp.dcloud.io/api/plugins/voice |
| SQLite(数据库) | plus.sqlite | |
| Statistic(友盟统计) | plus.statistic | |
| Uploader(文件上传) | plus.uploader | https://uniapp.dcloud.io/api/request/network-file?id=uploadfile |
| VideoPlayer(视频播放) | plus.video.VideoPlayer | https://uniapp.dcloud.io/api/media/video |
| XHR(网络请求) | plus.net | https://uniapp.dcloud.io/api/request/request?id=request |
| nvue原生组件: map(高德地图) | 不支持 | https://uniapp.dcloud.io/component/map |
| nvue原生组件: barcode(二维码) | 不支持 | https://uniapp.dcloud.io/component/barcode |
| nvue原生组件: live-pusher(直播推流) | 不支持 | https://uniapp.dcloud.io/component/live-pusher |
| nvue原生组件: video视频 | 不支持 | https://uniapp.dcloud.io/component/video |
| nvue原生组件: canvas | 不支持 | https://github.com/dcloudio/NvueCanvasDemo |
uni-app checkbox组件和switch组件checked属性无效的解决方案
> 相信许多开发者都有遇到过 uni-app 中的 复选框组件（checkbox）和开关组件（switch）在改变 checked 属性会有无效的问题。本篇文章将分析问题的产生和解决方法。
完整的分析过程和解决方法请查看小编的博客原创文章，字太多。难码！
文章地址：https://blog.csdn.net/u013350495/article/details/104347419
小编有发布过相同示例的插件，完整源码获取方式：
- uni-app 插件市场：https://ext.dcloud.net.cn/plugin?id=648
- gitee 代码仓库：https://gitee.com/myDarling/uniapp-extend
> 相信许多开发者都有遇到过 uni-app 中的 复选框组件（checkbox）和开关组件（switch）在改变 checked 属性会有无效的问题。本篇文章将分析问题的产生和解决方法。
完整的分析过程和解决方法请查看小编的博客原创文章，字太多。难码！
文章地址：https://blog.csdn.net/u013350495/article/details/104347419
小编有发布过相同示例的插件，完整源码获取方式：
- uni-app 插件市场：https://ext.dcloud.net.cn/plugin?id=648
- gitee 代码仓库：https://gitee.com/myDarling/uniapp-extend
多张图片上传（源码分享+实现分析）
本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。
其它小程序和uniapp都可通过该思路实现
代码片段（可导入微信WEB开发者工具体验）：https://developers.weixin.qq.com/s/DHrt69mk7af3
两种不同实现方法的优缺点，请查看我的 博客原创文章，在文章中有详细的说明
小程序 多张图片上传 文章地址：https://blog.csdn.net/u013350495/article/details/104326088。
JS源码：
Page({
data: {
// 已选择上传的本地图片地址
urlArr:['helang.jpg','1846492969.jpg','web.jpg']
},
onLoad: function () {
},
// 多图上传-回调式
uploadCallback(){
let index = 0; // 当前位置，标识已上传到第几张图片
let newUrls = []; // 上传成功后的图片地址数组
// 图片上传方法
let upload = ()=>{
let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
wx.showLoading({
title: '正在上传',
});
/*
无图片上传接口，收setTimeout 模拟延迟状态
项目中替换为 wx.uploadFile 即可
*/
// 假设每 1000ms 上传一张图片
setTimeout(()=>{
// 此处为已上传成功后的回调函数内容
let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
newUrls.push(resUrl); // 将上传后的地址添加到成功数组中
// 判断图片是否已经全部上传完成
if (index >= (this.data.urlArr.length-1)){
send();
}else{
//未全部上传完时标识位置+1并再次调用上传方法
index++;
upload();
}
},1000);
}
// 发送方法,用作图片上传完后，得到图片地址提交给其它接口或其它操作
let send = () => {
// 关闭加载提示
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon:'success'
})
// 输出已经上传完的图片地址，请查看控制台结果
console.log(newUrls);
}
// 调用上传方法
upload();
},
// 多图上传-Promise
uploadPromise(){
/* Promise 对象数组 */
let p_arr = [];
/* 新建 Promise 方法，nowUrl参数为当前上传的图片地址 */
let new_p = (nowUrl) => {
return new Promise((resolve, reject) => {
/*
无图片上传接口，收setTimeout 模拟延迟状态
项目中替换为 wx.uploadFile 即可
*/
// 假设每 1000ms 上传一张图片
setTimeout(()=>{
// 此处为已上传成功后的回调函数内容
let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
resolve(resUrl);
},1000);
})
}
// 遍历数据，创建相应的 Promise 数组数据
this.data.urlArr.forEach((item, index) => {
let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
p_arr.push(new_p(nowUrl));
});
wx.showLoading({
title: '正在上传',
});
/* 所有图片上传完成后调用该方法 */
Promise.all(p_arr).then((res) => {
// 关闭加载提示
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon: 'success'
})
// 输出已经上传完的图片地址，请查看控制台结果
console.log(res);
});
}
})
本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。
其它小程序和uniapp都可通过该思路实现
代码片段（可导入微信WEB开发者工具体验）：https://developers.weixin.qq.com/s/DHrt69mk7af3
两种不同实现方法的优缺点，请查看我的 博客原创文章，在文章中有详细的说明
小程序 多张图片上传 文章地址：https://blog.csdn.net/u013350495/article/details/104326088。
JS源码：
Page({
data: {
// 已选择上传的本地图片地址
urlArr:['helang.jpg','1846492969.jpg','web.jpg']
},
onLoad: function () {
},
// 多图上传-回调式
uploadCallback(){
let index = 0; // 当前位置，标识已上传到第几张图片
let newUrls = []; // 上传成功后的图片地址数组
// 图片上传方法
let upload = ()=>{
let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
wx.showLoading({
title: '正在上传',
});
/*
无图片上传接口，收setTimeout 模拟延迟状态
项目中替换为 wx.uploadFile 即可
*/
// 假设每 1000ms 上传一张图片
setTimeout(()=>{
// 此处为已上传成功后的回调函数内容
let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
newUrls.push(resUrl); // 将上传后的地址添加到成功数组中
// 判断图片是否已经全部上传完成
if (index >= (this.data.urlArr.length-1)){
send();
}else{
//未全部上传完时标识位置+1并再次调用上传方法
index++;
upload();
}
},1000);
}
// 发送方法,用作图片上传完后，得到图片地址提交给其它接口或其它操作
let send = () => {
// 关闭加载提示
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon:'success'
})
// 输出已经上传完的图片地址，请查看控制台结果
console.log(newUrls);
}
// 调用上传方法
upload();
},
// 多图上传-Promise
uploadPromise(){
/* Promise 对象数组 */
let p_arr = [];
/* 新建 Promise 方法，nowUrl参数为当前上传的图片地址 */
let new_p = (nowUrl) => {
return new Promise((resolve, reject) => {
/*
无图片上传接口，收setTimeout 模拟延迟状态
项目中替换为 wx.uploadFile 即可
*/
// 假设每 1000ms 上传一张图片
setTimeout(()=>{
// 此处为已上传成功后的回调函数内容
let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
resolve(resUrl);
},1000);
})
}
// 遍历数据，创建相应的 Promise 数组数据
this.data.urlArr.forEach((item, index) => {
let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
p_arr.push(new_p(nowUrl));
});
wx.showLoading({
title: '正在上传',
});
/* 所有图片上传完成后调用该方法 */
Promise.all(p_arr).then((res) => {
// 关闭加载提示
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon: 'success'
})
// 输出已经上传完的图片地址，请查看控制台结果
console.log(res);
});
}
})
【建议】HBX能否自动识别文档的缩进格式？
由于不同项目文件缩进格式不同，在vscode里能够自动识别，打开的不同文件，每个都会自动按当前文档的缩进格式适配，编辑器下方能够显示该文档的缩进格式，HBX不行，只能统一一个缩进设置，这对于管理多个不同程序员的项目非常不方便，会导致混乱
由于不同项目文件缩进格式不同，在vscode里能够自动识别，打开的不同文件，每个都会自动按当前文档的缩进格式适配，编辑器下方能够显示该文档的缩进格式，HBX不行，只能统一一个缩进设置，这对于管理多个不同程序员的项目非常不方便，会导致混乱
