微信小程序之一本地图片处理--按屏幕尺寸插入图片

个人感觉微信小程序的IDE用起来有时候不太方便，可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下，所以首先要将图片文件导入到本地目录下，然后编写工具类获取屏幕的宽度和高度，具体步骤如下图。

1、本地图片导入

步骤一：选择最左侧的菜单中的项目

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

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

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

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

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

/*** 获取移动端显示屏的宽和高,* 参数：e,* return viewSize (包含显示屏的宽和高)*/
function getViewWHInfo(e){var viewSize={};var originalWidth = e.detail.width;//图片原始宽 var originalHeight = e.detail.height;//图片原始高 wx.getSystemInfo({success: function (res) { //读取系统宽度和高度var viewWidth = res.windowWidth;var viewHeight = res.windowHeight; console.log(originalWidth + " " + originalHeight);console.log("宽：" + viewWidth + "高" + viewHeight);viewSize.width = viewWidth;viewSize.height = viewHeight;}});return viewSize;
}
//导出接口--必须要写
module.exports = {getViewWHInfo: getViewWHInfo
}

步骤二：编辑脚本文件

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

//index.js
//获取应用实例
//获取工具类的应用实例
var imageUtil = require('../../utils/util.js');
var app = getApp()
Page({data:{imageUrl:"../image/1.jpg",viewHeigh:"",viewWidth:""},onLoad: function () {},imageLoad:function(e){var viewSize = imageUtil.getViewWHInfo(e);//console.log(viewSize.heigh);this.setData({viewHeigh: viewSize.height,viewWidth: viewSize.width});}
})

步骤三：编辑图片标签

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

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

最后效果图：

微信小程序之一本地图片处理--按屏幕尺寸插入图片相关推荐

微信小程序本地图片处理--按屏幕尺寸插入图片
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的 ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
怎么搭建微信小程序的本地测试服务器
Windows环境下手把手教你搭建Windows环境微信小程序的本地测试服务器问题的提出 Mac环境方便快捷地搭建小程序的测试服务器小程序对于网络请求的URL的特殊要求不能出现端口号不能用 ...
微信小程序取本地数据库数据(实测有图)
测试效果如下: 本实验主要分为如下几个步骤: 一.安装数据库二.安装PHP+Apache 三.编辑微信小程序代码前两项的简单介绍在如下连接: PHP+Apache 四.本文主要介绍第三项的内容需 ...
微信小程序与本地数据库的进行基础数据交互的案例——使用Java后台
微信小程序与本地数据库的进行基础数据交互的案例--使用Java后台案例介绍本地数据库储存用户信息表后台Java访问数据库,获得需要数据小程序端访问服务器环境配置及需要的项目代码资源: 案例介 ...
微信小程序页面使内容充满整个屏幕
微信小程序页面使内容充满整个屏幕内容居中 wxml页面代码 <view class="empty_tip "><image class="" ...
微信小程序从本地相册加载图片并显示
需求从本地相册获取照片并且生成轮播图,然后通过照片的元数据读取时间.地点等信息. 实现图片主要通过url访问,微信api读取图片时会返回图片的url,通过设定数组,存储图片的url. 对象设置: ...
微信小程序设置本地图片为背景图
微信小程序通过wxss进行设置背景图报错经查询,发现微信小程序中,将网络图片或base64图片设置为背景图片可正常显示,将本地图片设置为背景图片则不能显示,解决方法有三种,个人采用的是第三种方法 ...

微信小程序之一本地图片处理--按屏幕尺寸插入图片

微信小程序之一本地图片处理--按屏幕尺寸插入图片相关推荐

最新文章

热门文章