devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序相关_wx.nexttick this.selectcomponent

作者：你好赵伟 | 2024-06-17 11:54:12

赞

踩

wx.nexttick this.selectcomponent

微信小程序官方文档：微信开放文档

数据绑定

数据在data中声明，使用双花括号（mustache）在页面上展示

mustache应用场景：

1、绑定内容

2、绑定属性

3、三元运算

4、数值运算

事件绑定

常用事件是：tap、input、change

事件传参与数据同步

改变数据：setState()

访问值的方式：this.data.值

事件传参：需要data-参数名

获取事件参数：event.target.dataset.参数名

样式相关

什么是wxss

1.、是样式语言，用来美化wxml中的样式，类似于css

2、具有大部分css的特性，并有对css的扩展，用于小程序的开发

3、扩充了rpx、@import引入

4、rem是css特有的

什么是rpx?

用途：解决屏幕适配的单位

实现原理：鉴于不同设备屏幕的大小不同，rpx把所有的设备屏幕分为750份，为750rpx

rpx和px的转换：以苹果6为例，是375px，等分为750个rpx,1px=2rpx,但是在不同的屏幕上转换值是不同的

样式导入

使用@import，后面跟上相对路径，以分号结尾

全局样式和局部样式

全局样式是写在app.wxss文件中的

局部样式是写在文件页面的.wxss中的

数据请求

小程序官方对数据接口的请求做出了两个限制

1、只能请求HTTPS类型的接口（如果在开发阶段，没有https协议的域名请求，可以在详情-本地配置中跳过检查）

2、必须将接口的域名添加到信任列表中

注意：微信列表配置：登录微信小程序管理后台------开发-----开发设置-----服务器域名----修改request合法域名

配置域名注意事项

1、域名只支持https协议

2、域名不能使用IP地址或者localhost

3、域名必须经过icp备案

4、服务器域名一个月内最多可修改5次

在小程序中发起请求使用什么？

使用wx.request({

        url:, // 请求地址

        method:,  // 请求方法

        data: {},  // 请求数据

        success：（res）=> {} // 请求成功之后的方法

})

跨域和AJAX请求

跨域只存在于浏览器中，小程序的宿主环境是微信，所以不存在跨域问题

ajax请求是基于浏览器的XMLHttpRequest这个对象，由于小程序的宿主环境是微信，所以不叫做发起ajax请求，而叫做发起网络请求

小程序生命周期

生命周期分为应用生命周期和页面生命周期

应用生命周期

onLaunch(){}  // 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作

onShow(){}  //  小程序启动或者从后台到前台展示时触发

onHide(){}  //  小程序从前台到后台隐藏时触发

页面生命周期

onLoad(options){}  // 监听页面加载，一个页面只调用一次

onShow(){}  // 监听页面显示

onReady(){}  // 监听页面初次渲染完成，一个页面只调用一次

onHide(){}  // 监听页面隐藏

onUnLoad(){}  // 监听页面卸载，一个页面只调用一次

自定义组件生命周期

created()  // 在组件实例刚刚被创建时执行

attached() // 在组件实例刚进入页面节点时执行

ready()  // 组件在视图层布局完成后执行

moved()  // 组件被移动到节点树另一位置时执行

detached()  // 组件实例被销毁时执行

error()  // 组件方法抛出错误时执行

注：以上是组件的生命周期，需要在lifetimes对象中进行声明

监听组件在页面的生命周期，在pageLifetimes对象中声明

show()  // 页面展示时触发

hide()  // 页面隐藏时触发

resize()   // 组件所在页面的尺寸发生变化时

小程序路由

声明式导航：navigator组件

编程式导航：使用小程序提供的api

保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面

wx.navigateTo({})

关闭当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面

wx.redirectTo({})

跳转到tabbar页面，但是路径后面不能带参数

wx.switchTab({})

关闭所有页面，跳转到应用内的某个页面

wx.reLanuch({})

关闭当前页面，返回上一级或多级页面

wx.navigateBack({})

注：路径后可以带参数，路径和参数之间用？分割，参数和参数之间用&分割，参数的获取可以在页面的生命周期onLoad中的参数拿到

小程序本地存储

小程序存储分为同步存储和异步存储，区别就是同步存储会堵塞当前同步任务，直到结果返回，异步任务不会阻塞

特点：同步存储以sync结尾，异步存储接收的是对象参数

同步存储

存入本地数据

wx.setStorageSync(存储key,存储value)

获取本地数据

wx.getStorageSync(存储key)

删除本地数据

wx.removeStorageSync(存储key)  传递参数清除传入的key

清空本地数据

wx.clearStorageSync()   不传参数清楚所有 

异步存储

存入本地数据

wx.setStorage({

        key:存储key,

        data:存储value

})

获取本地数据

wx.getStorage({

        key:存储key

})

删除本地数据

