复习微信小程序顺便记个笔记-CSDN博客

本文链接：https://blog.csdn.net/2401_85123349/article/details/139942295

    "pagePath": "pages/index/index",

    "iconPath": "img/tabBarImg/gengduo.png",

    "selectedIconPath": "img/activeTabbar/gengduo.png"

  },

]




### []( )微信小程序的事件传值

// 在循环的标签上面加入传入没一项data-item=“{{item}}” 要用 {{}} 包裹因为他是变量传入下标 data-index=“{{index}}”

// bindtap 小程序的事件点击

 {{item.name}}

// 通过事件对象可以拿到穿过来的值

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 {{}}给括起来字符串不许要括起来

// 子组件里面找到在 properties 写入接收的数据

properties: {

bookData:{

  type:Array, // 类型

},

imgFlag:{

  type:Boolean, // 类型

  value:false // 默认值

}

// 子组件传父组件在页面中的子组件标签上写自定义事件事件的名字 ageTabs

// 页面

// 子组件事件触发相当于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” 这个不用加上 {{}}

<image src="{{item2.name}}"></image>




### []( )微信小程序的修改数据

小程序通过赋值更该数据的话是无法同步视图的，必须通过 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 临时的会话存储凭证

wx.getSetting 使用 getUserInfo 获取用户的信息
用户信息获取第三方接口的 token

授权登录

//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)