微信小程序開發問答《七十一》picker選擇日期 & image無法顯示base64的圖片
發表時間：2021-5-11
發布人：葵宇科技
瀏覽次數：62
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鏈接 所以報錯 那么有什么辦法讓頁面將所有的資源都加載完再同步顯示嗎
答：我出現過這種情況，出現的過程和原因：
把圖片地址放在
data里，并設置為空字符串onLoad的時候去設置圖片字段一開始圖片地址為空，所以會報錯。
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 });
問題就可以解決。
