一、项目搭建
- 选择腾讯云node模板,填写appID
- 创建四个页面,分别是首页,购物车,订单和个人中心,创建tabbar进行跳转
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-sel.png"
},
{
"pagePath": "pages/order/order",
"text": "订单",
"iconPath": "images/order.png",
"selectedIconPath": "images/order-sel.png"
},
{
"pagePath": "pages/trolley/trolley",
"text": "购物车",
"iconPath": "images/trolley.png",
"selectedIconPath": "images/trolley-sel.png"
},
{
"pagePath": "pages/user/user",
"text": "个人中心",
"iconPath": "images/user.png",
"selectedIconPath": "images/user-sel.png"
}
]
},
- wx.showLoading,wx.hideLoading,wx.showToast, wx.navigateBack()回到上一个页面
- 如果想在其他地方使用tabBar,需要注意官方文档中的Tips:通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。应该使用wx.switchTab跳转到tabBar页面,注意:这个方法会关闭其他所有非tabBar页面。
- 用户登录,基于微信做第三方登陆认证
小程序登录时序图(小程序开发者文档)
基于微信的登录认证
首先,当用户授权登录小程序后,我们将在小程序中调用 wx.login() 。由于小程序运行在微信之中,该方法会直接向微信请求一个登录凭证。
接着,小程序客户端将凭证发送到服务器。
接收到登录凭证后,服务端向微信服务端发起一个请求,使用从客户端获得的登录凭证换取微信用户的 唯一标识(openid) 和 会话密钥(session_key) 。
出于安全性的考虑,我们应当将获得的 openid 与 session_key 保存在服务端,然后生成一个与之关联的 3rd_session,并返回给小程序客户端。
客户端收到并保存 3rdsession_id 。
此后,客户端在需要访问私有资源的请求中(比如:查看自己的订单,提交订单等),都加上这个 ID 。服务端通过 3rd_session 验明用户身份,并查找到关联的 openid 和 session_key。
- 逻辑流程
是否有有个人信息授权 -》 是否首次登陆(可能是查cookie) -》 微信第三方认证
doQcloudLogin({ success, error }) {
// 调用 qcloud 登陆接口
qcloud.login({
success: result => {
if (result) {
let userInfo = result
success && success({
userInfo
})
} else {
// 如果不是首次登录,不会返回用户信息,请求用户信息接口获取
this.getUserInfo({ success, error })
}
},
fail: () => {
error && error()
}
})
},
- bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
网友评论