以下是自己在開發過程中遇到的坑和小技巧,記錄以下:
1.出現了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task.
截圖如下:
解決辦法:需要在每個XXX.js文件中加入page(),以用來生成一個頁面實例對象.
Page({
});
有時就算你在每個js文件中都寫了基本的page()代碼,還是會保這個錯誤,這時需要注意app.json里面的路由填寫順序,如一般二級界面就寫在一級界面的下面,千萬別寫在末尾.如:
正確寫法:
錯誤寫法:
同時,也得注意默認自帶index和logs這兩個,通常一般都是放在末尾,有時我放在中間部分,下方的部分頁面也會出現.有時出現這個錯誤完全只是開發工具的問題,重啟下就好了(公測第一版的開發工具bug太多).
2.網絡請求:對於網絡請求也是一個大坑.一如既往,小程序只能使用https,除非使用破解之后的開發工具,並且不能在真機運行.https://github.com/gavinkwoe/weapp-ide-crack
對於網絡請求,最常使用的是POST請求,但是這就是微信小程序的大坑所在.官方的文檔及其簡陋,連入門都不夠的.對於post請求,我們需要把data改為formData傳過去才行.
首先在Utils文件夾中的Util.js文件文寫出以下代碼,用來把參數轉為formData
//參數data轉formData
function json2Form(json) {
var str = [];
for(var p in json){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
}
return str.join("&");
}
module.exports.json2Form = json2Form
然后在post請求的文件中,引入該Util.js文件
var Util = require( '../../../utils/util');
接下來就是修改request方法:
//調用應用實例的方法獲取全局數據
wx.request({
url: 'http://www.pintasty.cn/productdetail/findproductdetailbyid',
method: 'POST',
header: {
"content-type": "application/x-www-form-urlencoded" //這里的改,一開始Content-Type可以,現在只能使用content-type
},
data: Util.json2Form( { product_id:"P-2c22ad5be9b24a5da0cd5d8594e8ec32",uploadImgId : "UU-60a0e559b0a0421d892232fc75ee9d17" }), //這里得改,參數只能這樣傳入
success: function (res) {
console.log('酒品詳情' + JSON.stringify(res))
that.setData({
wineData:res.data.data,
bigPicture:res.data.data.bigPicture
})
},
fail: function (res) {
console.log('失敗' + JSON.stringify(res))
},
})
然后就行了,因為我的是破解版開發工具,所以可以http.
3.在XXX.js文件中獲取屏幕的寬高.
主要根據小程序提供的getSystemInfo()方法,該方法可以獲取到設備的常用信息,如手機型號.設備像素比.屏幕寬高等等.最常用的就是屏幕寬高了
//獲取屏幕寬度
var screenWidth = wx.getSystemInfo({
success: function (res) {
screenWidth = res.windowWidth
}
})
//獲取屏幕高度
var screenHeight = wx.getSystemInfo({
success: function (res) {
screenHeight = res.windowHeight
}
})
Page({
onLoad:function(){
console.log('屏幕高度:'+screenHeight)
console.log('屏幕寬度:'+screenWidth)
}
})
http://www.jb51.net/article/93994.htm
3.使用rpx在實現基本的屏幕自適應.
rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 設備 | rpx換算px (屏幕寬度/750) | px換算rpx (750/屏幕寬度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
微信小程序也支持rem尺寸單位，rem和rpx的換算關系：rem: 規定屏幕寬度為20rem；1rem = (750/20)rpx
注：開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標准。
建議：設計稿使用設備寬度750px比較容易計算750px的話1rpx=1px，這樣的話，設計圖上量出來的尺寸是多少px就是多少rpx，至於在不同的設備上實際上要換算成多少個rem就交給小程序自己換算
4.sublime福音：微信小程序組件及API補全插件
5.微信推出了一套官方樣式庫,方便大家開發,對於一些類似的UI界面我們需要引入即可,無需重復造輪子.
附上github地址: https://github.com/weui/weui-wxss
我們只需導入weui.wxss等即可減少大量的css布局工作.
6.請求openid不允許在移動直接請求,需要移動先請求后台,后台再請求微信,微信返回后台,后台返回移動端的流程,和支付類似.
之前,我們直接在移動端請求微信的接口,但是會出現管理后台更新域名配置這個錯誤.發帖請求官方得以下回復:
再詢問網友,得知移動端直接請求這個微信6月份已被禁止了.白忙活一天.
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxchecksessionobject
7.使用mpvue,屎一樣的bug:Newline required at end of fine but not found.
如圖:
報錯位置:
只需要在app.$mount()下方再來一行空白行即可.
8.小程序通過background-image設置背景圖片
微信小程序通過background-image設置背景：只支持線上圖片和base64圖片，不支持本地圖片；base64圖片設置步驟如下：
a.在網站http://imgbase64.duoshitong.com/上將圖片轉成base64格式的文本
b.在WXSS中使用以上文本：background-image: url("data:image/png;base64,iVBORw0KGgo=...");
c.為了是背景圖片自適應寬高，可以做如下設置：
background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;后續的工作遇到再添加.