步驟二：選擇打開(kāi)后將圖片直接拷貝到新建的image文件夾下面

圖片導(dǎo)入完成后，項(xiàng)目的整體目錄結(jié)構(gòu)如下圖所示，

2、按屏幕尺寸自適應(yīng)圖片寬和高

步驟一：編寫工具函數(shù)，返回封裝后的屏幕高度和寬度

打開(kāi)根目錄下的utils文件夾下的utils.js文件，個(gè)人感覺(jué)這個(gè)類似Java里面的工具類，具體代碼如下：

1. /**
2. * 獲取移動(dòng)端顯示屏的寬和高,
3. * 參數(shù)：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. //讀取系統(tǒng)寬度和高度
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. //導(dǎo)出接口--必須要寫
24. module.exports = {
25. getViewWHInfo: getViewWHInfo
26. }

步驟二：編輯腳本文件

打開(kāi)index文件夾下的index.js文件,將原有的內(nèi)容全部刪除，并將下列代碼直接復(fù)制，首先調(diào)用require函數(shù)將工具類進(jìn)行實(shí)例化，其中data里面設(shè)置的是我們?cè)趇ndex.wxml文件中需要讀取的變量，imageLoad函數(shù)將綁定圖片加載事件bindLoad, imageUtil.getViewWHInfo(e)該句調(diào)用了上面自定義的函數(shù)。

1. //index.js
2. //獲取應(yīng)用實(shí)例
3. //獲取工具類的應(yīng)用實(shí)例
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. })

步驟三：編輯圖片標(biāo)簽

打開(kāi)index文件夾下的index.wxml文件，刪除原有的全部?jī)?nèi)容，將下面的圖片插入代碼直接復(fù)制粘貼，其中style表示的是標(biāo)簽的樣式，width:{{viewWidth}}表示圖片的寬度是取index.js文件中所賦的值，height和src同理，bindload事件表示該圖片加載的時(shí)候綁定了index.js文件imageLoad函數(shù)，并且在圖片加載時(shí)執(zhí)行該函數(shù)。

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