持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

这是一篇我在自己在学习时，用vue写小程序的时候整理的笔记，其中有对小程序的介绍、与spa单页面应用的区别、以及部分功能的实现，初次接触小程序，会有些许不足，欢迎评论区讨论

一、`list`文件夹的介绍

1. 此文件用于页面初始化数据，存放了data、函数（script）

2. 此文件用于导入本页面封装的组件（import）

3. 此文件用于页面的显示，存放标签、组件（html）

wxss里面写样式（style）

二、基本方法使用

1. 在 `.js`文件夹中使用函数的方法

在 js 文件中：在函数中想修改 data 中的值，要使用 setData

2. 组件传值

2.1 `父传子`

父组件中--先 js 中定义数据，再在 wxml 中传值

子组件中--现在 js 中用 properties 接收（两种方法），再在 wxml 中通过标签在页面中展示

2.2 `子传父`

子组件中-- 先在 wxml 中绑定点击事件，再在 js 中通过 triggerEvnt触发自定义事件

父组件中--先在 wxml 通过标签接收子组件的自定义事件名，再在 js 中定义函数执行事件

三、小程序中的差别

1. 提示弹窗

// 打开弹窗提示用户正在加载
uni.showLoading({
  title: '加载中...'
})

// 关闭弹窗
uni.hideLoading()

2. 警告

uni.showToast({
    title='获取失败...',
    icon:'none'
  })

小程序中一些功能的实现

1.vuex中数据的持久化存储

在mutations中封装一个持久化存储函数 --> 在mutations中其他函数中直接调用这个函数就可以实现持久化存储

// 1. 持久化存储函数
saveToStorge(state) {
  // 第一项是数据名  第二项是数据
   uni.setStorageSync('cart', JSON.stringify(state.cart))
}

// 2. 在其他函数中使用 使用m_cart中的持久化存储函数
this.commit('m_cart/saveToStorge') // 持久化存储

2. 监听vuex中的getters

例子：购物车角标

2.1 非tabBar页面

在vuex/getters中定义一个函数计算商品的总数量 --> 在页面文件中用mapGetters导入该方法 --> 在页面文件中用事件监听watch监听数量的变化

// 1. 非tabBar页面
// 这里watch监听的是一个包裹函数的对象，为了使用immediate，让其在页面加载时就显示
watch: {
  allGoodsCount: {
    handler(newCount) {
      this.options[1].info = newCount
    },
    immediate: true // 页面加载就显示
  }
}

2.2 abBar页面

封装mixins --> 在tabBar页面中导入

// 2. tabBar页面
// 2.1 封装mixins
import {mapGetters} from 'vuex' 

export default {
  computed: {
    ...mapGetters('m_cart', ['allGoodsCount'])
  },
  watch: {
    // 商品总数量
    allGoodsCount: {
      handler(newCount) {
        // setTabBarBadge 为tabBar的某一项的右上角添加文本
        uni.setTabBarBadge({
          index: 2, // 从左边数起第二个tabBar页面
          text: String(this.allGoodsCount)// 显示的文本，不超过三个半角字符
        })
      },
      immediate: true // 页面加载就显示
    }
  }
}
// 2.2 tabBar页面中
import tabBarmixins from '@/mixins/tabBarmixins.js'

mixins: [tabBarmixins]

这是一篇自己学习小程序的笔记

一、list文件夹的介绍