微信小程序首页OnLoad调用两次问题

本文解析微信小程序登录页面为何会执行两次的原因。主要涉及app.json配置与onLaunch中不当的重定向调用,提供了具体的代码示例及解决办法。

最近调试微信小程序时,发现登录首页会执行两次,后查找相关内容发现了问题原因如下:

1、微信小程序启动时,app.json pages第一行是一定要执行的

“pages”:[

“pages/login/login”,

2、在onLunch中加了下面代码,导致了login第2次执行,把下面删除即可。

wx.redirectTo({
url: ‘pages/login/login’});

微信小程序调用相机进行拍照并保存图片,可以通过 `wx.chooseImage` 和 `<camera>` 组件两种方式实现。以下将分别介绍这两种方法,并提供相应的代码示例。 ### 使用 `wx.chooseImage` 调用相机拍照 `wx.chooseImage` 是微信小程序提供的一个 API,用于从本地相册选择图片或使用相机拍照。当 `sourceType` 设置为 `'camera'` 时,将调用相机进行拍照。 #### 示例代码: ```javascript Page({ data: { sourceType: ['camera'], // 设置 sourceType 为 camera 表示调用相机 }, takePhoto() { const that = this; wx.chooseImage({ count: 1, // 一只选择一张照片 sizeType: ['original', 'compressed'], // 可选择原图或压缩图 sourceType: that.data.sourceType, // 调用相机 success(res) { // tempFilePaths 是图片的临时路径 const tempFilePaths = res.tempFilePaths; // 将图片路径保存到本地存储 wx.setStorageSync('tempFilePaths', tempFilePaths); // 更新页面上的图片显示 that.setData({ src: tempFilePaths[0], }); wx.showToast({ title: '拍照成功', icon: 'success', duration: 2000, }); }, }); }, }); ``` #### 页面结构 (`index.wxml`): ```html <view class="userinfo-login"> <view class="page-body"> <view class="page-body-wrapper"> <view wx:if="{{src}}"> <image mode="widthFix" src="{{src}}"></image> <!-- 显示拍好的照片 --> </view> <view wx:else> <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 200px;"></camera> <!-- 调用摄像头的组件 --> </view> </view> </view> <button bindtap="takePhoto">拍照</button> </view> ``` ### 使用 `<camera>` 组件调用相机拍照 `<camera>` 组件是微信小程序提供的一个原生组件,专门用于调用相机进行拍照或录像。通过 `<camera>` 组件可以更灵活地控制相机的行为。 #### 示例代码: ```javascript Page({ data: { src: '', // 存储拍照后的图片路径 }, onLoad() { this.cameraContext = wx.createCameraContext(); // 创建相机上下文对象 }, takePhoto() { this.cameraContext.takePhoto({ quality: 'high', // 设置照片质量为高质量 success(res) { // 拍照成功后,将图片路径保存到页面数据中 this.setData({ src: res.tempImagePath, }); // 将图片路径保存到本地存储 wx.setStorageSync('tempFilePaths', [res.tempImagePath]); wx.showToast({ title: '拍照成功', icon: 'success', duration: 2000, }); }, }); }, }); ``` #### 页面结构 (`index.wxml`): ```html <view class="userinfo-login"> <view class="page-body"> <view class="page-body-wrapper"> <view wx:if="{{src}}"> <image mode="widthFix" src="{{src}}"></image> <!-- 显示拍好的照片 --> </view> <view wx:else> <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 200px;"></camera> <!-- 调用摄像头的组件 --> </view> </view> </view> <button bindtap="takePhoto">拍照</button> </view> ``` ### 注意事项 1. **重复保存问题**:如果使用 `wx.chooseImage` 并且发现每拍照后相册中会添加两张图片,这是因为 `wx.chooseImage` 在调用相机时默认会将照片保存到相册中。为了避免这种情况,可以考虑使用 `<camera>` 组件来直接控制拍照过程,而不通过 `wx.chooseImage` [^1]。 2. **权限问题**:在调用相机之前,需要确保用户已经授权了相机权限。如果用户未授权,可以使用 `wx.authorize` 或 `wx.getSetting` 来请求权限 [^3]。 3. **图片保存路径**:拍照后的图片路径是临时路径,如果需要长期保存,建议将图片上传到服务器或使用 `wx.saveImageToPhotosAlbum` 保存到相册中 [^3]。 ### 保存图片到相册 如果需要将图片保存到用户的相册中,可以使用 `wx.saveImageToPhotosAlbum` API。 #### 示例代码: ```javascript wx.saveImageToPhotosAlbum({ filePath: tempFilePaths[0], // 需要保存的图片路径 success(res) { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000, }); }, fail(err) { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000, }); }, }); ``` ### 总结 - 如果只需要简单的拍照功能,可以使用 `wx.chooseImage`。 - 如果需要更精细的控制(如自动拍照、倒计时等),建议使用 `<camera>` 组件。 - 在保存图片时,注意处理临时路径和永久保存的问题。 --- ###
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值