官网:

1. uniapp文档
2. 微信小程序文档
3. vue2文档
4. vue3文档

单位

图像

官网: image

image的mode一般有:

导航

• 方法内:
  官网: 路由与页面跳转

  uni.navigateTo({
    url: "/pages/xxx/index"
  })
  

• template内
  官网: 路由与页面跳转

绑定触底事件

即, 下拉到底部时, 触发自定义的事件, 动态获取数据.

1. 页面部分滚动

   假如scroll-view的display为flex时, 需要添加enable-flex属性

2. 页面全部滚动

轮播图

一般需要指定三个属性

1. autoplay 自动播放
2. indicator-dots 指示器
3. circular 衔接轮播

注: swiper-item的高度和宽度都为100%,

分段器

即tab

使用scss

安装依赖
由于安装node-sass提示错误, 所以替换了:

"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"style-resources-loader": "^1.4.1",

或:

存储数据

1. app.globalData

   // 设置
   getApp().globalData.data = {}
   
   // 获取
   const data = getApp().globalData.data
   

2. vuex
uniApp内已经内嵌了vuex
   第一步: 定义 ./stor/index.js

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex);
   
   
   export default new Vuex.Store({
   	state: {
   		hasLogin: false, // 登录状态
   		userInfo: {}, // 用户信息
   	},
   	mutations: {
   		setHasLogin(state, value){
   			state.hasLogin = value
   			console.log(state.hasLogin)
   		}
   	},
   	actions: {},
   	getters: {}
   })
   

   第二步: 在mian.js中挂载store

   import Vue from 'vue'
   import App from './App'
   import store from './store'  
   
   Vue.config.productionTip = false
   Vue.prototype.$store = store
   
   App.mpType = 'app'
   
   const app = new Vue({
   	...App,
   	store,
   })
   app.$mount()
   

   第三步: 使用vuex

   // 获取state中的值
   this.$store.state.loginStatus
   
   // 修改state中的值
   this.$store.commit('setHasLogin', true);
   
   // 调用actions中的方法
   // 要在actions中定义方法
   this.$store.dispatch('',{number:123})
   
   // 调用getters中的方法
   // 要在getters中定义方法
   this.$store.getters.reverseLoginStatus
   

3. uni.setStorage/uni.getStorage
   见: 数据缓存

生命周期钩子函数

有三类:
APP.vue生命周期:

pages/xxx/index.vue生命周期:

组件生命周期

封装request

// 封装自定义请求

export default (params) => {
  return new Promise((resolve, reject) => {
    // 加载中
    uni.showLoading({
      title: "加载中...",
    });
    wx.request({
      ...params,
      success(res) {
        // .data => 服务器返回的数据
        resolve(res.data); // 成功
      },
      fail(err) {
        reject(err); // 失败
      },
      complete() {
        // 完成请求时
        // 隐藏loading
        uni.hideLoading();
      },
    });
  });
};

在main.js中:

import Vue from "vue";
import App from "./App";
import request from "./utils/request";

Vue.config.productionTip = false;
Vue.prototype.request = request;

App.mpType = "app";

const app = new Vue({
  ...App,
});
app.$mount();

使用时:

this.request({
  url: "http://xxxx",
  data: {}
})

登录组件