小程序相关知识点
小程序项目结构
1.pages 用来存放所有的小程序页面
2.utils 用来存放工具性质的模块
3.app.js 小程序项目的入口文件
4.app.json 小程序项目的全局配置文件
5.app.wxss 小程序项目的全局样式文件
6.project.config.json 项目配置文件
7.sitemap.json 用来配置小程序及其页面是否允许被微信索引（下拉是否可以被微信搜索到
小程序应用生命周期和页面生命周期组件生命周期
应用生命周期App()
onLaunch() // 小程序初始化完成时触发----全局只触发一次
onShow() //小程序显示时触发
onHide() //小程序从前台进入后台时触发
页面生命周期Page()
onLoad() //监听页面加载 ----一个页面调用一次
onShow() //监听页面显示
onReady() //监听页面渲染完成时触发-----一个页面调用一次
onHide() //监听页面隐藏
onUnload() //监听页面卸载 -----一个页面调用一次
组件生命周期Component()
微信授权登录和微信支付流程
微信登录流程
1.用户点击登录触发登录流程
2.调用微信登录接口，小程序通过微信提供的wx.login接口，可以获取用户登录凭证code
3.将用户登录凭证code传给后端，微信服务器会对登录凭证进行校验，校验成功后会返回用户唯一标识(openId)和会话密钥(session_key)
4.将openId通过wx.setStorageSync()保存在本地存储。
5.用户下次进入⻚面时，会先通过wx.getStorageSync() 方法判断openId是否有值，如果有值，则可以请求其它数据，如果没有值，则进行登录操作。
微信支付流程
1.前端调用uni.login/wx.login调用微信接口，获取用户登录凭证code
2.用户登录凭证校验成功，后端返回openId
3.前端调公司后台预支付接口，传递openId、商品id、商品单价、商品数量，获取那5个参数。【时间戳timeStamp，随机字符串nonceStr，预支付id package，签名算法signType，签名paySign】
4.前端调用uni/wx.requestPayment调用微信支付方法，传递5个参数，获取支付结果（成功或失败）
组件之间的传参
1.使用本地存储传递数据
传递组件
wx.setStorageSync('data', {id:1})
接收组件
wx.getStorageSync('data')
2.使用路由传递参数
传递组件
wx.navigateTo({
url: `跳转路由?data=${data}`,
})
接收组件
onLoad(option){
const {data}=option
console.log(data)
}
当传递的参数是一个对象的时候，到另一个页面获取时会发现是"[object,object]"，解决方法是利用JSON.stringify()和JSON.parse()
传递组件
let obj={}
const data=Json.stringify(obj)
wx.navigateTo({
url: `跳转路由?data=${data}`,
})
接收组件
onLoad(options){
const data = JSON.parse(JSON.stringify(options.data));
}
跳转传参(声明式导航，编程式导航)
声明式导航
<navigator url="/pages/info/info?name=啊宝&age=23"
open-type="navigate">导航到信息</navigator>
接收参数
Page({
//页面初始化数据
data:{
//导航传过来的参数对象
query:{}
},
//监听页面加载
onLoad(options) {
console.log(options)
this.setData({
query:options
})
}
})
编程式导航传参
gotoMessageNoTab(){
wx.navigateTo({
url: '/pages/info/info?name=三大爷&age=50',
})
}
//监听页面加载
onLoad(options) {
console.log(options)
this.setData({
query:options
})
}
})