wx.removeStorage({

        key:存储key

})  传递参数清除传入的key

清空本地数据

wx.clearStorage()  

数据监听

小程序中使用

进行监听，是个对象，key为监听的内容，value为函数

可以监听data中的属性，也可以监听properties中的属性

data中的属性是只有改变了才会触发监听函数

properties是立即触发

  1. observsrs：{
  2.     key: function(newval){},
  3.     // 批量进行监听
  4.     `key1,key2`: function(newkey1, newkey2){},
  5.     // 监听对象某个属性
  6.     "obj.key": function(newval){},
  7.     // 监听数组
  8.     "arr[index]": function(newval){}
  9. }

组件通信

父传子

在父组件中，通过属性传递给子组件，子组件通过properties接收

子传父

子组件通过triggerEvent方法发射一个自定义事件，并且可以携带参数

在父组件中可以通过bind:自定义事件名称来接收数据

获取组件实例

可以通过this.selectComponent(类名、id名)来获取组件实例，就可以操作实例的数据和方法

微信小程序store

微信中的全局状态管理使用的是mobx-miniprogram和westore两种、

mobx-miniprogram

注意：mobx-miniprogram搭配mobx-miniprogram-bindings

创建store

  1. import {
  2.   observable,
  3.   action
  4. } from "mobx-miniprogram";
  5.  
  6.  
  7. export observable（{
  8.  
  9.     // data
  10.     demo1: 1,
  11.     demo2: 2,
  12.     
  13.     // action来改变数据
  14.     updataDemo1: action(function(argument){})
  15.  
  16. }）

在页面中使用store

  1. import {
  2.   createStoreBindings
  3. } from "mobx-miniprogram-bindings"
  4. import store from "../../store/index"
  5.  
  6. Page({
  7.   onLoad() {
  8.     // 使用createStoreBindings将数据绑定到页面中
  9.     this.storeBindings = createStoreBindings(this, {
  10.       store,
  11.       fields: ['demo1', 'demo2'],
  12.       actions: ['updataDemo2']
  13.     })
  14.   },
  15.  
  16.   // count 递增
  17.   increaseHandle() {
  18.     this.updataDemo2(1)
  19.   },
  20.  
  21.   // 页面卸载时,销毁当前页面的 store 绑定
  22.   onUnload() {
  23.     this.storeBindings.destroyStoreBindings();
  24.   }
  25. })

1、createStoreBindings 方法调用会返回一个包含 updateStoreBindings，destroyStoreBindings 两个函数的对象，并且赋值给了当前页面实例的 storeBindings 属性。

2、当页面卸载（onUnload）时，调用 destroyStoreBindings 销毁当前页面的 store 绑定，避免造成内存泄露

3、updateStoreBindings函数涉及到延迟更新和立即更新的问题

      3.1：为了提升性能，store中状态被更新时，不会立即更新到data中，而是在下次wx.nextTick()调用时才更新，可以减少setData的调用次数

      3.2：如果想要立即更新，在页面中调用this.storeBindings.updateStoreBindings() ，在组件中调用this.updateStoreBindings() 

在组件中使用store

  1. import {
  2.   storeBindingsBehavior
  3. } from "mobx-miniprogram-bindings"
  4. import store from "../../store/index"
  5.  
  6. Component({
  7.   behaviors: [storeBindingsBehavior],
  8.   storeBindings: {
  9.     store,
  10.     fields: ['demo2'],
  11.     actions: ['updataDemo2']
  12.   }，
  13.   methods: {
  14.     // demo2 递增
  15.     increaseHandle() {
  16.       this.updataDemo2(1)
  17.     }
  18.   }
  19. })

store划分模块

直接在store文件夹下新建相应的.js文件就行

westore

westore有俩个核心的api

创建页面

create(store，option)

创建组件

create(option)

更新页面或组件

this.update()

1、为了避免组件和页面中data的值被store中的值覆盖掉，使用store.data来访问

创建store

  1. // 创建单一的store
  2. export default {
  3.   data: {
  4.     userInfo: {
  5.       name: 'zhangsan',
  6.       age: 25,
  7.       city: 'QingDao'
  8.     },
  9.     count: 0
  10.   }
  11. }
  12.  
  13. // 创建模块化store
  14. import user from "./user"
  15. import system from "./system"
  16.  
  17. export default {
  18.   data: {
  19.     user,
  20.     system
  21.   }
  22. }

在页面中使用更新store

  1. import store from "../../store"
  2.  
  3. create(store, {
  4.   data: {
  5.     count: null
  6.   },
  7.  
  8.   // 更新 count
  9.   increase() {
  10.     this.store.data.count += 1
  11.     this.update()
  12.   }
  13. })

在组件中使用更新store

  1. import create from "../../utils/create"
  2.  
  3. create({
  4.   data: {
  5.     count: null
  6.   },
  7.  
  8.   methods: {
  9.     increase() {
  10.       this.store.data.count += 1
  11.       this.update()
  12.     }
  13.   }
  14. })

