微信小程序開發問答《七十一》picker選擇日期 & image無法顯示base64的(de)圖片

發表時(shí)間：2021-5-11

發布人(rén)：融晨科技

浏覽次數：101

1、微信小程序image圖片模拟器可以(yǐ)顯示，但是(shì)真機上(shàng)無法顯示

微信小程序中<image>引用的(de)是(shì)網絡圖片，在(zài)模拟器裏面可以(yǐ)看到(dào)，但是(shì)在(zài)真機上(shàng)就(jiù)無法顯示。

同樣是(shì)網絡圖片

https://www.zhgjx-hr.com/upload/Images/4b96f7e0-88f4-4a5b-bc24-c86611842bca.jpg 真機上(shàng)是(shì)可以(yǐ)顯示的(de)，

但是(shì)https://app.zhgjx-hr.com/upload/Images/4b96f7e0-88f4-4a5b-bc24-c86611842bca.jpg 真機上(shàng)就(jiù)無法顯示。這(zhè)是(shì)什麽原因呢？

答：問題已經解決，是(shì)證書問題

2、微信小程序頁面跳轉的(de)時(shí)候出(chū)現渲染層錯誤

微信小程序頁面跳轉出(chū)現這(zhè)個(gè)問題，每個(gè)頁面跳轉都會可是(shì)我的(de)頁面中沒有引用該圖片所有的(de)圖片資源加載正常可能是(shì)頁面先渲染了(le／liǎo)靜态的(de)wxml文件獲取不(bù)到(dào)image鏈接所以(yǐ)報錯那麽有什麽辦法讓頁面将所有的(de)資源都加載完再同步顯示嗎

答：我出(chū)現過這(zhè)種情況，出(chū)現的(de)過程和(hé / huò)原因：

把圖片地(dì / de)址放在(zài)data裏，并設置爲(wéi / wèi)空字符串
onLoad的(de)時(shí)候去設置圖片字段
一開始圖片地(dì / de)址爲(wéi / wèi)空，所以(yǐ)會報錯。

js

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

wxml

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

因爲(wéi / wèi)我在(zài)onLoad裏這(zhè)裏我是(shì)請求了(le／liǎo)服務器，所以(yǐ)setData是(shì)服務器返回成功後設置的(de)。在(zài)服務器返回之(zhī)前imageUrl爲(wéi / wèi)空，所以(yǐ)報了(le／liǎo)這(zhè)個(gè)錯。

你看看你加載圖片的(de)代碼是(shì)不(bù)是(shì)有這(zhè)樣的(de)情況。

3、微信小程序picker選擇日期，怎麽才能做到(dào)隻有日月沒有年份？

小程序的(de)日期picker都是(shì)選擇年月日，業務要(yào / yāo)求隻選擇日月，應該如何實現呢？請各位大(dà)牛幫助。

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

如果是(shì)根據 js 獲取年份，寫一個(gè)year輸出(chū)到(dào)頁面并且拼接就(jiù)行了(le／liǎo)。

<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、微信小程序的(de)image無法顯示base64的(de)圖片的(de)問題

在(zài)開發微信小程序的(de)時(shí)候，一張圖片需要(yào / yāo)通過WebSocket獲取，WebSocket返回png圖片的(de)二進制格式的(de)數據，然後小程序将ArrayBuffer轉成base64并賦給image的(de)src屬性，如下：

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

這(zhè)段代碼在(zài)電腦上(shàng)用開發工具裏顯示圖片一直是(shì)正常的(de)，但是(shì)發布到(dào)手機上(shàng)就(jiù)出(chū)錯了(le／liǎo)，圖片死活顯示不(bù)出(chū)來(lái)，後來(lái)才發現，data:後面應該加上(shàng)image/png才行，所以(yǐ)代碼需要(yào / yāo)改成這(zhè)樣：

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

問題就(jiù)可以(yǐ)解決。