微信小程序笔记
作者：孙志豪
微信小程序常用的qpi
wx.login 调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。
wx.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
wx.getUserProfile() 获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo
wx.getUserInfo 获取用户的信息
微信小程序的页面生命周期
· onLoad()：页面加载时触发
· onShow()：页面显示/切入前台时触发
· onReady()：页面初次渲染完成时触发
· onHide()：页面隐藏/切入后台时触发
· onUnload()：页面卸载时触发
· onPullDownRefresh()：下拉刷新的钩子函数
· onReachBottom()：上翻到底的钩子函数
微信小程序的组件生命周期
· created()：组件实例刚刚被创建好时触发。
· attached()：在组件完全初始化完毕、进入页面节点树后触发。
· detached() 组件离开页面节点树后触发。
微信小程序的跳转方式导航
wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面reLaunch重新发动
// 使用方式 开头这个 绝对路径 / 代表根
1.相对路径
相对路径：相对于项目目录的路径，在开发中引用js、css、或者图片等，都是使用相对路径。
例：..\img\g\jpg
2.绝对路径
绝对路径：从根目录开始，是一个完整的路径。
例：D:\demo\img\g.jpg
// 找到app.json 文件夹 配置页面路径才可以跳转 ， 创建页面在pages写入路径保存即可 pages 就多了个文件夹
"pages": [
"pages/index/index",
"pages/search/search",
],
// 跳转方式 传参数穿了两个参数 用&符号两个参数
wx.navigateTo({
url:`/pages/readText/readText?id=${
id}§ionId=${
this.data.sectionID}` // 绝对路经 推荐
})
// 标签法 也可以使用相对路径
<navigator url="../bookDetail/bookDetail">dawadw</navigator>
链接：https://blog.csdn.net/qq_54753561/article/details/121878427
微信小程序的 tabBar
// 肯定会报错 没有图片 和路径 tabBar 最多5个最少两个
"tabBar": {
"selectedColor": "#ff3f4c",
"borderStyle": "black",
"position": "bottom",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "img/tabBarImg/shouye_1.png",
"selectedIconPath": "img/activeTabbar/shouye_1.png"
},
{
"text": "朋友圈",
"pagePath": "pages/index/index",
"iconPath": "img/tabBarImg/quanziguanli.png",
"selectedIconPath": "img/activeTabbar/quanziguanli.png"
},
{
"text": "更多",
"pagePath": "pages/index/index",
"iconPath": "img/tabBarImg/gengduo.png",
"selectedIconPath": "img/activeTabbar/gengduo.png"
},
]
},
微信小程序的事件传值
// 在循环的标签上面加入 传入没一项data-item="{
{item}}" 要用 {
{}} 包裹因为他是变量 传入下标 data-index="{
{index}}"
// bindtap 小程序的事件点击
<view data-index="{
{index}}" data-item="{
{item}}" bindtap="toReadText" wx:key="index" wx:for="{
{dataList.list}}">
{
{
item.name}}
</view>
// 通过事件对象 可以拿到穿过来的值
toReadText(e:any){
console.log(e.currentTarget.dataset.item.id);
},
微信小程序的组件
// 新建一个 components 文件夹专门用来放组件 在面面在建一个文件夹 选中文件夹然后右键 新建Component
// 里面的有个 json 文件 component 为true
{
"component": true,
"usingComponents": {
}
}
// 在页面用找到 json 文件 usingComponents 写入路径 页面写入组件即可就可以使用了
{
"usingComponents": {
"novelList":"../../compotent/novelList/novelList",
"bookList":"/compotent/bookList/bookList",
}
}
// 全局组件 也可以 找到app.json 文件 在里面写入 就是全局组件了
微信小程序的组件通信
// 页面传子组件 在组件上面写入属性 变量 bookData {
{}}给括起来 字符串不许要括起来
<novelList bookData="{
{bookData}}"></novelList>
// 子组件里面找到在 properties 写入接收的数据
properties: {
bookData:{
type:Array, // 类型
},
imgFlag:{
type:Boolean, // 类型
value:false // 默认值
}
},
// 子组件传父组件 在页面中的子组件标签上写自定义事件 事件的名字 ageTabs
// 页面
<novelHeader bind:ageTabs="ageTabs"></novelHeader>
// 子组件事件触发相当于vue 的emit ageTabs 事件名字
ageTAabSwidch(){
this.triggerEvent('ageTabs','我是数据')
},
微信小程序插槽的使用
链接：https://blog.csdn.net/qq_54753561/article/details/121796270
微信小程序的循环
// wx:for-item="item1" 指定下一次的每一项 默认是 item 是每一项
// wx:for="{
{Floordata}}" wx的for 循环 Floordata 数据一定要用 {
{}}} 包裹
// wx:key="index" 这个不用加上 {
{}}
<view wx:key="index" wx:for="{
{Floordata}}" wx:for-item="item1">
<image src="{
{item1.name}}"></image>
<view wx:key="index" wx:for="{
{item1.name}}" wx:for-item="item2">
<image src="{
{item2.name}}"></image>
</view>
</view>
微信小程序的修改数据
小程序通过赋值 更该数据的话是无法 同步视图的，必须通过 this.setData({
}) 来修改
// pages/search/search.ts
import {
Search,SearchHotVal,getSearchValue} from '../../api/api'
Page({
/**
* 页面的初始数据
*/
data: {
searchHistory:<any>[],
},
// 搜索的事件
onSearch(e:any){
// 解构
let {
query,booksData,searchHistory,hintIsShow} = this.data
// 增加数据
searchHistory.unshift({
id:new Date().getTime(),
val:e.detail.value
})
// 修改
this.setData({
query:e.detail.value,
searchHistory,
hintIsShow:false
})
}
onLoad() {
// 页面加载村本地存储重新赋值 取得时候一定要是一个空数组
this.setData({
searchHistory:wx.getStorageSync('searchValue') || <any>[]
})
},
})
微信小程序混入
// 新建一个 mixins文件 在页面的Page中导入我们的 mixins 文件
import mixins from './mixins'
Page({
behaviors:[mixins],
/*behaviors
behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。*/
})
mixins 文件夹写入
export default Behavior({
data:{
// 存放数据的地方
},
methods:{
// 请求方法的接口 要写到 methods 中
readText(sectionIdParams:number,idParams:number) {
let {
dataText,sectionId,id} = this.data // 可以拿到主文件的data
},
}
})
官方地址为准：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
微信小程序的登录流程
1.用 wx.login API 先获取一个临时凭证 拿到他的 conde
2.用这个 code + addId + 凭证码
获取三个id：
openid
每个用户的固定id
session_key 临时的会话存储凭证
3. wx.getSetting 使用 getUserInfo 获取用户的信息
4. 用户信息获取第三方接口的 token
<button bindtap="bindGetUserInfo">
授权登录
</button>
//1. 先获取一个临时凭证 conde
wx.login({
success:((data:any) =>{
console.log(data.code);
/*
2. 用这个code + addId + 凭证码
获取三个id：
openid每个用户的固定id
session_key 临时的会话存储屏障
*/
wx.request({
url:`https://api.weixin.qq.com/sns/jscode2session?appid=${
'wx335092cd7d3d5913'}&secret=6f72afe90a97bc949268fa6292d0f2&js_code=${
data.code}&grant_type=authorization_code`,
success:(res) =>{
console.log(res.data);
// 把数据存到本地
wx.setStorageSync('UID',res.data)
// 3. 使用 getUserInfo 获取用户的信息
// 获取用户是否授权
wx.getSetting({
success(res){
console.log(res);
if(res.authSetting['scope.userInfo']){
// 已经授权 可以直接调用 getUserInfo 获取用户的信息 头像..
wx.getUserInfo({
success(res){
console.log(res);
}
})
/*
新的 api
wx.getUserProfile()
*/
}
}
})
}
})
})
})
后面还有好多笔记，待更新…