this.update()

this.update()方法返回一个promise对象，当视图层页面渲染完成后调用resolve()

  1. this.update()
  2.  .then((data) => {
  3.    console.log('视图已完成数据的更新', data)
  4.  })

自定义组件option

自定义组件的样式

默认情况下，自定义组件的样式只对当前组件有效

app.wxss文件中定义的全局样式，只有class定义的样式会对组件产生样式隔离，id、标签选择器不会有样式隔离

如果希望组件影响外部ui、或者外部样式影响组件可以在js文件或者json文件中进行配置

  1. // styleIsolation的值有三个
  2. // isolated   在自定义组件内外都不会相互影响
  3. // apply-shared  页面样式影响自定义组件，自定义组件不会影响到页面
  4. // shared    页面样式影响自定义组件，自定义组件也会影响到页面
  5.  
  6.  
  7. // js文件
  8. option: {
  9.     styleIsolation: ""
  10. }
  11.  
  12.  
  13.  
  14.  
  15. // json组件
  16. styleIsolation： ""

自定义组件的data、methods

在data中定义组件的私有数据，在methods中定义组件的私有方法

自定义组件的properties

1、用于接收父组件传递给子组件的数据，在properties中进行接收，类似vue

2、properties对象中的数据可以在this.data中访问，this.data===this.properties

3、只是为了变量的定义区分，接收到的父组件传进来的变量在properties中声明

组件的数据在data中定义

自定义组件的数据监听

数据监听在observers,用法类似于vue

自定义组件通信

父传子

通过属性传递给子组件，子组件在properties中接收

子传父

子组件使用this.triggerEvent('自定义事件名'，传递的参数)来触发父组件中的自定义事件

获取子组件实例

通过this.selectComponent()来获取子组件实例

自定义组件插槽

匿名插槽

在子组件中通过<slot></slot>

具名插槽

在子组件中<slot name="demo"></slot>

在父组件中 <view slot="demo"></slot>

微信小程序内置方法使用

微信小程序登录

使用微信内置的方法wx.login()获取临时登录凭证

以下是微信登录的总流程图：https://img-blog.csdnimg.cn/direct/b75a778e8dd34c67819ab88815b5ee6d.png

微信小程序支付

以下是微信支付的总流程图：https://img-blog.csdnimg.cn/direct/361e0f6b1ee94f7187524ac1e810388d.png

1、生成平台订单：前端调用接口，向后端传递需要购买的商品信息，收获人信息，后端生成订单编号

2、获取预付单信息：将订单编号发送给后端，后端向微信服务器获取预付单信息，后端会将微信服务器的预付单信息进行加密，然后将加密后的预付单信息返回给前端

3、发起微信支付：前端调用wx.requestPayment()发起微信支付

4、查询支付状态：返回信息为requestPayment：ok支付完成

获取微信小程序头像

获取微信小程序昵称

微信小程序转发功能

微信小程序分享到朋友圈

微信小程序手机号验证

全局配置

小程序微信官方文档有关的全局配置：小程序配置 / 全局配置 (qq.com)

小程序根目录下的app.json文件是全局配置文件，配置项常用的有pages、window、tabbar、style

pages

pages是一个数组，接收的每一项是字符串，用于描述当前小程序所有页面路径

window

下面这张图是小程序页面的组成部分，包括navigateBar、background和页面部分

导航栏区域

navigationBarTitleText: "导航栏标题文字内容"

navigationBarBackgroundColor:导航栏背景颜色，支持使用16进制

navigationBarTextStyle:导航栏标题颜色，仅支持black/white

窗口区域

backgroundColor: 窗口背景颜色

backgroundTextStyle: 下拉loading的样式，仅支持dark/light

下拉刷新功能

需要在app.json----window-----enablePullDownRefresh的值设置为true

需要在下拉刷新页面的js文件，添加监听事件onPullDownRefresh,监听用户的操作

处理完自己的逻辑之后，调用wx.stopPullDownRefresh(),停止刷新操作

  1. onPullDownRefresh: function() {
  2.     // 一些自己的逻辑
  3.  
  4.     // 停止刷新操作
  5.     wx.stopPullDownRefresh()
  6. }

设置上拉触底的功能

需要在app.json---window---onReachBottomDistance设置新的数值

  1. onReachBottom: function() {
  2.     // 在该函数中设置上拉触底的逻辑功能
  3.     // 可以搭配节流，在结果返回之前只响应第一次的触发
  4. }

tabbar

用于多页面的切换，分为底部tabbar和顶部tabbar,最少设置两个，最多设置五个

tabbar的设置项如下

tabbar的节点配置项

注：list项是配置各个tab的具体信息

list的配置项如下,是一个数组，每项接收一个tab配置

style

是否使用升级后的样式

分包

uni-app

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号