解決微信小程式的問題
圖片在電腦上顯示但在手機上卻無法顯示的問題
要使用的是本地圖片，不想把圖片上傳到網路再通過https的方式解決，解決方法如下：
1.image src中的圖片地址對英文字母大小寫敏感，必須確認大小寫對得上；
2.圖片大小問題。本地圖片要小於10KB才能順利在真機上顯示。
為什麼圖片只在本地除錯的時候顯示，手機預覽和釋出後 圖片都不顯示了！
微信小程式中，圖片名不能出現中文，圖片路徑不能出現中文。
之前使用者未授權過時，呼叫wx.getUserInfo會調出授權框；但現在在使用者未授權過時呼叫該介面，會直接走fail方法。
要使用上述button來請求使用者授權。
<button open-type="getUserInfo"></button><button wx:if="{{canIUse}}" open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo">授權登入</button>
<view wx:else>請升級微信版本</view>
index.js
Page({
data: {
//判斷小程式的API，回撥，引數，元件等是否在當前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 檢視是否授權
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
//使用者已經授權過
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
if (e.detail.userInfo){
//使用者按了允許授權按鈕
} else {
//使用者按了拒絕按鈕
}
}
})官方宣佈，如果提審的小程式出現「啟動即要求授權」和「強制要求授權」的情況，將會無法通過稽核。
button 元件的 open-type 屬性賦予了新的有效值 getUserInfo
// 載入微信使用者資訊
// wx.getUserInfo({
// success: res => {
// console.log("wx獲取 使用者資訊", res.userInfo);
// wx.setStorageSync("avatarUrl", res.userInfo.avatarUrl);
// wx.setStorageSync("nickName", res.userInfo.nickName);
// }
// }); wx.request({
url: 'http://',
method: 'POST',
header: {
Authorization: "Basic ",
'Content-Type': 'application/x-www-form-urlencoded', // 預設值
},
data: {
mobile: 'w@' + res.code,
grant_type: 'mobile',
},
success: function(res) {
console.log("button 成功", res.data);
console.log("button token 成功", res.data.access_token);
wx.setStorageSync("token", res.data.access_token);
wx.showModal({
title: '提示',
content: '模態彈窗',
success: function(res) {
if (res.confirm) {
console.log('使用者點選確定')
} else {
console.log('使用者點選取消')
}
}
})onLoad: function () {
var that = this;
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo
})
} else if (this.data.canIUse) {
// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的相容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo
})
that.checkSettingStatu();
},
fail: function () {
wx.showModal({
title: '使用者未授權',
content: '如需正常使用該小程式功能，請按確定並在授權管理中選中“使用者資訊”，然後點按確定。最後再重新進入小程式即可正常使用。',
showCancel: false,
success: function (resbtn) {
if (resbtn.confirm) {
wx.openSetting({
success: function success(resopen) {
// 獲取使用者資料
that.checkSettingStatu();
}
});
}
}
})
}
})
}
}
// onload裡面呼叫授權checkSettingStatu: function (cb) {
var that = this;
// 判斷是否是第一次授權，非第一次授權且授權失敗則進行提醒
wx.getSetting({
success: function success(res) {
var authSetting = res.authSetting;
if (isEmptyObject(authSetting)) {
//第一次
} else {
// 沒有授權的提醒
if (authSetting['scope.userInfo'] === false) {
wx.showModal({
title: '使用者未授權',
content: '如需正常使用該小程式功能，請按確定並在授權管理中選中“使用者資訊”，然後點按確定。最後再重新進入小程式即可正常使用。',
showCancel: false,
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: function success(res) {
console.log()
}
});
}
}
})
} else if (authSetting['scope.userInfo'] === true) {
//該處使用者獲取使用者的一些授權資訊
if (that.data.userInfo) {
var nickname = that.data.userInfo.nickName;
var gender = that.data.userInfo.gender
//性別 0：未知、1：男、2：女
if (gender == 1) {
gender = "True"
} else if (gender == 2) {
gender = "False"
} else {
gender = "True"
}
}
}
}
}
})
}
// 用於檢測 當前授權的狀態簡單的獲取資訊用於顯示
<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data><button open-type="getUserInfo">獲取使用者資訊
在頁面載入後呼叫wx.getSetting方法可以獲取當前使用者的設定
wx.showModal({
title: '提示',
content: '模態彈窗',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
}else{
console.log('使用者點選取消')
}
}
})新的調整之後 這個wx.getUserInfo（）便不再出現授權彈窗了，需要使用button做引導~
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登入</button>
<view wx:else>請升級微信版本</view>//js
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 檢視是否授權
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
}
})<!-- 如果只是展示使用者頭像暱稱，可以使用 <open-data /> 元件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
//index.js
//獲取應用例項
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
getUserInfoFail:false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onShow:function(){
this.login();
},
onLoad: function () {
if (app.globalData.userInfo) {
console.log(1)
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
console.log(2)
// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
console.log(12)
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
console.log(3)
// 在沒有 open-type=getUserInfo 版本的相容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
},
fail:res=>{
console.log(4);
this.setData({
getUserInfoFail:true
})
}
})
}
},
getUserInfo: function(e) {
console.log(5);
console.log(e)
if(e.detail.userInfo){
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}else{
this.openSetting();
}
},
login: function () {
console.log(111)
var that = this
// if (typeof success == "function") {
// console.log(6);
// console.log('success');
// this.data.getUserInfoSuccess = success
// }
wx.login({
success: function (res) {
var code = res.code;
console.log(code);
wx.getUserInfo({
success: function (res) {
console.log(7);
app.globalData.userInfo = res.userInfo
that.setData({
getUserInfoFail: false,
userInfo: res.userInfo,
hasUserInfo: true
})
//平臺登入
},
fail: function (res) {
console.log(8);
console.log(res);
that.setData({
getUserInfoFail: true
})
}
})
}
})
},
//跳轉設定頁面授權
openSetting: function () {
var that = this
if (wx.openSetting) {
wx.openSetting({
success: function (res) {
console.log(9);
//嘗試再次登入
that.login()
}
})
} else {
console.log(10);
wx.showModal({
title: '授權提示',
content: '小程式需要您的微信授權才能使用哦~ 錯過授權頁面的處理方法：刪除小程式->重新搜尋進入->點選授權按鈕'
})
}
}
})