官网:

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

单位

rpx

750rpx

vw/vh

100vw

100vh

图像

官网: image

image的mode一般有: | mode | 描述 | | -- | -- | heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 aspectFit | 保持纵横比缩放图，可以完整地将图片显示出来。 aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来

导航

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

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

• template

  内 官网: 路由与页面跳转

  <navigator url="/pages/xxx/index">
  </navigator>

绑定触底事件

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

1. 页面部分滚动

   <scroll-view
   @scrolltolower="handleToLower"
   scroll-y
   class="view"
   >
   </scroll-view>
   
   <style lang="scss" scoped>
   .view {
   // 计算滚动区域
   height: calc(100vh - 36px);
   }
   </style>

   假如

   scroll-view

   的display为flex时, 需要添加

   enable-flex

   属性

2. 页面全部滚动

   <script>
   export default {
   onReachBottom(){
   // ... 执行
   }
   };
   </script>

轮播图

一般需要指定三个属性

1. autoplay

   自动播放

2. indicator-dots

   指示器

3. circular

   衔接轮播

<swiper autoplay indicator-dots circular>
<swiper-item v-for="item in banner" :key="item.id">
<image :src="item.thumb"></image>
</swiper-item>
</swiper>

注:

swiper-item

100%

分段器

即tab

<template>
<view>
<view class="home_tab">
<view class="home_tab_title">
<view class="title_inner">
<uni-segmented-control
:current="current"
:values="items.map((item) => item.title)"
@clickItem="onClickItem"
styleType="text"
activeColor="#dd3915"
></uni-segmented-control>
</view>
</view>
<view class="home_tab_content">
<view v-if="current === 0"><home-recommend></home-recommend></view>
<view v-if="current === 1"><home-category></home-category></view>
<view v-if="current === 2"><home-new></home-new></view>
<view v-if="current === 3"><home-album></home-album></view>
</view>
</view>
</view>
</template>

<script>
import { homeAlbum } from "./home-album";
import { homeCategory } from "./home-category";
import { homeNew } from "./home-new";
import { homeRecommend } from "./home-recommend";
// 分段器
import { uniSegmentedControl } from "@dcloudio/uni-ui";

export default {
components: {
homeAlbum,
homeCategory,
homeNew,
homeRecommend,
uniSegmentedControl,
},
data() {
return {
items: [
{ title: "推荐" },
{ title: "分类" },
{ title: "最新" },
{ title: "专辑" },
],
current: 0,
};
},
methods: {
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex;
}
},
},
};
</script>

<style lang="scss">
.home_tab {
.home_tab_title {
.title_inner {
width: 60%;
margin: 0 auto;
}
}
}
</style>

使用scss

安装依赖 由于安装

node-sass

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

<style lang="scss">
.home_tab {
.home_tab_title {
.title_inner {
width: 60%;
margin: 0 auto;
}
}
}
</style>

或:

<style lang="scss" scoped>
.home_tab {
.home_tab_title {
.title_inner {
width: 60%;
margin: 0 auto;
}
}
}
</style>

存储数据

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

onLaunch

uni-app

onShow

uni-app

onHide

uni-app

onError

uni-app

pages/xxx/index.vue

onLoad

组件生命周期 | 函数名 | 说明 | | -- | -- |

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

封装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: {}
})

登录组件

<!-- 微信授权登录全程代码实现 -->
<template>
<view>
<view v-if="isLoading">
<view>
<view class="header">
<!-- <image src="../../static/img/wx_login.png"></image> -->
</view>
<view class="content">
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像、地区等)</text>
</view>

<button
class="bottom"
type="primary"
open-type="getUserInfo"
withCredentials="true"
lang="zh_CN"
@getuserinfo="getUserInfo"
>
授权登录
</button>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
SessionKey: "",
OpenId: "",
appKey: "abcdef",
nickName: null,
avatarUrl: null,
isLoading: uni.getStorageSync("isLoading") || true, //默认为true
};
},
methods: {
getUserInfo() {
/* 获取用户信息 */
uni.getUserInfo({
provider: "weixin",
// 获取成功后调用
success: (infoRes) => {
let nickName = infoRes.userInfo.nickName; //获取用户登录昵称
let avatarUrl = infoRes.userInfo.avatarUrl; //获取用户头像
this.nickName = nickName;
this.avatarUrl = avatarUrl;

console.log("nickName: ", nickName);
console.log("avatarUrl: ", avatarUrl);
try {
uni.setStorageSync("isLoading", false); //记录是否第一次授权  false:表示不是第一次授权
this.updateUserInfo();
} catch (e) {
console.log(e);
}
},
fail(res) {},
});
},
login() {
/* 登录函数 */
uni.showLoading({
title: "登录中...",
});

// 1.wx获取登录用户code
uni.login({
provider: "weixin",
success: (loginRes) => {
let code = loginRes.code;
if (!this.isLoading) {
//非第一次授权获取用户信息

uni.getUserInfo({
provider: "weixin",
success: (infoRes) => {
//获取用户信息后向调用信息更新方法
let nickName = infoRes.userInfo.nickName; //昵称
let avatarUrl = infoRes.userInfo.avatarUrl; //头像
this.nickName = nickName;
this.avatarUrl = avatarUrl;

console.log("nickName: ", nickName);
console.log("avatarUrl: ", avatarUrl);
this.updateUserInfo(); //调用更新信息方法
},
});
}

//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
uni.request({
url: `${this.serveHost}/login`, //接入后端提供的登录接口
data: {
code: code, //传入参数code获取登录凭证
},
method: "GET",
header: {
"content-type": "application/json",
}, //请求头
success: (res) => {
// 成功登录后调用
// 可以: openId、或SessionKdy存储//隐藏loading

uni.hideLoading();
},
});
},
});
},

updateUserInfo() {
/* 向后台更新信息 */

uni.request({
url: `${this.serveHost}/user`, //服务器端地址
data: {
appKey: this.appKey, //Vuex封装app密钥 this.$store.state.appKey
customerId: "this.customerId", //自定义id  this.customerId
nickName: this.nickName, //昵称
headUrl: this.avatarUrl, //头像
},
method: "POST",
header: {
"content-type": "application/json",
},
success: (res) => {
if (res.data.state == "success") {
uni.reLaunch({
//信息更新成功后跳转到小程序首页
url: "/pages/home/index",
});
}
},
});
},
},
onLoad() {
//默认加载
this.login();
},
};
</script>

<style>
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}

.header image {
width: 200rpx;
height: 200rpx;
}

.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}

.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}

.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
</style>