1.第一点差别，单位的差别
这个rpx单位好用得不行，直接设计图给多少直接写多少就行了，完全不用做适配。到后来稍微了解了一下这个rpx单位以后发现事情并没有那么简单。
这个rpx以iphone6为基础，他会自己转化那个比例的。1px=2rpx；但是你写px为单位的话，他不是不会适配的就固定多少px而不会因为自己的屏幕变大
而会改变。仍然是占那么多的比例
2兼容性适配
说到兼容性的适配，必须提出来的一点是：在微信开发者工具中看到的样式很有可能跟真机测试的样式是不一样的
导致的原因有几种：
情况一：可能使用了ios或安卓某一端不兼容的样式属性；目前编辑器检查越来越严格，标签不闭合可能导致一些奇怪的问题；
情况二：使用了开发工具内的压缩代码，样式自动补全等设置，这些设置有时候会存在BUG会导致一些css丢失等问题；可以在取消部分设置后重试；
情况三：颜色不对，或者设置颜色无效，请使用十六进制颜色码代替英文颜色；
————————————————
版权声明：本文为CSDN博主「面条君1995」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_41627898/article/details/83475291
微信小程序入门的学习之路：https://blog.csdn.net/sinat_41627898/article/details/83473927
微信小程序知识点总结
与css相比我们扩展的特性有：
尺寸单位
样式导入
对每个手机不通屏幕设置了比例px，当我们的单位是rpx的时候，会自己转换比例的。 iphone6的比例是1rpx=0.5px，所以一般用iphone6为稿标准吧
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况
使用@import语句可以导入外联样式表，
这是导入到wxss中的，不是像我们引入到html中的
@import后相对路径，用;表示语句结束
/* common.wxss */
.small-p{
padding:10rpx;
}
/* app.wxss */
@import "common.wxss";
.middle-p{
padding:10rpx;
}
什么是小程序?
小程序是微信推出的一种新的公众号的形态
不需要下载安装即可在微信中使用的应用
小程序、订阅号、服务号、企业号是并行的体系
微信小程序框架–MINA
小程序融合了很多前端开发界的概念，但是并没有采用任何一个框架，包括流行的REACT、VUE，还有CORDOVA。它不是三者中的任意一个，而是拼凑出一个新的框架。
尽可能简单、高效的方式让开发者可以在微信中开发
具有原生 APP 体验的服务
下面的知识点原文：https://segmentfault.com/a/1190000019906178?utm_source=tag-newest
一、微信小程序宿主环境
微信小程序使用的技术栈是js/wxml/wxss。跟我们web开发使用的技术栈存在一些不同。
- js：微信小程序的js运行是基于微信客户端，或者只微信APP上下文来运行的，并不是在浏览器中运行，因此它不能访问浏览器环境下的DOM对象，也不能访问node.js下的操作系统API等。
- wxml：是微信提供的一种新的基于XML的语法格式，作为微信小程序的展示层，提供整个页面的结构。
- wxss：是一套用于修饰微信组件的样式语言。wxss具有大部分的css特性，但是仍存在一些其他的不足。
微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具
在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10； 在 Android 上， 旧版本，小程序逻辑层的 javascript 代码运行中 X5 JSCore 中，视图层是由 X5 基于 Mobile Chrome 57 内核来渲染的； 新版本，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 67 内核来渲染的； 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中，mwjs是合并browser和node的运行时，使用前端技术来开发跨平台的应用，微信小程序开发工具就是使用其开发的。
注意：三端环境各不相同，虽然提供了类似的实现，但是还是存在一些不同，JavaScript 语法和 API 支持不一致，我们可以通过开启ES6自动转换来规避一些问题。
五、微信小程序的生命周期
应用的生命周期
当我们第一次启动小程序的时候，首先初始化小程序执行环境，然后会从本地缓冲或者是CDN下载代码包进行加载，当我们的小程序初始化完成之后，会触发APP实例的onLaunch方法，全局只调用一次。
当我们切换小程序到后台的时候调用onHide，当切回前台的时候调用的是onShow方法。当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
页面的生命周期
- onLoad 页面第一次加载的时候调用，只调用一次，此时我们可以拿到一些页面的打开参数。
- onShow 页面显示或者从后台切回前台的时候调用的，该方法可能会调用多次，比如我们页面的跳转和返回，都会调用onShow。
- onHide 页面隐藏或者切到后台会调用，也是会调用多次。
- onReady 页面渲染完成之后调用，一个页面只调用一次。
- onUnload 页面销毁的时候调用，比如我们点击返回键，那么当前页面会销毁执行onUnload。
我们结合页面跳转来分析一下页面生命周期的调用顺序～
假如我们有index和logs页面。index为首页，index有一按钮可以跳转到logs
1、第一次进入，先调用app实例的onLaunch和onShow。 2、调用index页面的onLoad、onShow、onReady 3、点击按钮：调用index的onHide，然后调用logs的onLoad、onShow、onReady 4、点击左上角的返回，先调用logs的onUnload,然后调用index的onShow 5、点击按钮：调用index的onHide，然后调用logs的onLoad、onShow、onReady
上面是官网提供的一个图，我们可以分析一下～
1、小程序执行需要两个线程，一个是UI线程负责视图层，一个是AppService线程，负责逻辑处理。
2、AppService线程创建好之后会依次调用onLoad和onShow方法，我们可以在这里做一些数据请求操作
3、UI线程创建好之后会进行初始化工作，当初始化ok之后，会告诉AppService线程，此时AppService发送数据，提供给UI线程进行页面数据填充。然后页面进行初次渲染，渲染好之后告诉AppService线程，此时onReady回调开始触发。
4、期间AppService线程可以处理一些事件触发，从而更新data数据，重新触发视图的渲染。
针对路由变化，页面生命周期的调用
总之页面出栈，会调用onUnload去销毁我们的页面，如果不出栈，调用onHide。
如何能好的掌握页面路由变化我们页面生命周期怎么变化，我们还需要知道路由变化的机制。
navigateTo, redirectTo 只能打开非 tabBar 页面。 switchTab 只能打开 tabBar 页面。 reLaunch 可以打开任意页面。 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。 调用页面路由带的参数可以在目标页面的onLoad中获取。 wx是封装的全局对象
开发查官网：https://developers.weixin.qq.com/miniprogram/dev/reference/
App()：注册小程序
结构 样式 行为（页面三要素）
小程序找图片绝对路径
控制台看到的是css像素
app.json的page会有页面路径，新建时会自动写入，如果没有app.json，则没有地方写入
捕获 获取 冒泡
自定义事件
————————————————
冒泡事件
a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
b) 冒泡事件列表：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
非冒泡事件
a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。
b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
绑定事件
bind绑定：事件绑定不会阻止冒泡事件向上冒泡
————————————————
catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡
将上面的bindtap改成catchtap就可以啦
跳转页面
wx.navigateTo(OBJECT)：跳转有记录，可通过回退键进行回退9
// 跳转到list页面
wx.navigateTo({
url: ‘/pages/list/list’,
success(){
console.log(‘跳转成功’);
}
})
wx.redirectTo(OBJECT)：
没有记录，不能进行回退
// 跳转到list页面
wx.redirectTo({
url: ‘/pages/list/list’,
success(){
console.log(‘跳转成功’);
}
})
————————————————
原文链接：https://blog.csdn.net/qq_37642495/article/details/88971457
发现一篇文章还可以知识点全面：https://www.jianshu.com/p/ae66feab1ef7
记得看这篇文章很重要