uniapp学习（遇到的坑）

目录

使用vant组件库

关于vant直接使用Toast组件

 使用axios

使用mockjs

使用vuex

 uniapp打包

        检测是否安装成功 

        生成签名证书

        查看证书信息

vuex + 本地存储

uniapp的生命周期

关于数字不换行问题

uniapp聊天室滚动到最底部

uniapp突然不提示了

 仿qq置顶效果

uniapp组件生命周期

uniapp页面生命周期

uniapp用到的api

注册全局组件

动态样式

无数据是选用默认

picker组件运用

uni.chooseImage(OBJECT)

 uniapp适配不同端的写法

---

使用vant组件库

初步引用之疯狂报错vue2版本

之前使用原生写的uniapp,组件也是uniapp提供的内外部组件，突然想用一下组件写个项目，结果刚开始引入的时候就疯狂的报错 

vant官网Vant 2 - Mobile UI Components built on Vue

原文是这样写的

# Vue 2 项目，安装 Vant 2：

npm i vant@latest-v2 -S

// main.js中

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

结果报错就开始了

 然后搜了一下有说在app.vue中引入vant.css文件的有说找文件在url前面加逗号，结果都没解决问题，然后捣鼓了一下又报了一个

require is not defined

 就是报错不断，最后找了半天才发现

首先是vant的版本问题

 下载2.10版本，都是踩坑过来的，你要是想踩一遍不拦着，

// main.js

import Vant from 'vant';

Vue.use(Vant);

 // app.vue

@import 'vant/lib/index.css';

在css样式中引入

 

 就可以没有报错，组件可以正常显示。

关于vant直接使用Toast组件

直接引用Toast会报

 只要这样就可以解决

 this.$toast.fail('登录失败');

 使用axios

npm install axios --save

// main.js

import axios from 'axios'

Vue.prototype.$axios = axios

使用mockjs

npm install mockjs --save-dev

// 新建文件夹mock新建文件index.js
测试数据
let mock = require('mockjs')
let a = {
	status: 200,
	data: [
		{
			a: 1
		}
	]
}
mock.mock('/user/list','get',a)

// 测试

async demo(){

        const res = await this.$axios.get('/user/list')

        console.log(res)

}

 

 正常请求

使用vuex

uniapp本身应该就带有vuex，所以我们不需要像开发vue项目那样还需要下载包，可以直接引用

 在根目录下创建store文件夹，然后创建index.js文件，之后就是跟vue 那种引入

// 在index.js中写（个人比较懒，自己的项目所以vue都是小写，有需要的可以改为大写）
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const store = new vuex.Store({
	state: {
		num: 'vuex的数据'
	},
	mutations: {
		// login(state,val){}
	},
	actions: {}
})
export default store

// 然后就是在main.js中引入
import store from './store'

Vue.prototype.$store = store

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app,
	store
  }
}

在页面中引用就可以了

    var a = this.$store.state.num
    console.log(a)

 uniapp打包

 uniapp的打包跟vue的打包不一样，vue就一行命令完事npm run build

uniapp打包需要有证书，现公司是以下打包的，其他的了解不多

首先先下载一个JRE

下载地址：Java Downloads | Oracle

点击进去就是首页

 然后就是往下滑

 下载适合自己电脑的

 .exe是安装版，这个可以参照别人的安装详情，我是下载的.exe

 首先提醒以下，这个好像是国外的网站，所以下载进度会特别的慢

还要创建Oracle账号，没有就需要先创建，按照指引创建登录就行了

安装：

 这里记得改目标文件夹，不然就直接安装在C盘了，然后点击安装

点击更改文件夹，自己找一个好的位置，安装路径不要有中文等特殊字符，最好纯英文

然后配置环境变量

进入到jre解压或安装的目录下的bin目录，点击地址栏复制此路径

 建议是找个自己知道的文件路径不然到最后位置不是很好找

