个人感觉微信小程序的IDE用起来有時候不太方便可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度具体步骤如下图。
步骤一:选择最左侧的菜单中的项目
步骤二:选择打开后将图片直接拷贝到新建的image文件夹下
图片导入完成后项目的整体目录结构如下图所示,
2、按屏幕尺寸自适应图片宽和高
步骤一:编写工具函数返回葑装后的屏幕高度和宽度
打开根目录下的utils文件夹下的utils.js文件,个人感觉这个类似Java里面的工具类具体代码如下:
打开index文件夹下的index.js文件,将原有的内容全部删除,并将下列代码直接复制首先调用require函数将工具类进行實例化,其中data里面设置的是我们在index.wxml文件中需要读取的变量imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo(e)该句调用了上面自定义的函数。
打开index文件夹下的index.wxml文件删除原有的全部内容,将下面的图片插入代码直接复制粘贴其中style表示的是标签的样式,width:{{viewWidth}}表示图片的宽度是取index.js文件中所赋的值height和src同理,bindload事件表示该图片加载的时候绑定了index.js文件imageLoad函数并且在图片加载时执行该函数。