微信小程序学习日记6-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序学习日记6。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.WXML冒泡事件列表
解析：
[1]touchstart：手指触摸动作开始
[2]touchmove：手指触摸后移动
[3]touchcancel：手指触摸动作被打断，如来电提醒，弹窗
[4]touchend：手指触摸动作结束
[5]tap：手指触摸后马上离开
[6]longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
[7]longtap：手指触摸后，超过350ms再离开[推荐使用longpress事件代替]
[8]transitionend：会在WXSS transition或wx.createAnimation动画结束后触发
[9]animationstart：会在一个WXSS animation动画开始时触发
[10]animationiteration：会在一个WXSS animation一次迭代结束时触发
[11]animationend：会在一个WXSS animation动画完成时触发
[12]touchforcechange：在支持3D Touch的iPhone设备，重按时会触发

2.生命周期相关函数
解析：
[1]生命周期函数–监听页面初次渲染完成：onReady
[2]生命周期函数–监听页面显示：onShow
[3]生命周期函数–监听页面隐藏：onHide
[4]页面相关事件处理函数–监听用户下拉动作：onPullDownRefresh
[5]页面上拉触底事件的处理函数：onReachBottom
[6]用户点击右上角分享：onShareAppMessage
[7]生命周期函数–监听页面卸载：onUnload

3.微信小程序消息推送服务
解析：
[1]开发者服务器接收消息推送
[2]云函数接收消息推送
[3]微信云托管服务接收消息推送

4.加密/校验流程
解析：
[1]将token、timestamp、nonce三个参数进行字典序排序
[2]将三个参数字符串拼接成一个字符串进行sha1加密
[3]开发者获得加密后的字符串可与signature对比，标识该请求来源于微信

5.微信小程序存储
解析：每个微信小程序都可以有自己的本地缓存，可以通过wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync对本地缓存进行读写和清理。

6.多线程Worker
解析：
[1]一些异步处理的任务，可以放置于Worker中运行，待运行结束后，再把结果返回到小程序主线程。Worker运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法。
[2]Worker与主线程之间的数据传输，双方使用Worker.postMessage()来发送数据，Worker.onMessage()来接收数据，传输的数据并不是直接共享，而是被复制的。

7.UnionID机制说明
解析：对同一个微信开放平台下的不同应用，UnionID是相同的。

8.UnionID获取途径
解析：
[1]开发者可以直接通过wx.login+code2Session获取到该用户UnionID，无须用户授权。
[2]小程序端调用云函数时，可在云函数中通过Cloud.getWXContext获取UnionID。
[3]用户在小程序中支付完成后，开发者可以直接通过getPaidUnionId接口获取该用户的UnionID，无需用户授权。
微信小程序学习日记6

9.页面Page实例的生命周期
解析：
微信小程序学习日记6

10.事件监听API
解析：这类API接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

11.异步API返回Promise
解析：wx.chooseImage().then(res => console.log('res: ', res))

12.获取手机号码
解析：

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

相关函数，如下所示：

getPhoneNumber: function (e) {
    var that = this;
    console.log(e.detail.errMsg == "getPhoneNumber:ok");
    if (e.detail.errMsg == "getPhoneNumber:ok") {
        wx.request({
            url: 'http://localhost/index/users/decodePhone',
            data: {
                encryptedData: e.detail.encryptedData,
                iv: e.detail.iv,
                sessionKey: that.data.session_key,
                uid: "",
            },
            method: "post",
            success: function (res) {
                console.log(res);
            }
        })
    }
}

13.wx.authorize()
解析：提前询问授权，之后需要获取相关信息的时候不用再次弹出授权。

14.jscode2session
解析：https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

15.微信openID和UnionID区别
解析：
[1]openid=28同一用户同一应用唯一，unionid=29同一用户不同应用唯一
[2]这里的不同应用是指在同一微信开发平台下的不同应用

