微信小程序
1、简单描述下微信小程序的相关文件类型？
主要有四个文件类型,如下
.wxml(WeiXin Markup Language)模板文件
是微信设计的一套标签语言，结合基础组件、事件系统，构建页面结构，HTML标签无法使用，
.wxss (WeiXin Style Sheets)样式文件
是一套样式语言，用于描述 WXML 的组件样式，支持CSS大部分特性，不支持a链接的link visited hover active 表单元素的选中或禁用状态
.json 配置文件
小程序设置，如页面注册，页面标题及tabBar。
.js 脚本逻辑文件
逻辑处理，网络请求app.json
必须要有这个文件，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。
包括小程序的所有页面路径、网络超时时间、窗口表现、底部 tab，以及小程序的window背景色，配置导航条样式，配置默认标题。2、请谈谈wxml与标准的html的异同？
①都是描述页面的结构；都由标签、属性构成；
②标签名字不一样，wxml是微信设计的一套标签语言，有很多内置组件；
③多了 wx:if wx:for 这样的属性以及 {{ }} 这样的表达式
④WXML只能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
⑤WXML对组件进行了重新封装，
⑥没有window对象和DOM树，小程序中无法使用window document对象。
3、请谈谈WXSS和CSS的异同？
都是描述页面的样子；
WXSS 具有 CSS 大部分的特性，支持大部分 CSS 选择器，没有a标签的伪类选择器、没有checked disabled enabled伪类选择器。
WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
WXSS提供全局样式与局部样式4、怎么封装微信小程序的数据请求的？
①在根目录下创建utils目录再创建api.js文件；
在api文件新建get post方法，把请求URL、openid、参数、成功后处理函数、异常处理函数当作参数给get或post方法传参，新建get或post请求代码
module.exports 导出方法，在具体的页面中require导入相对路径代码，ES5-module.exports/require
ES6语法-export/import
5、小程序页面间有哪些传递数据的方法？
①使用全局变量实现数据传递 app.js定义globalData对应的全局变量 使用页面const app = getApp();app.globalData. 如果获取的是引用数据类型，获取的只是引用，不要改变里面的值。建议深拷贝对象
②页面跳转或重定向时，使用url带参数传递数据
wx.navigateTo({
url: 'some/some?id=' + event.target.id,
})
onLoad: function (options) {
console.log(options)
},
④使用缓存传递参数
wx.setStorage({
key: 'userInfo',
data: res.userInfo
});
③使用组件模板 template传递参数
6、小程序的双向绑定和vue的异同？
大体相同，小程序调用this.setData()方法同步到视图的
扩展--语法异同,
①vue属性值不需要大括号，微信小程序属性值需要大括号；vue指令使用 “-”，微信小程序使用 “:”
②v-if、v-else-if、v-else == wx:if、wx:elif、wx:else
③v-for="(itemNameAnyway, key, index) in arr" v-bind:key="item.id"//:key="item.id"
wx:for="{{items}}" wx:key="itemName" wx:for-index="idx" wx:for-item="itemName"
wx:key值在for循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名
④事件绑定
v-bind、@
bindtap、catchtap...
7、小程序的生命周期函数？
onLoad() 页面加载时触发，只会调用一次，获取当前页面路径中的参数。
onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。
9、使用哪些方法提高微信小程序的应用速度
①减少data大小，与界面渲染无关的数据不要设置在data中
不要频繁调用setData，考虑将多次setData合并成一次setData调用
减少https请求，使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
②组件化方案
减少资源包中的图片和资源，除tabbar图片、图标字体文件以外图片资源从网络下载，
使用分包加载，用户访问率高的页面放在主包里，访问率低的页面放入子包里，按需加载
勾选微信开发者工具中“上传代码时，压缩代码”选项详情链接
8、微信小程序原理？
①本质是一个单页应用，所有的页面渲染和事件处理都在一个页面内进行，同时可以通过微信客户端调用原生的各种接口；
②数据驱动的架构模式，UI和数据是分离的，页面更新需要更改数据来实现；
③从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
(HTML结构层、CSS表示层、JS行为层。)
④功能可分为webview和appService两个部分；webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
10、小程序与原生App哪个好？
无需下载，微信搜索和扫一扫就可以打开
小程序低开发成本，要比App要低
安卓手机添加快捷方式到桌面，与原生App差不多
小程序大小不能超过2M，分包不能超多8M，不能打开超过5个层级的页面。
样式单一。小程序的部分组件已经是成型的了，样式不可以修改。11、微信小程序与H5的区别？
①运行环境的不同--
HTML5运行环境是浏览器；
微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，配合自己定义的开发语言标准，
②开发成本的不同--只在微信中运行，所以不用再去顾虑浏览器兼容性
③获取系统级权限的不同--系统级权限都可以和微信小程序无缝衔接微信小程序
微信小程序支付API
wx.requestPayment({
'timeStamp': '', // 时间戳
'nonceStr': '', // 随机字符串
'package': '', // 数据包
'signType': 'MD5', // 签名类型，默认为MD5，
'paySign': '', // “签名算法”说明
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
})paySign = MD5(appId=wxd678efh5g6787&
nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&
package=prepay_id=wx2017033010242291fcfe0db70013231072&
signType=MD5&
timeStamp=1490840662&
key=qazwsxedcrfvtgbyhnujmikolp111111) = 22D9B4E54AB1950F51E0649E8810ACD6
微信小程序-扫码
wx.scanCode
微信小程序-从本地相册选择图片或使用相机拍照
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})微信小程序-上传
wx.chooseImage({
success(res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
user: 'test'
},
success(res) {
const data = res.data
// do something
}
})
}
})微信公众号
1、引导用户进入授权页面同意授权，获取code
2、通过code换取网页授权openid access_token（与基础支持中的access_token不同）
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和openid获取用户基本信息JS-SDK使用步骤
①绑定域名
②引入JS文件
[js1-支持https][9]
[js2-支持https][10]
③通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});调起微信扫一扫接口
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});发起一个微信支付请求
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});微信支付开发文档
拍照或从手机相册中选图
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});预览图片接口
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
});上传图片接口
wx.uploadImage({
localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});使用微信内置地图查看位置接口
wx.openLocation({
latitude: 0, // 纬度，浮点数，范围为90 ~ -90
longitude: 0, // 经度，浮点数，范围为180 ~ -180。
name: '', // 位置名
address: '', // 地址详情说明
scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});获取地理位置接口
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.ready(function () {
//需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
});判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});