我们向往着远方，却迟迟没有背起行囊；我们渴望着改变，却又贪恋眼前的安逸。殊不知，口号再响，也抵不上你向前迈出的第一步；想法再美，也不如脚踏实地的行动。走出自己的舒适区，才能通往你想要的未来！...
关于微信分享不出去有可能的原因--图片过大
前几天做的源生微信分享,测试是没有问题的可以分享出去,
昨天测试发现居然有的新闻可以分享出去,有的新闻居然不行,这是个什么耿,
想半天想不出来,还好隔壁的大神来了一句,是不是分享的图片太大了,
顿时就恍然大悟,原来我从网络上请求的图片转换成Bitmap就没有管了,直接就分享出去,难怪有的可以分享,有的又不可以,
后来查了一下,图片好像要限制在32k以下才能分享,微信这个坑比也没说,下面就是我把网络图片url转换成Bitmap然后在设置缩略图的方法
把图片网址转换成Bitmap用到了Glide,不知道的可以看看我转发的博客Glide的用法
Glide.with(NewsDetsilsActivity.this).load(imgUrl).asBitmap().into(new SimpleTarget&Bitmap&() {
public void onResourceReady(Bitmap resource, GlideAnimation&? super Bitmap& glideAnimation) {
mBitmap = BitmapUtils.createBitmapThumbnail(resource, false);
* 设置缩略图
* needRecycle
public static Bitmap createBitmapThumbnail(Bitmap bitMap, boolean needRecycle) {
int width = bitMap.getWidth();
int height = bitMap.getHeight();
int newWidth = 80;
int newHeight = 80;
float scaleWidth = ((float) newWidth) /
float scaleHeight = ((float) newHeight) /
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
Bitmap newBitMap = Bitmap.createBitmap(bitMap, 0, 0, width, height,
matrix, true);
if (needRecycle) bitMap.recycle();
return newBitM
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
点击阅读原文
微信小程序不同数据模型下的多图片适配
日 发布，来源：
垂直微信小程序开发交流论坛
是我前些天写的关于微信小程序中的单图片如何通过获取原始宽高来计算适配不同屏幕下的图片展示宽高。
这几天不断有人问起微信小程序图片的适配问题,在上面的文章中我也提到我没有想到多图片的处理方式，但是通过对的改造过程，终于还是有了一个比较好的解决方案。
先说一下在实际开发过程中的两个坑
真机下wx.getImageInfo(OBJECT)无法获取网络图片原始宽高
这一点是我的疏忽，没有认真看文档。文档中说明了src String 是 图片的路径，可以是相对路径，临时文件路径，存储文件路径,并没有包含网络图片，尽管在模拟器下是可以获得的，所以请大家注意
真机下image标签bindload中e对象无法获取detail中的width和height
这个是因为真机的测试情况下的缓存，需要你重启微信后重新刷新预览，即可。
多图片数据模型情况
数组url串组成的数据模型
var model = ['https://img.xxx.xxx/xxx.png',
'https://img.xxx.xxx/xxx.png',
'https://img.xxx.xxx/xxx.png',
数组对象组成的数据模型
var model = [{
url:'https://img.xxx.xxx.xxx/xxx.png',
url:'https://img.xxx.xxx.xxx/xxx.png',
不定对象组成的数据模型就像在富文本解析过程中解析到的json对象
"node": "element",
"tag": "img",
"tagType": "inline",
"src": "https://dn-cnode.qbox.me/Fv7Gn_eSisMoWjcg1tY30tpyYBH7",
"alt": "江湖网页版06.jpg"
"imgIndex": 5,
"from": "cnodeData"
"node": "element",
"tag": "img",
"tagType": "inline",
"src": "https://dn-cnode.qbox.me/FkrxD4s4PIWDCyfEAb7-fAXyaCkI",
"alt": "江湖网页版07.jpg"
"imgIndex": 6,
"from": "cnodeData"
基础解决方案
每一个的解决方案都基本相似，但是又有不同。我们拿最复杂的第三种数据模型来做例子。同时也是我在wxParse中采用的方法
1.image建立模版，绑定相关数据
&template name="wxParseImg"&
&image bindload="wxParseImgLoad" style="width:{}height:{}" /&
&/template&
2.image绑定bindload，并绑定对应的函数、长宽
代码已经在上面了
3.bindload获取原始宽高存入临时数组对象
这里必须提一下对于前两种的简单绑定情况下，你可以通过简单的临时数组来完轮询赋值，给item循环加入需要的长宽。但是对于最后的数据模型，复杂情况下，你需要一个深度克隆方法，来克隆并深度赋值给你需要的item。
//load方法
function wxParseImgLoad(e, that) {
var tagFrom = e.target.dataset.
var idx = e.target.dataset.
if (typeof (tagFrom) != 'undefined' && tagFrom.length & 0) {
calMoreImageInfo(e, idx, that, tagFrom)
calImageInfo(e, idx, that)
分时计算，这里需要注意，做一个假循环方式，因为load方法是异步方式进行
// 假循环获取计算图片视觉最佳宽高
function calMoreImageInfo(e, idx, that, bindData) {
if (that.data[bindData].wxParseImageObjArray.length == 0) {
var temWxParseImageObjArray = that.data[bindData].wxParseImageObjA
var imgUrl = temWxParseImageObjArray[idx].attr.
var recal = wxAutoImageCal(e.detail.width, e.detail.height);
temWxParseImageObjArray[idx].width = recal.imageW
temWxParseImageObjArray[idx].height = recal.
var temData = that.data[bindData];
temData.wxParseImageObjArray = temWxParseImageObjA
var moreData = {};
if(typeof(temData.temImgNum) == "undefined"){
temData.temImgNum = 1;
temData.temImgNum += 1;
temData.wxParseTemImageObjArray = temWxParseImageObjA
moreData[bindData] = temD
that.setData(moreData);
if (temData.temImgNum == temWxParseImageObjArray.length) {
var temData = that.data[bindData];
temData.tagArray = moreclone(that.data[bindData].tagArray, that, bindData);
var moreData = {};
moreData[bindData] = temD
that.setData(moreData);
// 计算视觉优先的图片宽高
function wxAutoImageCal(originalWidth, originalHeight) {
//获取图片的原始长宽
var windowWidth = 0, windowHeight = 0;
var autoWidth = 0, autoHeight = 0;
var results = {};
wx.getSystemInfo({
success: function (res) {
// console.dir(res);
windowWidth = res.windowW
windowHeight = res.windowH
//判断按照那种方式进行缩放
console.log("windowWidth" + windowWidth);
if (originalWidth & windowWidth) {//在图片width大于手机屏幕width时候
autoWidth = windowW
console.log("autoWidth" + autoWidth);
autoHeight = (autoWidth * originalHeight) / originalW
console.log("autoHeight" + autoHeight);
results.imageWidth = autoW
results.imageheight = autoH
} else {//否则展示原来的数据
results.imageWidth = originalW
results.imageheight = originalH
深度克隆你的对象
//深度克隆方法
// 用于深度更换图片的宽高
function moreclone(obj, that, bindData) {
if (typeof obj == "object") {
if (obj === null) {
if (obj instanceof Array) {
for (var i = 0, len = obj. i & i++) {
o.push(moreclone(obj[i], that, bindData));
for (var j in obj) {
o[j] = moreclone(obj[j], that, bindData);
if (typeof (o) != 'undefined' && o.node && o.tag === 'img') {
var moreTemimgInfoArray = that.data[bindData].wxParseTemImageObjA
o = moreTemimgInfoArray[0];
o.from = bindD
moreTemimgInfoArray.shift();
var temData = that.data[bindData];
var moreData = {};
temData.wxParseTemImageObjArray = moreTemimgInfoA
that.setData(moreData);
谢谢反馈:grin: 1.第一个问题已经更正，请更新代码试试，增加多数据支持 2,3个问题麻烦到github页面贴一下你的代码 我看下 具体解析结果
* author: Di (微信小程序开发工程师)
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
* 垂直微信小程序开发交流社区
* github地址: https://github.com/icindy/wxParse
* for: 微信小程序富文本解析
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
* utils函数引入
var showdown = require('showdown.js');
var HtmlToJson = require('html2json.js');
var wxDiscode = require('wxDiscode.js');
var WxAutoImage = require('WxAutoImage.js');
This file has been truncated.
垂直微信小程序开发交流论坛
我要该，理由是：
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）微信小程序图片自适应支持多图实例详解
转载 &更新时间：日 11:07:59 & 投稿：lqh
这篇文章主要介绍了微信小程序图片自适应支持多图实例详解的相关资料,需要的朋友可以参考下
微信小程序图片自适应支持多图实例详解
微信小程序图片自适应，是一个比较常见的需求，平时我们在WEBView中，只需要设置max-width:100%.在微信里面虽然widthFix也能实现，但有一个缺陷就是图片的宽度值要大于或者等于设定的值，否则就会发生拉伸变形，本文通过另外一种来适应。
首先我们来看看图片组件给的一些说明：
图片资源地址
'scaleToFill'
图片裁剪、缩放的模式
HandleEvent
当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
HandleEvent
当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}
注：image组件默认宽度300px、高度225px
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
scaleToFill
不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill
保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
宽度不变，高度自动变化，保持原图宽高比不变
如果说要有一种比较合适的方案，大概是widthFix，然而上面这些模式中，所要求的前提是需要给图片标签设定一个宽度值或者一个高度值。但有时候我们根本不想限定图片的宽高，我们需要的是图片自身能够根据自身的大小来适配。
而widthFix模式就要求你必须先设定一个宽度值，如果出来的图片比给定的width小呢？此时图片则会发生拉伸的现象。（常见应用在文章中，因为文章中的插图有可能比默认的宽小，比如常见的表情）。
其实上面的标签中，图片为我们预留了一个函数bindLoad。下面看看我是怎么支持自适应的。
有一个前提，就是多图的时候，你需要知道这个图片是处于所有中的位置index，我们通过这个位置来保存图片的宽度和高度。
&image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg"
bindLoad="imageLoad" style="width:{{imageSize[0].width}} height:{{imageSize[0].height}}
rpx" data-index="0" mode="scaleToFill"/&
&image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg"
bindLoad="imageLoad" style="width:{{imageSize[1].width}} height:{{imageSize[1].height}}rpx"
data-index="1" mode="scaleToFill"/&
var px2rpx = 2, windowWidth=375;
imageSize:{}
onLoad:function(options){
wx.getSystemInfo({
success: function(res) {
windowWidth = res.windowW
px2rpx = 750 / windowW
imageLoad:function(e){
var originWidth = e.detail.width*px2rpx,
originHeight = e.detail.height*px2rpx,
ratio = originWidth/originH
var viewWidth = 710,viewHeight//设定一个初始宽度
//当它的宽度大于初始宽度时，实际效果跟mode=widthFix一致
if(originWidth&= viewWidth){
//宽度等于viewWidth,只需要求出高度就能实现自适应
viewHeight = viewWidth/
//如果宽度小于初始值，这时就不要缩放了
viewWidth = originW
viewHeight = originH
var imageSize = this.data.imageS
imageSize[e.target.dataset.index] = {
width:viewWidth,
height:viewHeight
this.setData({
imageSize:imageSize
如果我们的图片中不仅限定了宽度，还限定了高度值，比如我们限定max-height之类的。那我们的imageLoad函数则要调整为根据他们的宽高比来输出。
imageLoad:function(e){
var originWidth = e.detail.width * px2rpx,
originHeight=e.detail.height *px2rpx,
ratio = originWidth/originH
var viewWidth = 220,viewHeight = 165, viewRatio = viewWidth/viewH
if(ratio&=viewRatio){
if(originWidth&=viewWidth){
viewHeight = viewWidth/
viewWidth = originW
viewHeight = originHeight
if(originWidth&=viewWidth){
viewWidth = viewRatio*originHeight
viewWidth = viewRatio*originW
viewHeight = viewRatio*originH
var image = this.data.imageS
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
this.setData({
imageSize:image
附录：小图预览，进入全屏模式。
用预览图片的API，wx.previewImage(OBJECT)以下是对应的代码，样式部分，自行布局。
HTML代码：
&view class="wrap"&
&image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"&&/image&
pictures: [
'https://p0.meituan.net/movie/ea4acfc.jpeg',
'https://p0.meituan.net/movie/5d4fa35c6d307c461dd2541448.jpeg',
'https://p0.meituan.net/movie/0c49f98ac349eed219dba290900.jpg',
'https://p1.meituan.net/movie/45f9aea.jpg',
'https://p1.meituan.net/movie/722de9a7b0c1f9ceccaec7c451290.jpg',
'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
'https://p1.meituan.net/movie/a852b992cdecba9fa9b7a.jpg',
'https://p1.meituan.net/movie/dc1fc653170cba7b05bf3e484939.jpg'
previewImage: function(e){
var that = this,
index = e.currentTarget.dataset.index,
pictures = this.data.
wx.previewImage({
current: pictures[index],
urls: pictures
&感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具为什么我微信上图片不能从手机相册选择？_百度知道
为什么我微信上图片不能从手机相册选择？
可能是没有把微信里的定位打开。具体操作步骤：第一步：第二步：第三步：第四步：第五步：
采纳率：100%
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。已解决问题
为什么在微信里商品详情页的图片不是很乱就是太大，求大神帮手
悬赏值：10
浏览次数：7545
用手机阿里扫一扫
最满意答案
该答案已经被保护
因为尺寸没调好，手机屏幕基本都是4.0-5.0左右的！ 适合手机尺寸的，你百度下就知道了！
答案创立者
以企业身份回答&
那是因为您把电脑端的图片照搬进去了，没有经过修改才会出现这种情况，一般的手机端详情图片，宽度最好为480像素，高度可以是960像素
您好~我是阿业~我的微信详细页的图片都是500宽像素的，刚好
可能你的详情页太大，不符合规范。重新改下再上线。
正在进行的活动
生意经不允许发广告，违者直接删除
复制问题或回答，一经发现，拉黑7天
快速解决你的电商难题
店铺优化排查提升2倍流量
擅长&nbsp 店铺优化
您可能有同感的问题
扫一扫用手机阿里看生意经
问题排行榜
当前问题的答案已经被保护，只有知县（三级）以上的用户可以编辑！写下您的建议，管理员会及时与您联络！
server is ok}