微信JS-SDK选取手机照片上传功能

本文将为大家详细介绍如何在微信中利用JS-SDK实现手机照片上传功能。当你在微信浏览器里运行网页并需要选取照片上传时，微信的JS-SDK提供了便捷的工具来实现这一需求。

你需要配置微信JS-SDK的相关文件。确保你使用的是的JS-SDK版本，比如1.2.0版本。这个版本对于iOS网页开发的适配问题做了优化。在低于1.2.0版本的JSSDK中，不再支持通过chooseImage api返回的localld来预览图片。为了解决这个问题并适应新的版本，建议直接升级到的JS-SDK版本。尽管新版本会有自动适配功能，但在某些特定场景下可能仍然无效。这时，你可以使用接口直接获取数据来解决这个问题。（详细的代码示例将在后文给出）

接下来，你需要引入jsapiSign.js文件。这个文件对于使用jssdk接口的页面来说是必须的。在引入这个文件时，你需要提供两个重要的参数：actionUrl（后台服务请求地址）和url（微信jssdk授权页面地址）。通过发送一个POST请求到"/getJsapiSign"，你可以获取到必要的配置信息。这个POST请求的参数是你的网页地址（需要去掉及其后的内容）。一旦获取到配置信息，你就可以在微信的JS-SDK中进行配置（debug模式建议关闭，除非你在PC端调试时需要查看日志）。

一旦配置完成，你就可以利用微信JS-SDK提供的API来选择并上传手机中的照片。用户可以在微信浏览器中轻松选择手机中的照片，并通过JS-SDK提供的接口将其上传到服务器。这一功能大大简化了网页应用中照片上传的流程，提高了用户体验。

关于微信 JS-SDK 的应用与 iOS WKWebview 网页开发的适配

在移动开发中，微信 JS-SDK 无疑是一个强大的工具，它提供了丰富的功能，让我们的应用可以与微信无缝对接。而在 iOS 开发中，WKWebview 的使用也越来越广泛，那么如何在 WKWebview 中适配微信 JS-SDK 呢？让我们来深入一下。

一、微信 JS-SDK 的基本配置与应用

我们来了解一下微信 JS-SDK 的基本配置。在初始化 JS-SDK 时，你需要提供几个关键参数，包括公众号的唯一标识（appid）、生成签名的时间戳（timestamp）、生成签名的随机串（nonceStr）以及签名（signature）。你还需要指定你要使用的 jsApiList。这些配置是调用微信 JS-SDK 功能的前提。

二、具体实现过程

接下来，我们来看看如何使用微信 JS-SDK 实现一些常见功能。

1. 选取照片：使用 chooseImage 方法，轻松得到照片在本地存储的 id。

2. 获取照片数据：得到的 localId 可以直接作为 img 元素的 src 属性进行显示。

3. 照片上传：利用 uploadImage 方法，将照片上传到服务器。

代码示例：

```javascript

wx.chooseImage({

count: 1, // 默认选择9张照片

sizeType: ['original', 'pressed'], // 原图或压缩图

sourceType: ['album', 'camera'], // 从相册或相机选择

success: function (res) {

var localIds = res.localIds; // 获取选定照片的本地ID列表

wx.uploadImage({

localId: localIds[0], // 需要上传的图片的本地ID

isShowProgressTips: 1, // 显示进度提示

success: function (res) {

var medias = {'lid': localIds[0].toString(), 'sid': res.serverId};

$('img_media').attr('src', medias.lid); // 更新图片显示

},

fail: function (res) {

alert("上传失败"); // 上传失败提示

}

});

}

});

```

三、iOS WKWebview 网页开发适配注意事项

在 iOS 的 WKWebview 中使用微信 JS-SDK 时，需要注意一些适配问题。特别是关于 JSAPI 的适配，尤其是缓存机制的变化。WKWebview 不再支持 cache jsapi 功能。这意味着在使用此 API 时，开发者需要做出相应的调整。建议开发者在相关页面逻辑中去掉对缓存的依赖或使用其他方法实现类似功能。这一变化可能会对某些功能产生影响，因此开发者需要密切关注并做出相应的适配工作。

页面预览新特性：LocalID预览图片的变化与适配建议

对于使用JSSDK开发微信小程序的开发者来说，有一个重要的更新需要注意。在版本变化从1.2.0以下升级到版本后，JSSDK不再支持通过chooseImage api返回的LocalID以特定方式预览图片了。这意味着原先的“img src=wxLocalResource://...”的方式可能不再有效。这涉及到如何在新的版本中预览和展示图片的问题。为此，我们给出了以下适配建议：

一、关于图片预览的变化

在版本更新至1.2.0之后，微信对JSSDK的图片预览功能进行了调整。这意味着原先的通过本地ID预览图片的方式可能不再适用。为了解决这个问题，开发者们可以直接将JSSDK升级到版本，这样页面会自动适配新的功能。但在某些特定场景下，这种自动适配可能并不奏效。建议使用专门的接口来获取数据以完成图片的预览。值得一提的是，目前JSSDk的线上版本为1.0.0和1.1.0，版本为即将更新的1.2.0。

二、代码中的适配调整

如果你的页面运行在WKWebview环境下，并且正在使用微信提供的JSSDK进行开发，那么你可能需要关注一个特定的问题：jsapi调用失败的问题。随着微信内部实现的变更，微信页面内的jsapi权限管理也需要做出适应性的调整。虽然大多数已经授权的jsapi会继续正常工作，但偶尔也可能出现授权失效导致调用失败的情况。此时开发者需要根据实际情况做出适配调整。对于iOS微信的不同版本，特别是6.5.1和之后的版本，开发者需要注意一些特定的导航技术可能会引发的问题，建议使用Anchor hash技术替代History技术以避免此类问题。不过即使是后续版本也并不能百分百避免这种问题出现，因此开发者仍需要持续关注并测试此类问题。

本文已被整理收录至《微信小程序开发指南》一书，欢迎大家学习交流。为大家推荐一篇关注度较高的小程序教程，由长沙网络推广团队精心整理分享。希望这些资源能对大家的学习有所帮助，同时也希望大家多多关注并支持狼蚁SEO的成长与发展。如果您有任何疑问或需要进一步的帮助，请随时与我们联系。期待您的支持与反馈！希望以上内容对您的学习和开发工作有所启发和帮助。

结束

最后感谢您使用Cambrian的渲染服务，祝您的开发顺利！若有其他问题或需求，随时与我们联系。