当我们在不同的电脑上开发时，想要开发工具的配置是一样的（字体，字号，主题等等），可以把
project.config.json文件写成一致在小程序中引入图片，如果不加样式，那么图片会有一个默认样式
width: 300px; height: 225px在小程序中的文本最好写在
<text></text>中小程序的
rpx
rpx 与 px 的区别：
- rpx 会根据屏幕的大小变化自我调整，使之所占页面比例不变，px是一个死值，不会变化。
- rpx 与 px 是2倍的关系(iphone6)，比如一个图片在小程序中显示
200rpx x 200rpx, 大小等于100px x 100px
- 移动端分辨率和小程序单位
rpx
-
移动设备的分辨率
image.png
说明：
- 逻辑分辨率（pt）：可以理解为就是一个长度单位，跟屏幕的尺寸有关
- 物理（设备）分辨率（px）：每个px就是一个像素点，没有大小，可以理解为每个px就是一个设备光点。以ip3和ip4为例，同样屏幕尺寸下，ip4一个pt可以容纳4个px, 也就是说，同样屏幕尺寸，ip4容纳了更多的像素， 所以ip4的屏幕显示更细腻。
- ppi(dpi): 像素密度，就是每英寸屏幕存在多少颗像素。所以我们讨论一块屏幕的好坏，分辨率是没有太大意义的，应该看ppi的大小。比如一台40寸的电视比一台5寸的手机分辨率高，就能说电视屏幕比手机屏幕要好吗？很明显是不对的。
- 逻辑分辨率只存在于移动端，pc端是直接使用物理分辨率的，移动端使用逻辑分辨率。
为什么移动端要使用逻辑分辨率呢？
开发方便，因为现在物理像素五花八门，而且屏幕倍率也很乱（1.x, 2.x倍屏），使用物理像素应对各种机型注定一片混乱，而使用逻辑像素就可以解决这个问题。
- 小程序的
rpx理解
一个问题：在移动端使用逻辑像素在不同的屏幕大小下，内容显示也不一样
那么如何做不同分辨率设备的自适应？
- ip6下
1px = 1rpx = 0.5pt- 使用
rpx，小程序会自动的在不同分辨率的设备下进行转换，而在px下则不会转换。因为px(逻辑像素)是一个长度单位，是死的，不会进行响应式。- 小程序中设计图的时候，最好要以ip6为基准，因为在ip6下，1px(物理像素) = 1rpx, 很容易换算，并且当时小程序设计rpx的时候，也是参照的 ip6。
- 不是所有的单位都适合用
rpx，因为rpx会根据不同的机型做自适应调整的，而我们有些地方不想调整。另外水平方向上最好不要使用 px ,因为小屏幕的话，元素可能显示不下而换行，竖直方向长度是无限的，则没有这个顾虑。
- 小程序之
swiper组件的使用
- 设置滑动组件显示内容的高宽，要在
swiper标签上设置swiper-item仅可放置在swiper组件中，宽高自动设置为swiper组件的100%swiper-item也是一个容器，里面不仅仅只是放一个文本或一张图片那么简单，可以做出很复杂的效果，例如电脑的宣传页。
- 小程序数据绑定模式是 单向数据绑定
区别：
- 单向数据绑定： 小程序data中定义的变量改变，页面中的数据会随之改变，页面数据变化，data中的变量不会自动改变（通过事件的方式还是可以改变的）
- 双向数据绑定：页面和data中的数据会互相改变，例如 vue.js中的input框就可以通过输入值改变data中的数据
-
setData的用处
把获取的数据传到data中，因为只有data中的数据才能在页面中渲染出来 - 一个问题：
<swiper indicator-dots='true' autoplay='true'></swiper>
当我们把autoplay改成 autoplay = 'false' 或者 autoplay = '333'，你会发现仍然会自动轮播，因为autoplay后面是是字符串 'false' 和 '333'，转化为布尔值仍然是 true。我们可以这样写 autoplay = '{{false}}'就可以啦
记住：
不加双大括号：解析的是整个字符串
加上双大括号：解析的是双大括号里面的值或表达式这个类似与
vue.js中的是否加v-bind是一样的效果。
-
wx.navigateTo与wx.redirectTo的区别
两者都是用来跳转页面的api
区别：
- 表面上看，
wx.navigateTo跳转后有返回按钮，点击后还可以返回；wx.redirectTo则没有返回按钮- 深层次说，
wx.navigateTo跳转后onHide钩子执行，说明上一个页面只是隐藏了起来；wx.redirectTo跳转后onUnload钩子执行，说明上一个页面已经被卸载。这也找到了返回按钮有无的原因
-
bind与catch的区别：
bind不会阻止冒泡，catch 会阻止冒泡
<view class='button' bind:tap='onContainerTap'>
<text catch:tap='onSubTap'>开启小程序之旅</text> // hui'zu'zhi
</view>
小程序自定义属性规则
data-xxx-yyy-zzz等当我们想要在引用的 template 上加一些事件时，直接在template上加是无效的，因为 template 只能算是个占位符，template 标签不会被渲染到页面上的。可以在 template 标签外面包裹一层标签来添加事件
<view bind:tap="onPostTap">
<template is="postItem" data="{{...item}}" />
<!--...item就是把item的属性展开，在模板中直接使用属性即可 -->
</view>
- 小程序的缓存
- 设置缓存
wx.setStorageSync("key", "小徐")- 获取缓存
var love = wx.getStorageSync("key"); console.log(love)- 修改缓存：
wx.setStorageSync("key", "小刘")，相同名称的缓存，后添加的会覆盖前面的- 清除缓存：
- 清除某个缓存：
wx.removeStorageSync("key")- 清除全部缓存:
wx.clearStorageSync()
注意：小程序的缓存没有失效期的概念，如果我们不向用户提供清除小程序的两种方法，那么缓存会永久存在。缓存的上限不能超过 10 mb
onStorageTap: function() {
// wx.setStorageSync("key", "小徐") // 设置缓存
wx.setStorageSync("key", {
小徐: "小刘"
}) // 修改缓存，只要缓存名字一致，后添加的会覆盖之前的
var love = wx.getStorageSync("key") // 获取缓存
console.log(love)
},
onDeleteStorage: function() {
//wx.removeStorageSync("key") // 清除某个缓存
wx.clearStorageSync(); // 清除所有缓存
}
- 小程序的
target和currentTarget
- target: 触发事件的根源组件（触发点组件）
- currentTargrt: 事件绑定的当前组件 （事件绑定的组件）
<swiper bind:tap="onSwiperTap" indicator-dots='true' autoplay='true'>
<swiper-item>
<image bind:tap="onImageTap" src='/images/wx.png' data-postId="3"></image>
</swiper-item>
<swiper-item>
<image src='/images/vr.png' data-postId="4"></image></swiper-item>
<swiper-item>
<image src='/images/iqiyi.png' data-postId="5"></image>
</swiper-item>
</swiper>
在上面代码中，要想拿到image 组件，onImageTap事件用currentTarget和target都可以，onSwiperTap事件只能用target。
小程序的所有快捷键
F1，快速打开文件功能Ctrl+p, 打开最近打开过的文件Ctrl+e-
小程序的四种文件类型
image.png -
小程序的组织结构
注意：小程序的全局文件是不能够改名的
image.png
image.png -
小程序全局配置（app.json)
window中的background
此处background是指页面下拉或上拉后显示在页面后的背景
此处背景要如何配置：应该与页面的颜色保持一致
Snipaste_2019-07-02_10-11-57.png 自定义组件只能继承少数的全局样式，例如：
font, color，其他的并不能影响组件的样式。页面是可以继承绝大多数的全局样式的小程序中自适应宽度的盒子
display: inline-flex
好处：盒子可以根据内部内容的变化而变化
坏处：盒子宽度变化时会发生明显的跳动，体验不是很好wx.request是小程序中用来请求数据的api
注意：
- success: 接口调用成功后的回调函数
- fail: 接口调用失败后的回调函数
什么时候执行success和fail呢？
只要经过服务器，无论是否成功返回数据，都会执行success，例如状态码中4开头的没成功得到数据照样执行success
网络中断或者或者api接口错误的时候会执行fail
-
const声明的是一个常量，不能改变他的值
const config = {
api_base_url: 'http://bl.7yue.pro/v1/',
appkey: "VWw76y0ZuR5h2loo",
}
注意：
config = 2 // 报错 ， 内存地址改变
config.appkey = 1 // 不报错
为什么？
const声明的常量不能改变其内存地址，改变了就会报错，不改变不会报错
- 小程序中引入一个模块，无论是import还是require都要使用相对路径
var postsData = require('/data/posts-data.js') // 错误
var postsData = require('../../data/posts-data.js') // 正确
import {config} from '/config.js' // 错误
import {config} from '../config.js' // 正确
- 小程序组件中
properties和data的一些对比
properties: {
index: Number
},
data: {
year: Number,
month: String
},
attached: function () {
console.log(this.data)
console.log(this.properties)
},
打印结果如下：
问题：
properties中的Number默认为0，data中的为啥是函数呢？data和properties为啥是一样的？
解答：
properties中做过特殊处理，默认Number就是0，默认String就是空字符串，默认Boolean就是false，默认Object就是空对象。而data没有这样处理，就会打印出各类型对应的构造函数- 小程序中
properties和data两个对象最后会被合并成一个对象，所以注意这两个对象中的key不能重复，否则会被覆盖
-
observer是自定义组件properties中的方法，当属性值变化时会调用
注意：不要在observer中修改自身属性值。因为属性值变化就会调用observer, 容易形成无限递归，造成内存泄漏
例如：
properties: {
index: {
type: String,
observer: function(newVal, oldVal, changedPath){
let val = newVal<10?"0"+newVal:newVal
this.setData({
index: val
})
}
}
}
上面代码中，默认值是空字符串，如果传过来的值是8，那么属性值改变，调用 observer，在observer中把属性值改为'08', 再次调用 observer, 变为 '008'，就这样无限循环，直至内存泄漏。
所以，如果我们要改变属性值，可以把改变的属性值转移到 data 对象中
上面的代码可以改一下：
properties: {
index: {
type: String,
observer: function(newVal, oldVal, changedPath){
let val = newVal<10?"0"+newVal:newVal
this.setData({
_index: val // _index是data中的一个属性
})
}
}
}
- 小程序中
behavior使用总结
-
behavior文件相当于 自定义组件中的js文件，里面的内容差不多都是一样的 -
behavior用来存储组件共有的一些 属性，数据，方法以及生命周期函数 -
behavior是多继承的，而es6中的类的继承就是单继承的
behavior: [classicBeh, a, b] // 一个组件可以继承多个 behavior
class classicModel extends HTTP {} // 类继承只能继承一个类
-
behavior多继承有什么注意点呢？
- 当组件引用的
behavior中有属性与组件中重名，那么组件中的属性会覆盖掉behavior中的属性- 若组件引用的几个 behavior 都有同名属性，那么最后引用的
behavior属性会覆盖掉前面的behavior属性，以上这些覆盖规则同样适用于数据，方法。- 以上的情况在 生命周期函数 上面不适用，生命周期函数不会被覆盖，若是有同名的生命周期函数，小程序会从各个 behavior 组件依次执行。
- 小程序中的
hidden可以控制元素的显示和隐藏，不过自定义组件中直接使用hidden并没有效果
<view hidden="{{true}}"></view> // view部分在页面上消失啦
<v-movie hidden="{{true}}" /> // 组件并没有在页面上消失，相当于向v-movie组件传递了一个hidden属性
为什么：因为我们自定义的组件，小程序解析 hidden 的时候当作了一个属性
我们怎么通过 hidden 来控制组件的显示和隐藏呢？
// 组件
properties: {
hidden: Boolean
}
<view hidden="{{hidden}}"></view>
注意：
小程序中 hidden 和 wx:if 的区别与 vue.js 中的 v-show, v-if 类似
