如何解決微信小程式介面適配問題

.wxss

page{
    height: 100%;
    width:750rpx;
}

this.setData({
     imageWidth: wx.getSystemInfoSync().windowWidth
})

rpx(responsive pixe)可以根據螢幕寬度進行自適應

WXML 提供兩種檔案引用方式import和include。

import
import可以在該檔案中使用目標檔案定義的template，如：

在 item.wxml 中定義了一個叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>
 

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域
import 有作用域的概念，即只會 import 目標檔案中定義的 template，而不會 import 目標檔案 import 的 template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
 

include
include 可以將目標檔案除了 <template/> <wxs/> 外的整個程式碼引入，相當於是拷貝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

生命週期回撥函式

onLoad(Object query)
頁面載入時觸發。一個頁面只會呼叫一次

onShow()
頁面顯示/切入前臺時觸發。

onReady()
頁面初次渲染完成時觸發。一個頁面只會呼叫一次.

onHide()
頁面隱藏/切入後臺時觸發。 如 navigateTo 或底部 tab 切換到其他頁面，小程式切入後臺等。

onUnload()
頁面解除安裝時觸發。如redirectTo或navigateBack到其他頁面時。

直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。
避免一次設定過多的資料
請不要把 data 中任何一項的 value 設為 undefined

getCurrentPages()
getCurrentPages() 函式用於獲取當前頁面棧的例項

reLaunch 可以開啟任意頁面。
呼叫頁面路由帶的引數可以在目標頁面的onLoad中獲取。

target
觸發事件的源元件。

currentTarget
事件繫結的當前元件。

dataset
在元件中可以定義資料

dataset
在元件中可以定義資料，這些資料將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字元-連結，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字元轉成駝峰elementType。

detail
自定義事件所攜帶的資料

request、uploadFile、downloadFile 的最大併發限制是 10 個

優化機制

setData 是小程式開發中使用最頻繁的介面，也是最容易引發效能問題的介面。

工作原理
小程式的檢視層目前使用 WebView 作為渲染載體，而邏輯層是由獨立的 JavascriptCore 作為執行環境。在架構上，WebView 和 JavascriptCore 都是獨立的模組，並不具備資料直接共享的通道。當前，檢視層和邏輯層的資料傳輸，實際上通過兩邊提供的 evaluateJavascript 所實現。即使用者傳輸的資料，需要將其轉換為字串形式傳遞，同時把轉換後的資料內容拼接成一份 JS 指令碼，再通過執行 JS 指令碼的形式傳遞到兩邊獨立環境。

而 evaluateJavascript 的執行會受很多方面的影響，資料到達檢視層並不是實時的。

WXSS樣式引入

rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

建議： 開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。

樣式匯入
使用@import語句可以匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。

示例程式碼：

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

往後餘生，唯獨有你
簡書作者：達叔小生
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： https://www.jianshu.com/u/c785ece603d1

結語
下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
小禮物走一走 or 點贊