微信小程序开发

像素单位

参考

1. px：就是 Pixel 的缩写，就是指像素，图片采样的基本单位。
2. rem：把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem，根据屏幕大小动态的设置 fontsize，来达到不同的分辨率下有一样的效果。
3. rpx：这个单位是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度进行自适应。可与 rem 换算：1 rem = (750/20) rpx =37.5 rpx。可以根据屏幕宽度进行自适应。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
4. vw：视窗宽度，1vw等于视窗宽度的1%。
5. vh：视窗高度，1vh等于视窗高度的1%。
6. n%：父级容器的宽度百分百。

标签

HTML	微信小程序	意义
<div> </div>	<view> </view>	块级标签，默认换行
<span> </span>	<text> </text>	行内标签，默认不换行
<button> </button>	<button> </button>	按钮
select	picker	下拉框
fieldset	rich-text	区域划分

应用实例

1. 按钮绑定并切换点击事件

<button id="button1" bind:tap="{{bnt1Func}}">BTN1</button>

Page({
	data: {
		bnt1Func: "bnt1Func1"
	},
	bnt1Func1() {
		this.setData({
			bnt1Func = "bnt1Func2"
		})
		console.log("calling bnt1Func1");
	},
	bnt1Func2() {
		this.setData({
			bnt1Func = "bnt1Func1"
		})
		console.log("calling bnt1Func2");
	}
})

2. 部分字体加粗且不换行

<view style="display: flex;">
  <text class="stat" style="margin-right: 5rpx;">XP: <text style="font-weight: bold;">{{xpText}}</text></text>
  <text class="stat" style="margin-right: 5rpx;">Health: <text style="font-weight: bold;">{{healthText}}</text></text>
  <text class="stat" style="margin-right: 5rpx;">Gold: <text style="font-weight: bold;">{{goldText}}</text></text>
</view>

3. padding和margin的区别

参考：Padding vs Margin in CSS: Key Differences + Tips

The main difference between padding and margin is that padding is the space between the element’s content and its border, while margin is the space between the element’s border and the next element. Padding is used to create space within an element, while margin is used to create space between elements.

4. 页面跳转

参考：官方文档

1. wx.redirectTo(): 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面；
2. wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层；
3. wx.navigateBack(): 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层；
4. wx.reLaunch(): 关闭所有页面，打开到应用内的某个页面；
5. wx.switchTab(): 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；

5. 定义const变量

1. 在每个页面的js文件的Page({ data:{} }) 中定义的数据在程序中可以修改，通过this.data.variableName访问；(和HTML页面相关的变量在这里定义)
2. 可以在Page({})范围之外，通过 const PI = 3.1415;的方式定义全局const变量（其他类型也是一样的），直接通过变量名就可以访问变量；（和内部逻辑相关的变量以这种方式定义）

6. 修改变量值

修改变量值有两种方法：this.data.number = 0; 以及 this.setData({ number: 0})；这两种方法的共同点就是都能改变js文件中，这个变量的值；不同的是，如果页面上和number这个变量绑定了，则this.data.number = 0;并不会更新页面上的值，也就是说出现了页面的值和变量实际值不一致的情况；而this.setData({ number: 0})可以确保页面上显示的值和变量实际值始终保持一致。

7. 日志相关

参考：console
参考：实时日志
参考：实时日志
参考：wx.setEnableDebug()
参考：如何使用实时日志

1. console打印的日志只能在微信开发者工具的Console面板，以及真机调试(开发版)或者体验版的vConsole界面看到；（vConsole只有在真机调试(开发版)和体验版中可以开启，发布版小程序不能开启vConsole调试）；（但是在特定的情况下发布版也可以看到vConsole调试信息：方法一是先在开发版或体验版打开调试，再切到正式版就能看到vConsole；方法二是通过wx.setEnableDebug()在代码中使能调试；但是注意：即使发布版的vConsole打开了，也只能看到开发者自己的操作日志，其他用户的是看不到的！）
2. wx.getRealtimeLogManager()和wx.getLogManager()区别
3. 实时日志库的使用：一是需要按照此方法在代码中调用实时日志的接口，二是需要在We分析(相关账号登录)-性能质量-实时日志查看实时日志；
   （注意：实时日志的 debug 日志好像不能显示在 We分析 上面，info error warn 都可以！）
   
4. 有时候 vConsole 不能打印日志，关闭 vConsole 后重新打开就可以了；

8. 获取实时时间

9. 样式表变量

1. 在CSS中，是在.root{}中定义变量；而wxss中，是在page{}中定义变量；使用方法一样；

10. 获取输入框的值