微信小程序开发问答《七十一》picker选择日期 & image无法显示base64的图片 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序开发问答《七十一》picker选择日期 & image无法显示base64的图片

发表时间:2021-5-11

发布人:葵宇科技

浏览次数:68

1、微信小程序image图片模拟器可以显示,但是真机上无法显示

微信小程序中<image>引用的是网络图片,在模拟器里面可以看到,但是在真机上就无法显示。

 同样是网络图片

https://www.zhgjx-hr.com/upload/Images/4b96f7e0-88f4-4a5b-bc24-c86611842bca.jpg  真机上是可以显示的,

但是https://app.zhgjx-hr.com/upload/Images/4b96f7e0-88f4-4a5b-bc24-c86611842bca.jpg  真机上就无法显示。 这是什么原因呢?

答:问题已经解决,是证书问题


2、微信小程序页面跳转的时候出现渲染层错误

微信小程序页面跳转出现这个问题,每个页面跳转都会 可是我的页面中没有引用该图片 所有的图片资源加载正常 可能是页面先渲染了静态的wxml文件 获取不到image链接 所以报错 那么有什么办法让页面将所有的资源都加载完再同步显示吗

答:我出现过这种情况,出现的过程和原因:

  1. 把图片地址放在data里,并设置为空字符串

  2. onLoad的时候去设置图片字段

  3. 一开始图片地址为空,所以会报错。

js

Page({
    data: {
        imageUrl:""
    },
    onLoad(options) {
        let that = this
        
        //post data
        wx.request({
            ..., 
            success(res){
                that.setData({
                    imageUrl
                })
            }
        })
    }
})

wxml

<image url="{{imageUrl}}">image>

因为我在onLoad里这里我是请求了服务器,所以setData是服务器返回成功后设置的。在服务器返回之前imageUrl为空,所以报了这个错。

你看看你加载图片的代码是不是有这样的情况。


3、微信小程序picker选择日期,怎么才能做到只有日月没有年份?


小程序的日期picker都是选择年月日,业务要求只选择日月,应该如何实现呢?请各位大牛帮助。

答:https://mp.weixin.qq.com/debu...

如果是根据 js 获取年份,写一个year输出到页面并且拼接就行了。

<view class="section">
  <view class="section__title">日期选择器view>
  <picker mode="date" value="{{date}}" start="{{nowYear}}-01-01" end="{{nowYear}}-12-31" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    view>
  picker>
view>


4、微信小程序的image无法显示base64的图片的问题

在开发微信小程序的时候,一张图片需要通过WebSocket获取,WebSocket返回png图片的二进制格式的数据,然后小程序将ArrayBuffer转成base64并赋给image的src属性,如下:

const base64 = wx.arrayBufferToBase64(res.data);
that.setData({ QrCodeUrl: "data:;base64," + base64 });

这段代码在电脑上用开发工具里显示图片一直是正常的,但是发布到手机上就出错了,图片死活显示不出来,后来才发现,data:后面应该加上image/png才行,所以代码需要改成这样:

const base64 = wx.arrayBufferToBase64(res.data);
that.setData({ QrCodeUrl: "data:image/png;base64," + base64 });

问题就可以解决。

相关案例查看更多