在桌面上右击此电脑（我的电脑）--------属性

 点击高级系统设置（不同版本的电脑会出现一下两种界面的属性界面，根据自己电脑来）

 我电脑是win10的系统所以是这个样子

可能有的会弹出这个框点进去就行

 我的直接弹出这个框，点击上面步骤就可以弹出下面这个

点击环境变量 

 双击系统变量Path

添加环境变量 

  win10下是这样，点击右边的新建，然后把刚才复制的路径粘贴进去，确定

 我是之前已经弄好了，这就是看别人稍微整理一下

 win7下是这样，需要在变量值最后面先输入一个英文的分号";"，然后再粘贴刚刚复制的路径，确定
              最后一路确定，关闭所有窗口就完成了

检测是否安装成功 

按住键盘win + r调出运行框，或者鼠标右击左下角开始菜单，然后点击运行 

在弹出来的终端黑窗口中输入java -version回车 

  不出意外的话，下面红框内就会出现你刚刚下载安装的jre版本号， 至此，jre安装完成

如果报错的话就要百度了

生成签名证书

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

• testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
• test.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
• 36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期

 回车后会提示：

 要记住密码，而且密码是不显示的，跟git提交仓库是的最后输入y，其他的可以随便填

查看证书信息

keytool -list -v -keystore test.keystore

Enter keystore password: //输入密码，回车

会输出以下格式信息： 

 

 刚开始弄一定要记住密码，或者找个地方记下来，不然忘了就芭比Q了，（因为我刚刚差点忘了，提醒一下）

其中证书指纹信息（Certificate fingerprints）：

• MD5
  证书的MD5指纹信息（安全码MD5）
• SHA1
  证书的SHA1指纹信息（安全码SHA1）
• SHA256
  证书的SHA256指纹信息（安全码SHA245）

 然后回到uniapp打包即可

 

有两种打包模式但是

 个人用的是第二个

以为第一个打完包报错了，就试了一下第二个

 但是第二个打包时间是挺长的但是总算是打包成功

vuex + 本地存储

关于登录后数据保存在vuex中

import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const store = new vuex.Store({
	state: {
		userinfo: {}
	},
	mutations: {
		// login(state,val){}
		loginform(state,data){
			if(data){
				state.userinfo = data
				uni.setStorageSync('userinfo',JSON.stringify(data))
			}else{
				if(uni.getStorageSync('userinfo')){
					state.userinfo = JSON.parse(uni.getStorageSync('userinfo'))
				}
			}
		}
	},
	actions: {}
})
export default store

// loginform 有数据传递过来就进行本地储存然后给userinfo赋值，如果没有则判断存储中是否有这个值
// 如果有则进行赋值（覆盖掉只可以单向赋值因为只有一个变量可以赋值，如果别的也用这个会把上一个）

// 在app.vue中调用
onShow: function() {
			console.log('App Show')
			this.$store.commit('loginform')
		}

// 就可以切换页面vuex都有保存的数据了

uniapp的生命周期

应用的生命周期：

  生命周期的概念： 一个对象从创建，运行，销毁的整个过程被称为生命周期。

   生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数：

 页面的生命周期：

关于数字不换行问题

uniapp中如果是一串数字会发生不换行的问题

 在遇到上面的情况的时候，我们需要去检查一下CSS样式中是否设置以下几个标签，问题一般都会得到解决。

	white-space: normal;  // 规定段落中的文本不进行换行
	word-break: break-all;  // 允许单词中换行，在容器的最右边进行断开不会浪费控件
	word-wrap: break-word;  // 防止长单词溢出，单词内部短句

uniapp聊天室滚动到最底部

看了一大圈，各位大佬写的都好深奥，我就只挑了最简单的一个方法

大体轮廓写完后

// 定义一个值
scrollTop:99999


