【笔记】一些可能想不起来又不想搜的微信小程序基础知识点

为了更新blog，去学了个小程序。倒反天罡，为什么先学小程序而不是vue，哈hahah

提示：以下内容仅为学习笔记，对您可能并没有实质性的帮助，请谨慎阅读

// - 0 字符串转数字类型
totle: res.header['X-Total-Count'] - 0

// `反引号` esc下,引入数据
url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,

事件传参

为组件提供data-自定义属性传参，其中代表参数的名字

<van-button type="primay" bind:tap="btnHandler1" data-step="1}}">numA + 1</van-button>
<van-button type="danger" bind(tap="btnHandler1" data-step="{{-1)">numA - 1</van-button>
//返回值
target:
    dataset:
        step: -1

页面上拉触底事件的处理函数

//定义节流阀判断 false 可以发起请求，true禁止请求
isloading: false
//在请求中赋值
    this.setData({
      isloading: true // or false
    })
//上拉触底中调用
  onReachBottom() {
    if(this.data.isloading) return
    
    this.setData({
      page: this.data.page + 1
    })
    this.getShopList()
  },

wxs调用及使用方法

**************外部定义及调用**************
function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

//调用及使用方法
<view>m2.toLower(country)}}</view>

<wxs  src="../../utils/tools.wxs" module="m2"></wxs>
***************************************

**************内部定义及调用**************
<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>
***************************************

wx.showToast 返回提醒用法

if(this.data.page * this.data.pageSize >= this.data.totle) {
      // 没有新数据后返回提示
      return wx.showToast({
        title( '数据加载完毕...',
        icon: 'none'
      })
    }

页面开启下拉刷新

AI解释： 这里的 cb 是一个回调函数，它的作用是当异步操作（如网络请求）完成并且数据加载完成后，执行一些额外的操作或处理。

例如，可能在数据加载完成后，需要更新用户界面、触发其他事件或执行一些清理工作，这时就可以通过传递一个回调函数来实现。

在 complete 回调中，使用 cb && cb() 这样的表达式来确保：只有当 cb 被传递且为真值（即它是一个函数）时，才会尝试调用它。

如果 cb 是假值（例如未传递、null、undefined 或 false），则不会执行任何操作，从而避免尝试调用非函数值导致的错误。
这种模式是JavaScript中处理异步回调的一种常见做法。

// .在json中配置
{
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}
// js中配置下拉刷新函数
onPullDownRefresh() {
    //重置关键数据
    this.setData({
      page: 1,
      shopList: [],
      totle: 0
    })
    //重新发起请求，传递wx.stopPullDownRefresh()
    this.getShopList(()=> {
      wx.stopPullDownRefresh()
    })
  },
// 在请求完成中添加下拉刷新停止，接收cb参数
  getShopList (cb) {
    ...
      complete: () => {
        wx.hideLoading(),
        this.setData({
          isloading: false
        }),
        // 下拉刷新 wx.stopPullDownRefresh()
        cb && cb()
      }
    })
  },

小程序组件接收外界数据的定义

// 简化
max: Number
// 完整
max: {
  type: Number,
  value: 10
}

数据监听器的定义

  // 与data平级
  observers: {
    'n1, n2': function(newn1, newn2) {
      this.setData({
        sum: newn1 + newn2 
      })
    }
  }

纯数据字段

 options: {
    // 纯数据字段
    pureDataPattern: /^_/
  },

  data: {
    // 纯数据字段修改
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    }
  },

Ctrl + D 快速选中相同项并修改

组件生命周期

 lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },

微信小程序组件库介绍 - Vant Weapp (vant-ui.github.io)

小程序api-promise化构建方法

1. npm i --save miniprogram-api-promise@1.0.4
2. 删除miniprogram_npm文件夹 =>开发者工具 => 工具 => 构建npm

//app.js
import{promisifyAll} from 'miniprogram-api-promise'

const wxp = wx.p = {}
promisifyAll(wx,wxp)

git创建新分支：git checkout -b tabbar

组件中方法调用在methods中调用

methods: {
    btnHandler2(e) {
          // console.log(e)
          this.updateNmu2(e.target.dataset.step)
    },
}

对常用方法在main.js中进行封装

uni.$showMsg = function(title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon:"none"
  })
}

v-for v-if 不放在同一级

运行出错，尝试重启微信开发者小程序客户端

在组件中使用@click方法

// 首先在组件页面定义click事件
<view class="my-search-container" :style="{'background-color': bgcolor}" @click="gotoSearch">
// 在methods中声明
gotoSearch() {
    // 即可在页面中使用click
    this.$emit('click')
}

实现搜索框的防抖处理

clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          console.log(e)
        }, 500)

// 文字不允许换行（单行文本）
white-space: nowrap;
// 溢出部分隐藏
overflow: hidden;
// 文本溢出后，使用 ... 代替
text-overflow: ellipsis;

计算属性的定义

computed: {
      histories() {
        return [...this.historyList].reverse()
      }
    }

数据持久化存储到本地

// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
uni.setStorageSync('kw', JSON.stringify(this.historyList))
// 在onlanch中调用本地数据
onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
    },

过滤器vue3已弃用，使用方法属性，

##########已经弃用##########
filters: {
  // 把数字处理为带两位小数点的数字
  tofixed(num) {
    return Number(num).toFixed(2)
  }
}
***********************
<!-- 商品价格 -->
<view class="goods-price">￥{{goods.goods_price | tofixed)</view>

修改如下

methods: {
  // 把数字处理为带两位小数点的数字
  tofixed(num) {
    return Number(num).toFixed(2)
  }
}
<view class="goods-price">￥{{tofixed(goods.goods_price)}}</view>

返回所有数组

.map(x => x.pics_big): 这是一个数组的map方法调用。map方法会遍历数组中的每个元素，并对每个元素执行提供的函数。在这个例子中，箭头函数x => x.pics_big被用作映射函数，它接收数组中的每个元素（这里假设元素是对象，每个对象都有一个pics_big属性，这个属性包含了图片的URL）。

urls: this.goods_info.pics.map(x => x.pics_big)

正则替换

res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp /g, 'jpg')

配置Vuex

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {},
})

// 4. 向外共享 Store 的实例对象
export default store

本文作者：sheetung

本文链接：https://cutech.space/archives/miniprogram-knolwege.html

版权声明：转载时须注明出处（包括原作者和文章链接）及本声明