步骤二：选择打开后将图片直接拷贝到新建的image文件夹下面

图片导入完成后，项目的整体目录结构如下图所示，

2、按屏幕尺寸自适应图片宽和高

步骤一：编写工具函数，返回封装后的屏幕高度和宽度

打开根目录下的utils文件夹下的utils.js文件，个人感觉这个类似Java里面的工具类，具体代码如下：

1. /**
2. * 获取移动端显示屏的宽和高,
3. * 参数：e,
4. * return viewSize (包含显示屏的宽和高)
5. */
6. function getViewWHInfo(e){
7. var viewSize={};
8. var originalWidth = e.detail.width;//图片原始宽
9. var originalHeight = e.detail.height;//图片原始高
10. wx.getSystemInfo({
11. success: function (res) {
12. //读取系统宽度和高度
13. var viewWidth = res.windowWidth;
14. var viewHeight = res.windowHeight;
15. console.log(originalWidth + " " + originalHeight);
16. console.log("宽：" + viewWidth + "高" + viewHeight);
17. viewSize.width = viewWidth;
18. viewSize.height = viewHeight;
19. }
20. });
21. return viewSize;
22. }
23. //导出接口--必须要写
24. module.exports = {
25. getViewWHInfo: getViewWHInfo
26. }

步骤二：编辑脚本文件

打开index文件夹下的index.js文件,将原有的内容全部删除，并将下列代码直接复制，首先调用require函数将工具类进行实例化，其中data里面设置的是我们在index.wxml文件中需要读取的变量，imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo(e)该句调用了上面自定义的函数。

1. //index.js
2. //获取应用实例
3. //获取工具类的应用实例
4. var imageUtil = require('../../utils/util.js');
5. var app = getApp()
6. Page({
7. data:{
8. imageUrl:"../image/1.jpg",
9. viewHeigh:"",
10. viewWidth:""
11. },
12. onLoad: function () {
13. },
14. imageLoad:function(e){
15. var viewSize = imageUtil.getViewWHInfo(e);
16. //console.log(viewSize.heigh);
17. this.setData({
18. viewHeigh: viewSize.height,
19. viewWidth: viewSize.width
20. });
21.  
22. }
23. })

步骤三：编辑图片标签

打开index文件夹下的index.wxml文件，删除原有的全部内容，将下面的图片插入代码直接复制粘贴，其中style表示的是标签的样式，width:{{viewWidth}}表示图片的宽度是取index.js文件中所赋的值，height和src同理，bindload事件表示该图片加载的时候绑定了index.js文件imageLoad函数，并且在图片加载时执行该函数。

1. <image
2. style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad">
3. </image>