微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出。

根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示。

wx.canvasToTempFilePath wx.saveFile

官方文档中只有一行,真是坑爹啊,原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;
            wx.canvasToTempFilePath({
              canvasId: ‘target‘,
              success: function success(res) {
                wx.saveFile({
                  tempFilePath: res.tempFilePath,
                  success: function success(res) {
                    console.log(‘saved::‘ + res.savedFilePath);
                  },
                  complete: function fail(e) {
                    console.log(e.errMsg);
                  }
                });
              },
              complete: function complete(e) {
                console.log(e.errMsg);
              }
            });

官方文档中只有一行,真是坑爹啊,原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;

wx.saveFile,保存的图片,我在iphone6上测试,提示保存成功,但在手机相册中无法查看,应该是这个保存功能不够完善,以后可能会出一个保存到相册吧。

**获取设备宽高

wx.getSystemInfo(OBJECT)

获取系统信息。

OBJECT参数说明:

参数 类型 必填 说明
success Function 接口调用成功的回调
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success回调参数说明:

属性 说明
model 手机型号
pixelRatio 设备像素比
windowWidth 窗口宽度
windowHeight 窗口高度
language 微信设置的语言
version 微信版本号

**尺寸问题

在小程序中,支持还可以使用vw(1%的屏幕宽),vh(1%的屏幕高),

在wxss中虽然使用表达式calc不会报错,但这个值是无效的。

尺寸单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
  • rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

以上问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出。

时间: 2025-01-05 05:32:24

微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题的相关文章

微信小程序数据请求方法wx.request小测试

微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </view> <button bindtap="RequestData" value="Button">Button</button> 主要是一个按钮,点击后将请求的数据写入到textarea中 js文件: Page({ data:{ textd

微信小程序开发(request请求后台获取不到data)

1微信的request的post请求后台获取不到data(当初这个问题纠结了好久好久),原因是post传递的data是json格式而不是key,value的格式,所以获取不到相应的data就是post请求应为表单模式的data,微信小程序提供的datajson格式完全获取不到. 解决方法: 1.改变header header: {'Content-Type': 'application/json;charset=UTF-8;'}, 2.query的格式传递post请求就可以了,不过这个有点..你

原创:微信小程序java实现AES解密并获取unionId

来自:微信小程序联盟 如果大家使用小程序的同时还在使用公众号的话,可能会用到unionId这种功能,由于公司业务需要,我们需要使用unionId,具体使用方法,请参考微信开放平台的说明,但是在微信小程序的文档中只给出了部分语言实现的源码,竟然没有java的,小程序的开发人员是有多么懒.难道大家都不用java写后台??? 什么鬼,然后开始了各种AES踩坑之路,其实参考了很多的网上的教程,再次不能一一列出来给大家了,(因为我写这篇文章的时候,已经是解决问题一周以后了),也收到管理员的很多帮助,再次写

微信小程序-关于post 过来服务器没有获取到数据问题

查看一下服务器接收的post 参数是以什么形式接收的 微信给出得demo 请求的方式是Json 参数传递的 所以如果服务器使用的from 表单形式接收数据需要更改微信小程序中的 header 将 header: { 'content-type': 'application/json' }, 改成 header: { 'content-type': 'application/x-www-form-urlencoded' },

微信小程序的坑之wx.miniProgram.postMessage

工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 bindmessage 事件来监听消息,如下是官方文档描述 以下是代码: // 网页代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="vi

微信小程序关闭WebSocket连接wx.closeSocket()

wx.closeSocket() ? 关闭WebSocket连接 wx.onSocketClose(CALLBACK) ? 监听WebSocket关闭 wx.connectSocket({ url:"qkxue.net" }); //注意这里有时序问题, //如果wx.connectSocket还没回调wx.onSocketOpen,而先调用wx.closeSocket,那么就做不到关闭WebSocket的目的 //必须在WebSocket打开期间调用wx.closeSocket才能关

微信小程序通过getPhoneNumber后台PHP解密获取用户手机号码

之前做的版本用户这块是以获取用户openid为凭证,最近改版重新整理了一下,新增注册登录以手机号码为主, 两种(正常注册手机号码-密码+一键获取当前用户手机号码) getPhoneNumber这个组件要通过button来实现.将button中的open-type=“getPhoneNumber”,并且绑定bindgetphonenumber事件获取回调. 在使用这个组件之前必须先调用 login 接口 然后传递code,iv,encryptedData参数到后台,后台解密 示例 <button

【微信小程序】详解wx:if elif else的用法(搭配view、block)

1.搭配view <view wx:if="{{boolean==true}}"> <view class="bg_black"></view> </view> <view wx:elif="{{boolean==false}}"> <view class="bg_red"></view> </view> <view wx:e

微信小程序之地理位置授权 wx.getLocation

1. 授权地理位置 点击按钮,弹出授权弹窗,点击允许后,在以后的操作中可以随时获取到用户地理位置 点击拒绝后,将无法获取到地理位置,也无法再次点击弹出弹窗. <button bindtap='onAuthLocation' >授权位置</button> onAuthLocation() { wx.authorize({ scope: 'scope.userLocation', success: (res) => { console.log('成功:' , res) }, fa