wx.request 发起网络请求 wx.uploadFile 上传文件 wx.downloadFile 下载文件 wx.connectSocket 创建 WebSocket 连接 wx.onSocketOpen 监听 WebSocket 打开 wx.onSocketError 监听 WebSocket 错误 wx.sendSocketMessage 发送 WebSocket 消息 wx.onSocketMessage 接受 WebSocket 消息 wx.closeSocket 关闭 WebSocket 连接 wx.onSocketClose 监听 WebSocket 关闭
wx.chooseImage 从相册选择图片，或者拍照 wx.previewImage 预览图片 wx.startRecord 开始录音 wx.stopRecord 结束录音 wx.playVoice 播放语音 wx.pauseVoice 暂停播放语音 wx.stopVoice 结束播放语音 wx.getBackgroundAudioPlayerState 获取音乐播放状态 wx.playBackgroundAudio 播放音乐 wx.pauseBackgroundAudio 暂停播放音乐 wx.seekBackgroundAudio 控制音乐播放进度 wx.stopBackgroundAudio 停止播放音乐 wx.onBackgroundAudioPlay 监听音乐开始播放 wx.onBackgroundAudioPause 监听音乐暂停 wx.onBackgroundAudioStop 监听音乐结束 wx.chooseVideo 从相册选择视频，或者拍摄
wx.saveFile 保存文件 wx.getSavedFileList 获取已保存的文件列表 wx.getSavedFileInfo 获取已保存的文件信息 wx.removeSavedFile 删除已保存的文件信息 wx.openDocument 打开文件
wx.getStorage 获取本地数据缓存 wx.getStorageSync 获取本地数据缓存 wx.setStorage 设置本地数据缓存 wx.setStorageSync 设置本地数据缓存 wx.getStorageInfo 获取本地缓存的相关信息 wx.getStorageInfoSync 获取本地缓存的相关信息 wx.removeStorage 删除本地缓存内容 wx.removeStorageSync 删除本地缓存内容 wx.clearStorage 清理本地数据缓存 wx.clearStorageSync 清理本地数据缓存
wx.getLocation 获取当前位置 wx.chooseLocation 打开地图选择位置 wx.openLocation 打开内置地图 wx.createMapContext 地图组件控制
wx.getNetworkType 获取网络类型 wx.onNetworkStatusChange 监听网络状态变化 wx.getSystemInfo 获取系统信息 wx.getSystemInfoSync 获取系统信息 wx.onAccelerometerChange 监听加速度数据 wx.startAccelerometer 开始监听加速度数据 wx.stopAccelerometer 停止监听加速度数据 wx.onCompassChange 监听罗盘数据 wx.startCompass 开始监听罗盘数据 wx.stopCompass 停止监听罗盘数据 wx.setClipboardData 设置剪贴板内容 wx.getClipboardData 获取剪贴板内容 wx.makePhoneCall 拨打电话 wx.scanCode 扫码
wx.showToast 显示提示框 wx.showLoading 显示加载提示框 wx.hideToast 隐藏提示框 wx.hideLoading 隐藏提示框 wx.showModal 显示模态弹窗 wx.showActionSheet 显示菜单列表 wx.setNavigationBarTitle 设置当前页面标题 wx.showNavigationBarLoading 显示导航条加载动画 wx.hideNavigationBarLoading 隐藏导航条加载动画 wx.navigateTo 新窗口打开页面 wx.redirectTo 原窗口打开页面 wx.switchTab 切换到 tabbar 页面 wx.navigateBack 退回上一个页面 wx.createAnimation 动画 wx.createContext 创建绘图上下文 wx.drawCanvas 绘图 wx.stopPullDownRefresh 停止下拉刷新动画
wx.createSelectorQuery 创建查询请求 selectorQuery.select 根据选择器选择单个节点 selectorQuery.selectAll 根据选择器选择全部节点 selectorQuery.selectViewport 选择显示区域 nodesRef.boundingClientRect 获取布局位置和尺寸 nodesRef.scrollOffset 获取滚动位置 nodesRef.fields 获取任意字段 selectorQuery.exec 执行查询请求
wx.login 登录 wx.getUserInfo 获取用户信息 wx.chooseAddress 获取用户收货地址 wx.requestPayment 发起微信支付 wx.addCard 添加卡券 wx.openCard 打开卡券
1. .wxml
---是框架设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构，内部主要是微信自己定义的一套组件。
2. .wxss
---是一套样式语言，用于描述wxml的组件样式
3. .js
---是逻辑处理，网络请求
4. .json
--- 而文件会报错小恒旭设置，如页面注册，页面标题及tabBar
5. app.json
---必须要有这个文件，因为微信框架把这个文件作为配置文件入口，整个小程序的全局配置，包括页面注册，网络配置，以及小程序的window背景色，配置导航条样式，配置默认标题。
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的
tab字段—小程序全局顶部或底部tab
6. app.js---可以在这个文件中监听并处理小程序的生命周期函数，声明全局变量
1.将所有的接口放在统一的js文件中并导出 2.在app.js中创建封装请求数据的方法 3.在子页面中调用封装的方法请求数据 1.在根目录下创建utils目录及api.js文件和apiConfig.js文件； 2.在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等； 3.在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出； 4.在具体的页面中导入；
1.给html元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或者是onload的param参数获取，但data-名称 不能有大写字母和不可存放对象 2.设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式传递数值 3.在navigator中添加参数传值
1.提高页面加载速度 2.用户行为预测 3.减少默认data的大小 4.组件化方案
小程序除了拥有公众号的地开发成本，无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使其能够承载跟复杂的服务功能以及用户获得更好的体验。
小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口； 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现； 它从技术讲和现有的前端开发差不多，采用Javascript、WXML、WXSS三种技术进行开发； 功能可分为webview和appService两个部分； webview用来展现UI，appService有来处理业务逻辑、数据及接口调用； 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
优势： 1.无需下载，通过搜索或者扫一扫就可以打开；2.良好的用户体验，打开速度快 3.开发成本比app低；4.安卓上可以添加到桌面，与原生app差不多；5.为用户提供良好的安全保障 劣势： 1.限制较多，页面大小不能超过1M,不能打开超过五个层级的页面； 2.样式单一；3.推广面窄，不能分享到朋友圈，只能分享给朋友； 4.依托于微信，无法开发后台管理功能
1.运行环境的不同---h5的运行环境是浏览器，而微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准 2.开发成本的不同---微信小程序只在微信中运行，所以不用去顾虑浏览器兼容性问题 3.获取系统权限的不同---系统级权限都可以和微信小程序无缝衔接 4.生产环境的运行流畅度
app.js:
success:function(info){
that.apirtnCallback(info)
}
index.js:
onLoad:function(){
app.apirtnCallback=res=>{
console.log(res)
}
}
小程序支持大部分 ES6 语法
在返回成功的回调里面处理逻辑
Promise 异步
小程序必须用this.setData({msg:'111'})方法来将数据同步到视图
都是用来描述页面的样子； WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改； WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx； WXSS 仅支持部分 CSS 选择器； WXSS 提供全局样式与局部样式1.wxss的图片引入需要使用外链地址；2.没有body,样式可直接使用import导入
使用ax.getUserInfo方法的withCredential为true时，可获取encryptedData,里面有union_id, 如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的
用view代替scroll-view，设置onPullDownRefresh函数实现
1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启； 2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢
1.循环遍历的时候：小程序是wx:for="list",而Vue是v-for="info in list"
2.调用data模型的时候：小程序是this.data.uinfo,而vue是this.unifo,给模型赋值也不一样，小程序是this.setData({unifo:1}),而Vue是直接this.unifo=1
1、微信小程序有代码大小限制，微信小程序最大为2M 2、提高代码的复用率
通过WXML的import和include来使用文件模版 使用WXSS的@import引用WXSS文件 使用JS的require来引用JS文件
wx:if是遇到true的时候显示，hidden是遇到false的时候显示 wx:if在隐藏的时候不渲染，而hidden在隐藏的时候仍然渲染，只是不显示 频繁切换的话，用wx:if将会消耗更多的资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。 如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
微信小程序新定义了一个尺寸单位，可以适配不同分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。
onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。 onShow() 页面显示/切入前台时触发，一般用来发送数据请求； onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。 onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。 onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。
一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo
background-image：可以使用网络图片，或者 base64，或者使用标签
相同点：首先他们都是作为点击事件，就是点击时触发 不同点：主要是bindtap不会阻止冒泡事件，而catchtap会阻止冒泡
wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层 wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。 而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。 而如果如果团队前端强大，自己做一套框架也没问题。
都是用来描述页面的结构；
都由标签、属性等构成；
标签名字不一样，且小程序标签更少，单一标签更多；
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同， WXML对组件进行了重新封装，
小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。
1.域名必须是HTTPS 2. input组件placeholder字体颜色 3. wx.navigateTo无法跳转到带tabbar的页面 4. tabbar在切换时页面数据无法刷新 5.如何去掉自定义button灰色的圆角边框 6.input textarea是APP的原生组件，z-index层级最高 7.一段文字如何换行 8.设置最外层标签的margin-bottom在IOS下不生效 9.小程序中canvas的图片不支持base64格式 10.回到页面顶部 11.wx.setStorageSync和wx.getStorageSync报错问题 12.如何获取微信群名称？ 13.new Date跨平台兼容性问题 14.wx.getSystemInfoSync获取windowHeight不准确 15.图片本地资源名称，尽量使用小写命名
let optiOns=wx.getLanchOptionsSync()
由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。
使用setData(data, callback)，在callback回调方法中添加后续操作代码
像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作。
1.判断用户是否登陆过，如果已经登陆过，则直接获取个人信息进入主页
2.未登录则引导登录，直接跳转到登录页面，封装方法获取code值，调用wx.login()方法,获取到用户信息登陆成功就跳转到个人主页
//获取code
wx.login({
success:function(result){
console.log(result)
wx.request({
url:'/login',
data:{
code:result.code
},
success:function(myres){
if(myres.state==='登录成功'){
wx.setStorageSync('isLogin',true)
wx.navigateBack()
}else{
wx.showToast({
title:''
})
}
}
})
}
})
1.小程序调用登录接口获取code，传递给商户服务器用来获取用户的openId
小程序调用wx.login()获取临时凭证code,并回转到开发者服务器，开发者服务器以code换取用户唯一表示openid和会话密钥session_key
getToken:function(){
wx.login({
success:function(res){
var code=res.code
wx.request({
url:商户服务器接口地址，
data:{
code:code
},
method:'POST',
success:function(res){
wx.setStorageSync('token',res.data)
},
fail:function(res){
conso.sole.log(res.data)
}
})
}
})
}
2.token的生成以及缓存
3.调用统一下单接口，获取prepay_id再次签名
4.小程序获取五个参数后，鉴权调起支付
1).下载微信JS-SDK：2).调用统一下单api3).再次签名
5.支付回调,实际上我们需要重写WxPayNotify类的Not本文主要讲解了微信小程序,网络API,媒体API,文件API,微信小程序支付流程,位置API,界面API,微信小程序登录流程等，更多关于微信小程序相关知识请查看下面的相关链接
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有