微信小程序小程序与普通网页开发的区别小程序中rpx与px的区别图片自适应(组件-媒体组件-image) 获取用户信息

小程序与普通网页开发的区别

1、网页开发渲染线程和脚本线程是一个进程，而小程序二者是分开的，分别运行在不同的线程
2、网页开发者可以操作DOM和BOM，小程序缺少DOM和BOM的方法。导致了例如JQ、zepto等在小程序中无法运行
3、小程序的运行环境和Node.js环境也不相同，所以一些npm包在小程序中也是无法运行的
从小程序基础库版本2.2.1开始支持使用Npm安装第三方包

小程序中rpx与px的区别

区别：
    1、rpx是相对长度单位，而px是固定长度单位；
    2、rpx可以自适应手机分辨率，适配当前机型，而px不能很好的适应不同分辨率的手机。
a、rpx可以自适应手机分辨率，适配当前机型；可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
b、px是绝对大小。

图片自适应(组件-媒体组件-image)

scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top：裁剪模式，不缩放图片，只显示图片的顶部区域
bottom：裁剪模式，不缩放图片，只显示图片的底部区域
center：裁剪模式，不缩放图片，只显示图片的中间区域
left：裁剪模式，不缩放图片，只显示图片的左边区域
right：裁剪模式，不缩放图片，只显示图片的右边区域
top left：裁剪模式，不缩放图片，只显示图片的左上边区域
top right：裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left：裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right：裁剪模式，不缩放图片，只显示图片的右下边区域

获取用户信息的几种方式

1. 开放组件获取用户信息<open-data></open-data>该功能已无效
  a.该组件的type属性根据不同的属性值可以展示用户不同的信息
  b.该方式不需要授权，因为该方式值能获取到当前登录用户自己的基础信息
  c.但是该方法获取的用户信息只能展示，不可以通过js方法获取到
  组件功能调整：可以通过 头像昵称填写功能 功能进行收集。具体回收方式为：
  <open-data type="userAvatarUrl">用户头像</open-data>
2. wx.getUserInfo({})方法
该api只有已经授权过的用户才会被获取到信息，没有授权过的话调用是没用用的
3. 配置open-type属性
该方法可以弹出授权框，授权后可使用上面第二种方法获取用户信息
使用bindgetuserinfo属性绑定事件，该事件出发后有一个event参数，例：
  <button open-type="getUserInfo" bindgetuserinfo="onGetuserinfo">
    获取用户信息
  </button>
  onGetuserinfo(event){
    console.log(event)
  }

获取到用户的openID有两种方法

1. 传统的小程序开发
  a. 调用wx.login方法成功后获取到code
  b. 使用wx.request发起网络请求将code传递给后端服务器
  c. 后端会使用code换取到openid和session_key后再返回给前端
2. 小程序云开发
创建微信小程序云开发项目后，云函数中会自带一个login云函数，该云函数中已经有获取用户openid的方法，调用该云函数后会返回当前小程序的appid和openid

block 与 view 的区别

`<view>`：是一个标签，它会在页面显示出来。
`<block>`：是一个包装块，也就是代码块，里面可以包装一个专门的代码模块或者模板，但是它不会被显示到页面上，只会将包装的内容显示到页面上。

navigator标签

用于页面跳转，可以是tabBar之间的页面跳转，也可以是其他地方的页面跳转。
在tabBar之间的页面跳转，必须在标签内 加上定义open-type="switchTab" , 才能生效。

wx.showShareMenu()

显示当前页面的转发按钮
参数：
withShareTicket：是否使用带 shareTicket 的转发
success：接口调用成功的回调函数

wx.showLoading()

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
参数：
title：提示的内容
mask：是否显示透明蒙层，防止触摸穿透
success：接口调用成功的回调函数

wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用
`this.createSelectorQuery()` 来代替。
例：
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

setData()

Page.prototype.setData(Object data, Function callback)
（按照我的理解，就是设置data里面的值）
setData函数用于将数据从逻辑层发送到视图层（异步）,同时改变对应的 `this.data` 的值（同步）。
## 注意事项
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的value设为undefined，否则这一项将不被设置并可能遗留一些潜在问题。

wx.scanCode(Object object)

调起客户端扫码界面进行扫码
參數：
scanType：扫码类型(barCode：一维码；qrCode：二维码；datamatrix：Data Matrix 码；pdf417：PDF417 条码)
onlyFromCamera：是否只能从相机扫码，不允许从相册选择图片
success：接口调用成功的回调函数

WXS 模块

WXS 代码可以编写在 wxml 文件中的 `<wxs>` 标签内，或以 `.wxs` 为后缀名的文件内。
每一个 `.wxs` 文件和 `<wxs>` 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 `module.exports` 实现。
**在wxs文件中require引入.wxs文件,要以相对路径的方式引入**
**在wxml文件中引入.wxs文件,src要以相对路径的方式引入**
`<wxs>` 模块只能在定义模块的 WXML 文件中被访问到。使用 `<include>` 或 `<import>` 时，
`<wxs>` 模块不会被引入到对应的 WXML 文件中。
`<template>` 标签中，只能使用定义该 `<template>` 的 WXML 文件中定义的 `<wxs>` 模块。

事件

事件分为冒泡事件和非冒泡事件：
1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
冒泡事件有：
touchstart：手指触摸动作开始
touchmove：手指触摸后移动
touchcancel：手指触摸动作被打断，如来电提醒，弹窗
touchend：手指触摸动作结束
tap：手指触摸后马上离开
longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap：手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）	
transitionend：会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart：会在一个 WXSS animation 动画开始时触发
animationiteration：会在一个 WXSS animation 一次迭代结束时触发
animationend：会在一个 WXSS animation 动画完成时触发
touchforcechange：在支持 3D Touch 的 iPhone 设备，重按时会触发
非冒泡事件有：
form 的submit事件
input 的input事件
scroll-view 的scroll事件

路由跳转

wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 
获取当前的页面栈，决定需要返回几层。
EventChannel：页面间事件通信通道
EventChannel.emit(string eventName, any args)触发一个事件
EventChannel.on(string eventName, EventCallback fn)持续监听一个事件
EventChannel.once(string eventName, EventCallback fn)监听一个事件一次，触发后失效
EventChannel.off(string eventName, EventCallback fn)取消监听一个事件。给出第二个参数时，
只取消给出的监听函数，否则取消所有监听函数

TabBar

navigationBarBackgroundColor：导航栏背景颜色
navigationBarTextStyle：导航栏标题颜色，仅支持 black / white
navigationBarTitleText：导航栏标题文字内容
navigationStyle：导航栏样式，仅支持以下值：default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor：窗口的背景色
backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh：是否开启当前页面下拉刷新。
onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位为px。
disableScroll：设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
list：tab的列表，最少2个，最多5个，详细定义如下：
a、pagePath：页面路径，必须在pages中先定义
b、text：tab上按钮文字
c、iconPath：图片路径，大小限制为40Kb,建议尺寸81*81
d、selectedIconPath：选中的图片路径，大小尺寸如上

全局配置（app.json）

entryPagePath：小程序默认启动首页
pages：页面路径列表
tabBar：底部 tab 栏的表现
networkTimeout：网络超时时间
debug：是否开启 debug 模式，默认关闭
functionalPages：是否启用插件功能页，默认关闭
requiredPrivateInfos：调用的地理位置相关隐私接口	
usingComponents：全局自定义组件配置
permission：小程序接口权限相关设置
entranceDeclare：微信消息用小程序打开