微信小程式開發技巧及填坑記錄

以下是自己在開發過程中遇到的坑和小技巧,記錄以下:

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裡面的路由填寫順序,如一般二級介面就寫在一級介面的下面,千萬別寫在末尾.如:

正確寫法:

錯誤寫法:

 同時,也要注意默認自帶個,通常一般都是放在末尾,有時我放在中間部分,下方的部分頁面也會出現.有時出現這個錯誤完全只是開發工具的問題,重啟下就好了(公測第一版的開發工具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)
  }
})

　　

 3.使用rpx在實現基本的屏幕自適應.

 3.使用rpx在實現基本的屏幕自適應.

 3.使用rpx在實現基本的屏幕自適應.

css的尺寸單位，rpx可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個實體像素，則750rpx = 375px = 750實體像素，1rpx = 0.5px = 1實體像素。 設備rpx換算px (螢幕寬度/750)px換算rpx (750/螢幕寬度) 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6s1rpx = 0.552pxiPhone6siPhone6s1rpx = 0.552px

1rpx = 0.552px		微信小程式也支援rem尺寸單位，rem與rpx的換算關係：rem: 規定螢幕寬度為20rem；1rem = (750/20)x 師可以用iPhone6 作為視覺稿的標準。 建議：設計稿使用設備寬度750px比較容易計算750px的話1rpx=1px，這樣的話，設計圖上量出來的尺寸是多少px就是多少rpx，至於在不同的設備上實際上要換算成多少個rem就交給小程式自己換算 4.sublime福音：微信小程式元件及API補全插件 http://www.cnblogs.com/zhengrunlin/p/5951224.htmlhmhmsr=touti? .io&utm_medium=toutiao.io&utm_source=toutiao.io 5.微信推出了一套官方樣式庫,方便大家開發,對於一些類似的UI界面我們需要引入即可,無需重複造輪子. 附上github地址:  https://github.com/weui/weui-wxss 我們只需導入weui.wxss等即可減少大量的css佈局工作.   更多微信程式開發技巧及填坑紀錄相關文章請關注PHP中文網！