『壹』 微信小程序 checkbox 怎麼變小

style="transform:scale(.7)"

『貳』 設計微信小程序是按照什麼尺寸做

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就交給小程序自己換算

『叄』 微信小程序 rpx和px的區別

rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0

『肆』 微信小程序的屏幕像素比是怎麼算出來的

尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為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
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

『伍』 微信小程序動畫中如何將rpx轉化px

正常對比 1rpx =2px
在正常的流程中 rpx 小程序會根據屏幕解析度自動調整

『陸』 微信小程序盒子上面怎麼消除間隙

1；vertical-align: top; 就可以來了源或者在 .surfaceTopImage 裡面加 上 vertical-align: middle;
2；用flex布局（推薦）
.surfaceTop {display: flex;flex-direction: row;align-items: center;}

『柒』 微信小程序怎麼引入外部的wxss

一、引入模板

小程序提供了兩個引入外部模板的方法：import和include

使用外部模板可以實現大部分共同頁面的代碼利用，在一個app中，頭部和腳部基本不會
變動太大，這時就可以通過模板的方式引入，實現多個頁面的復用。
1.1 import

示例：

<!--view.wxml-->
<template name="view">
<text>{{text}}</text>
</template>
1
2
3
4
引入：

<import src="view.wxml"/>
<template is="view" data="{{text: 'forbar'}}"/>
1
2
注意：import有作用域，即import引入的模板只在當前頁面有效，即import不會向下查找另外的模板
1.2 include

include標簽可以看作是對 「html」的一個拷貝，即將外部的wxml片段拷貝進文檔中
示例：
外部wxml片段

<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
1
2
3
4
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
1
2
3
4
5
總結：import是引入模板片段，且有作用域限制，不能進行模板嵌套。include是引入wxml片段，相當於代碼拷貝。
二、WXSS 微信樣式表

小程序中，頁面樣式的渲染通過wxss文件實現，.wxss可以看成是css，因為它們都在實現相同的功能。實質上wxss也是在css的基礎之上進行了擴充和修改得到的。
wxss在css上的擴展特性：
1）、尺寸單位：rpx
rpx：是一個相對像素單位，可以根據屏幕寬度進行自適應。
針對移動端的開發，設計稿一般都是以iphone6為標準的。而iphone用的是視網膜屏，即我們css中設定的1px，在iphone上實際是由2px*2px的像素點組成的。
以iphone6為准，屏幕寬度375px，共有750個物理像素，則750rpx=350px,即1rpx=0.5px
2）、樣式導入 @import
跟在css中的外部樣式表的導入類似
@import "common.wxss";

『捌』 小程序中字體大小用rpx 還是px好

關於是否使用rpx還是px，首先需要明白兩者之間的區別。

rpx：微信小程序中的尺寸單位rpx(responsive pixel):可以根據屏幕寬度進行自適應。規定屏幕寬度為750rpx。微信官方建議視覺稿以iphone6為標准，一般設計師出圖為2倍圖。

px：iphone6上1px=2rpx

1rpx相當於1個物理像素，何為物理像素，就相當於我們所使用的屏幕的尺寸，只不過換了一種說法叫物理像素，而我們平時css中所用到的px,實際上是數據顯示的尺寸，比如文字，圖片、設計樣式的盒子的大小1rpx的出現為我們搭起了物理像素與樣式像素px之間的橋梁，而且根據屏幕寬度進行自適應

<view class="box">rpx的像素</view>

<view class="bo">px的像素觀察</view>

.box{width:300rpx;height:200rpx;border:1rpx solid black;font-size:30rpx;}.bo{width:300px;height:200px;border:1px solid black;font-size:30px;}

結果：

所以，小程序中字體大小用rpx還是px要結合設計師出圖的文字大小，建議的話還是以rpx為主。

『玖』 怎麼去掉 小程序demo的版權信息

這里提供給大家一個最簡單的微信小程序示例Demo。
用到了倒仰樣式、Text組件、View組件和JS代碼的交互，大家要理解WXML、JS、WXSS和JSON文件的用途及相互關系。

新建項目，然後在index.wxml頁面中創建相關控制項
[XML] 純文本查看 復制代碼
?
01
02
03
04
05
06
07
08
09
10
<!--創建一個藍色背景的View，添加點擊事件,並輸出啟動日誌-->
<view bindtap="bindViewTap" class="myView">
<text class="myView-clickK">點我點我</text>
</view>

<!--創建了一個text標簽，然後執行了JS交互，通過兩個大括弧，在index.js中進行賦值-->
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

然後在index.wxss文件中設計控制項位置和屬性樣式，注意：
/**rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。
規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，
則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。開發建議：
開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標准。UI設計圖建議：使用
設計稿使用設備寬度750px比較容易計算750px的話1rpx=1px，這樣的話，設計圖上量出
來的尺寸是多少px就是多少rpx**/
具體代碼如下：
[CSS] 純文本查看 復制代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.myView{
width: 200rpx;
height: 200rpx;
margin-top: -100rpx;
background-color: blue;
}
.myView {
display: flex;
flex-direction: column;
align-items: center;
width: 200rpx;
height: 200rpx;
margin: 20rpx;
border-radius: 50%;
}
.myView-clickK {
margin-top: 75rpx;
height: 50rpx;
color: red;
}
.usermotto {
margin-top: 100rpx;
}

對應頁面的交互功能邏輯寫在index.js文件中，如下所示：
[JavaScript] 純文本查看 復制代碼
?
1
2
3
4
5
6
7
8
9
data: {
motto: 'Hello World，你好，世界！'
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},

設置導航樣式，需要在app.json中進行設置

效果展示：

打擊可以看到，當我們點擊藍色區域的【點我點我】，在其下方會出現'Hello World，你好，世界！'這些文字。這就是最簡單的觸碰事件及其處理效果的示例。

更多內容，請關注後續的教程。

『拾』 微信小程序滑動選擇器怎麼實現

組件說明：
picker：
滾動選擇器，現支持三種選擇器，通過mode屬性來區分，分別是普通選擇器(mode = selector)，時間選擇器(mode = time)，日期選擇器(mode = date)，默認是普通選擇器。