uni-app开发常用操作速查记录

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

Component({
 /**
   * 组件的数据列表
   */
  data: {
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    }
  }
})

import {observable,action} from 'mobx-miniprogram'
// observable方法用于创建store对象(按照page对象添加),action方法用于定义共享的方法
// 创建store对象并导出的格式:export const store=observable({})
export const store=observable({
// 字段共享格式:字段名:字段值
  num:2,
// 方法共享格式:方法名:action(function函数)即action(function(){})
  updateNum:action(function(step){
      this.num+=step;
  })
})

// 导入创建store绑定方法
import {createStoreBindings} from 'mobx-miniprogram-bindings'
// 导入store实例对象
import {store} from '../../store/store'
Page({
  // 页面加载设置store绑定成员信息
  onLoad:function(){
   this.storeBindings=createStoreBindings(this,{
   store,
   fields:['num1','num2','sum12'], // 共享字段
   actions:['updateNum1']          // 共享方法
   })
  },
  // 页面卸载时清理处理
  onUnload:function(){
    this.storeBingds=this.destroyStoreBindings()
  },
  // 按钮点击时触发的方法
  addNum(e){
    // 执行修改num1方法并按照指定步长step进行相加
    this.updateNum1(e.target.dataset.step)
  }
})

// 导入behavior对象:storeBindingsBehavior
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
// 导入自定义store对象实例
import {store} from '../store/store'
Component({
  // 设置behavior数组
  behaviors:[storeBindingsBehavior],
  // 映射参数绑定,storeBindings属性,按照page对象格式添加,fields actions为子节点对象,key-value形式添加内容.key为组件信息,value为store信息
  storeBindings:{
    store,
    fields:{ // 组件字段:store字段
      num:()=>store.num   //方式一
      //num:(store)=>store.num  // 方式二
     //  num:'num'             .// 方式三
    },
     // 映射方法绑定
  actions:{   // 组件方法:store方法
    updateNum:'updateNum'
  }
  }
  })

// 无参数
var f = () => 5;
// 等同于
var f = function () { return 5 };
===========================================
// 一个参数
var f = a = > b
//等同于
var f = function(a){
   return b;  
}
====================================================
//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

//main.js
Vue.prototype.$message = {
  name:'你好啊'
};
//页面取值
this.$message

//main.js
const app=createApp(App)
app.config.globalProperties.$message = {
  name:'你好啊'
};
//页面取值
import { getCurrentInstance } from "vue";
export default {
  setup() {
        let { proxy } =getCurrentInstance() //getCurrentInstance()用于获取当前组件的上下文
  console.log(proxy.$message);
    }
}

<view class="swiper_view">
      <swiper indicator-dots=true  autoplay=true interval=3000 acceleration=true >
        <swiper-item v-for="swiperItem in swiperList" :key="swiperItem.image_src">
          <image  :src=swiperItem.image_src></image>
        </swiper-item>
      </swiper>
    </view>

script>
  export default {
    data() {
      return {
        heightValue: "60px",
        widthValue: "60px",
        backgroundValue: 'green',
      }
    },
    methods: {
    }
  }
</script>

<block v-for="(cateItem,cateIndex) in cateList" :key="cateIndex">
         <view :class="['left-scroll-view-item',cateIndex==firstActive ? 'firstActive': '']" style="height:20px;width:80px;" @click="changeActive(cateIndex)">{{cateItem.cat_name}}
         </view>
</block>

.firstActive  {
  // 拥有firstActive的标签背景色为红色
    background-color: red;
  }

changeActive(cateIndex){
    // 切换操作将firstActive设置为当前选择项索引
        this.firstActive=cateIndex;
      }

<style lang="scss">
// 宽度、高度
.sizeClass{
  height: 40px;
  width: 40px;
}
// 背景颜色
.backgroundClass{
  background: red;
}
// 边框
.broderClass{
  border: 5px solid yellow
}
</style>

<script>
  export default {
    data() {
      return {
        // 数组方式绑定对应样式名
        backgroundClass:'backgroundClass',
        broderClass:'broderClass'
      }
    },
    methods: {
    }
  }
  </script>

<template>
  <view>
  <uni-list>
    <uni-list :border="true">
    <!-- 显示圆形头像 -->
    <uni-list-chat :avatar-circle="true" v-for="chatItem in wxChatList" :key="chatItem.id" :title="chatItem.userName" 
    :avatar="chatItem.url" 
    :note="chatItem.content" :time="chatItem.createTime" :clickable="true" @click="toChat(chatItem.userName)"></uni-list-chat>
    </uni-list>
  </uni-list>
  </view>
</template>
<script>
  export default {
  data() {
    return {
    wxChatList: [{
        id:1,
        userName: '小花',
        url: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
        content:'今晚吃什么',
        createTime:'2022-12-25 18:36'
        }, {
        id:2,
        userName: '小黄',
        url: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
        content:'明天去哪?',
        createTime:'2023-08-25 08:40'
        }]
    }
  },
  methods: {
    toChat(userName){
    uni.navigateTo({
      url: '../chat/chat?title'+userName
      })
    },
    toChat2:function(){
    uni.navigateTo({
      url: '../chat/chat?title=APP'
    })
    }
  }
  }
</script>

<template>
  <view>
  </view>
</template>
<script>
  export default {
  data() {
    return {
    };
  },
  // 页面展示时记载聊天对象标题
  onLoad: function (obj) { 
    console.log(obj); 
    uni.setNavigationBarTitle({
               title:obj.title
     });
    }
  }
</script>

<template>
<view>
 <scroll-view scroll-y="true"   style="height:150px;">
            <view style="height: 50px;">1</view>
            <view style="height: 50px;">2</view>
            <view style="height: 50px;">3</view>
            <view style="height: 50px;">4</view>
            <view style="height: 0px;">5</view>
              </scroll-view>
  </view>
</template>