// 请求完数据后直接盗用这个方法即可
	scrollToBottom() {
				console.log('ss')
				setTimeout(() => {
				  this.scrollTop = this.scrollTop + 1;
				}, 500);

找了半天，头都大了，这个还是比较好改，跟容易懂的。

uniapp突然不提示了

最近写项目，uniapp代码提示突然不行了，指css特别无语，不知道是电脑用时间太长了，还是软件的问题，特坑，谁能把名字都记住，重启一下就好了，对于正在打包排队的来说真坑。

 仿qq置顶效果

 

 1.初始思路：刚开始是把数据都写到页面上了，置顶一个数组，未置顶一个数组，置顶操作是把未置顶数组找出对应的项进行删除，置顶的则是追加这一项。splice,push的运用，如果只是单纯这一个页面操作是可以的，如果是两个页面联动就不是很好做了，后面有个switch组件就不是很好做。

2.晋级版（1）：可以吧整个数据放到vuex里面方便联动

            //message.vue            
            // 置顶效果           
             tops(e,i){
				// console.log(e,i)
				// this.list.splice(i,1)
				// this.toplist.unshift(e)
				this.$store.commit('messtop',e)
			},
			// 取消置顶
			deltop(e,i){
				// this.toplist.splice(i,1)
				// this.list.push(e)
				this.$store.commit('messdeltop',e)
			},

//store
state: {
		messlist: [], // 未置顶
		messtoplist: [], //置顶
		messalllist: [] //总数据
	},
mutations: {
        // 首次遍历
        messfirst(state,data){
			data.forEach(e=>{
				e.flag = false
			})
			state.messlist = data
			state.messalllist = data
		},
        // 置顶操作
		messtop(state,data){
			let index = state.messalllist.findIndex(e=>{
				return e.id == data.id
			})
			state.messalllist[index].flag = true
			state.messtoplist = state.messalllist.filter(e=>{
				return e.flag == true
			})
			state.messlist = state.messalllist.filter(e=>{
				return e.flag == false
			})
		},
          // 未置顶操作
		messdeltop(state,data){
			let index = state.messalllist.findIndex(e=>{
				return e.id == data.id
			})
			state.messalllist[index].flag = false
			state.messtoplist = state.messalllist.filter(e=>{
				return e.flag == true
			})
			state.messlist = state.messalllist.filter(e=>{
				return e.flag == false
			})
		}
}

首先是把初始数据放进来，这个我没写，在store里面需要三个数组，一个是总数组，一个是置顶数组，一个是未置顶数组，初始是首次遍历给每一个数组里面的每一个对象加一个布尔值为false的属性表示顶数组，如果这个属性为true时表示置顶。

        然后就是置顶操作，传递过来的数据跟总数据相比获取是第几项（就是索引），然后拿着这个索引找到总数据对应第几项把添加的属性改为true,然后进行一个过滤，为true的过滤为置顶数组，为false的过滤给未置顶数组。

（主要是思路）

uniapp组件生命周期

常用 mounted

uniapp页面生命周期

常用 onload, onshow

uniapp用到的api

uni.getSystemInfoSync()  获取系统信息的同步接口

注册全局组件

//main.js
import skeletor from '@/components/user/skeletor.vue'


Vue.component('skeletor',skeletor)

动态样式

驼峰命名，需要加单位的要拼接

无数据是选用默认

picker组件运用

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器

// 报错

custom validator check failed for prop "mode".

 只需要把mode=""删除即可

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

App端如需要更丰富的相机拍照API（如直接调用前置摄像头）

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

res.tempFilePaths这一个需要上传后，得到的数据然后展示到页面，直接展示好像无效

返回的是这种格式，就算截取http以后字段直接展示也是无效，个人尝试过。

blob:http://localhost:8080/dd262173-5ccd-4314-bb60-18f261178073

 uniapp适配不同端的写法

// html中

			去授权1


//js
// #ifdef MP
		demo(){
			console.log('11')
		}
// #endif

//css
	/* #ifdef APP-VUE */ 
	.pictrue{
		width: 20rpx;
	}
	/* #endif */