微信小程序快速掌握

常见问题

1、rpx:小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率的屏幕
2、本地资源无法通过wxss获取
RE：background-image：可以使用网络图片，或者base64，或者使用标签
3、wx.navigateTo无法打开页面
RE：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
4、tabBar设置不显示
RE：①tabBar的数量少于2项或超过5项都不会显示
②tabBar写法错误导致不显示
③tabBar没有写pagePath字段（程序启动后显示的第一个页面）

微信小程序主要目录和文件的作用

project.config.json 项目配置文件，用得最多的就是配置是否开启https校验
App.js 设置一些全局的基础数据等
App.json 底部tab, 标题栏和路由等设置
App.wxss 公共样式，引入iconfont等
pages 里面包含一个个具体的页面
index.json (配置当前页面标题和引入组件等)
index.wxml (页面结构)
index.wxss (页面样式表)
index.js (页面的逻辑，请求和数据处理等)

wxml与标准的html的异同

都是用来描述页面的结构
都由标签、属性等构成
标签名字不一样，且小程序标签更少，单一标签更多
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同， WXML对组件进行了重新封装
小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象

WXSS和CSS的异同

都是用来描述页面的样子；
WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
WXSS 仅支持部分 CSS 选择器；
WXSS 提供全局样式与局部样式

封装微信小程序的数据请求

在根目录下创建utils目录及api.js文件和apiConfig.js文件
在apiConfig.js 封装基础的get, post 等请求方法，设置请求体，带上token和异常处理等
在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出
在具体的页面中导入

小程序页面间传递数据的方法

使用全局变量实现数据传递
页面跳转或重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递数据

小程序的双向绑定和vue的异同

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法

小程序的生命周期函数

onLoad() 页面加载
onShow() 页面显示
onready() 页面初次渲染完成
onHide() 页面隐藏
onUnload() 页面卸载

微信小程序原理

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发
功能可分为webview和appService两个部分
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等

bindtap和catchtap的区别

bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡

this.setData动态修改key

data: {
demo:2,
params: [
{cut: true},
{cut: true}
]
}
// 这次我们想要修改isDemo里面的特定下标的值，并且这个值是动态的，我们该怎么写：
// 直接假设一个wx:for循环的情况吧

view  wx:for='{{params}}' wx:for-index="bindex"  view class='main-head' data-bindex='{{bindex}}' bindtap='onHidden'
text{{item.cut}}
// 上面这个wxml里面，首先，我们通过wx:for-index进行key键的绑定，然后再需要绑定的view里面进行赋值data-bindex='{{bindex}}'，这样我们就可以在js里面通过e.currentTarget.dataset.bindex，得到你渲染出来后选中点击view的下标。

// 这是你继续进行this.setData会得到一个报错Only number 0-9 could inside []:解决方法：
let index = e.currentTarget.dataset.bindex;
//重点在这里，组合出一个字符串
let arrCut = 'params[' + index + '].cut'
//用中括号把str括起来即可
this.setData({
[arrCut]: false
})

小程序关联微信公众号如何确定用户的唯一性

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。