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

時間 2019-11-06

標籤微信程序開發技巧記錄简体版

原文原文鏈接

如下是本身在開發過程當中遇到的坑和小技巧,記錄如下:javascript

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.css

截圖以下:html

解決辦法:須要在每一個XXX.js文件中加入page(),以用來生成一個頁面實例對象.vue

Page({

});

有時就算你在每一個js文件中都寫了基本的page()代碼,仍是會保這個錯誤,這時須要注意app.json裏面的路由填寫順序,如通常二級界面就寫在一級界面的下面,千萬別寫在末尾.如:java

正確寫法:git

錯誤寫法:github

同時,也得注意默認自帶index和logs這兩個,一般通常都是放在末尾,有時我放在中間部分,下方的部分頁面也會出現.有時出現這個錯誤徹底只是開發工具的問題,重啓下就行了(公測初版的開發工具bug太多).json

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物理像素。