16.wx.openSetting()
解析：开发者可以调用wx.openSetting打开设置界面，引导用户开启授权。

17.wx.authorize()
解析：开发者可以使用wx.authorize在调用需授权API之前，提前向用户发起授权请求。

18.getCurrentPages()
解析：开发者可以使用getCurrentPages()函数获取当前页面栈。

19.wx.checkSession()
解析：
[1]授权时先调用checkSession判断session_key是否失效，失效重新调用wx.login。
[2]先wx.login获取code，再拿code生成3rd_session，前端拿到3rd_session后存起来，每次进来先checkSession判断code是否过期，再判断3rd_session是否过期，任何一个过期都重新走一遍登录流程。
[3]调用wx.checkSession接口检测当前用户登录态是否有效。

20.setData()
解析：setData函数用于将数据从逻辑层发送到视图层[异步]，同时改变对应的this.data的值[同步]。
[1]setData这个方法只是给当前页面设置
[2]globalData全局变量
[3]setStorage/setStorageSyn是数据缓存，关闭再打开也是有的

21.bindgetphonenumber绑定事件回调参数
解析：
[1]errMsg：用户点击取消或授权的信息回调
[2]iv：加密算法的初始向量[如果用户没有同意授权则为undefined]
[3]encryptedData：用户信息的加密数据[如果用户没有同意授权同样返回undefined]

22.微信公众号通讯方式
解析：
[1]消息通讯：对话界面或应用服务器后台
[2]高级接口：应用服务器后台
[3]HTML5网页：JSAPI、JS-SDK

23.WebSocket原理
解析：
[1]WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议
[2]在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据相互传送
[3]浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据

24.unionid和openid问题
解析：如果先有公众号并且积累了大量粉丝，然后才有的小程序，然后想在小程序下也能识别公众号粉丝怎么办呢？
[1]首先将公众号和小程序关联到同一个开放平台账号
[2]通过API将公众号粉丝列表全部拉一遍，同时计算这些粉丝的unionid并保存起来
[3]用户进入小程序时计算unionid，然后根据之前保存的公众号粉丝unionid的数据映射过去就好了

25.Fiddler
解析：Fiddler是位于客户端和服务器端之间的代理，也是目前最常用的抓包工具之一。它能够记录客户端和服务器之间的所有请求，可以针对特定的请求，分析请求数据、设置断点、调试Web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是Web调试的利器。

参考文献：
[1]miniprogram-demo：https://github.com/wechat-miniprogram/miniprogram-demo
[2]weui-wxss：https://github.com/Tencent/weui-wxss
[3]wx.d.ts：https://github.com/hellopao/wx.d.ts
[4]页面路由：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
[5]微信官方文档：https://developers.weixin.qq.com/doc/
[6]微信小程序登录功能的前端设计与实现：https://blog.csdn.net/QcloudCommunity/article/details/109234093
[7]微信小程序开发接口之授权wx.authorize用法：https://www.cnblogs.com/96net/p/13061958.html
[8]Senparc.Weixin SDK微信公众号.NET开发教程：https://www.cnblogs.com/szw/archive/2013/05/14/weixin-course-index.html
[9]JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
[10]网站应用微信登录开发指南：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
[11]微信服务平台：https://fuwu.weixin.qq.com/
[12]微信支付：https://pay.weixin.qq.com/index.php/core/home/login
[13]Weex：http://doc.weex.io/zh/guide/introduction.html
[14]GoEasy IM聊天和即时通讯：https://ext.dcloud.net.cn/plugin?id=5177
[15]GoEasy 2开发者中心：https://www.goeasy.io/cn/developers/2.x.html
[16]Websocket聊天和IM即时通讯介绍：https://www.goeasy.io/cn/docs/goeasy-2.x/im/im.html
[17]DCloud插件市场：https://ext.dcloud.net.cn/
[18]Vue教程：https://learning.dcloud.io/#/?vid=0文章来源地址https://www.toymoban.com/news/detail-400177.html