目录
一、路由与页面跳转
1、tabar与普通页面跳转例子
pages.json配置页面
javascript
{
"pages": [{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "关于",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}, {
"path": "pages/prompt/prompt",
"style": {
"navigationBarTitleText": "提示框",
"enablePullDownRefresh": false
}
}, {
"path": "pages/swiper/swiper",
"style": {
"navigationBarTitleText": "滑块",
"enablePullDownRefresh": false
}
}, {
"path": "pages/form/form",
"style": {
"navigationBarTitleText": "表单",
"enablePullDownRefresh": false
}
}, {
"path": "pages/router/router",
"style": {
"navigationBarTitleText": "路由",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "全局",
"navigationBarBackgroundColor": "#000000",
"backgroundColor": "#ffffff"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#1296db",
"borderStyle": "black",
"backgroundColor": "#000000",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "/static/首页2.png",
"selectedIconPath": "/static/首页.png",
"text": "首页"
}, {
"pagePath": "pages/about/about",
"iconPath": "/static/关于2.png",
"selectedIconPath": "/static/关于.png",
"text": "关于"
}, {
"pagePath": "pages/form/form",
"iconPath": "/static/表单 (1).png",
"selectedIconPath": "/static/表单.png",
"text": "表单"
}, {
"pagePath": "pages/router/router",
"iconPath": "/static/路由器组2.png",
"selectedIconPath": "/static/路由.png",
"text": "路由"
}]
},
"uniIdRouter": {}
}
router.vue文件,模拟页面跳转
javascript
<template>
<view>
<button @click="toIndex">tabar跳转</button>
<button @click="toSwiper">普通页面跳转</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
toIndex(){
uni.switchTab({
url:"/pages/index/index"
})
},
toSwiper(){
uni.navigateTo({
url:"/pages/swiper/swiper"
})
}
}
}
</script>
2、navigateTo
(1)跳转非tabBar页面的url路径,路径可以带参数
格式:path?key=value&key2=value2
path:要跳转页面的路径
javascript
toSwiper(){
uni.navigateTo({
url:"/pages/swiper/swiper?name=sxx"
})
}
(2)获取参数
在跳转到的页面的onLoad函数获取
javascript
onLoad(option) {
console.log(option);
},
3、switchTab
(1)跳转tabBar页面的url路径(需在 pages.json 的 tabBar 字段定义的页面),路径不能带参数
(2)需要的参数可以写到全局变量去获取
二、vue组件
1、传统vue组件的使用
(1)创建components文件夹=》创建.vue组件文件
(2)在需要的页面引入、注册
index.vue
javascript
<template>
<view class="content">
<header-cpn></header-cpn>
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
// 注意路径components前没有/
// 命名至少两个词组成,以小驼峰的形式
import headerCpn from 'components/header.vue'
export default {
components:{
headerCpn
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
console.log(getApp().globalData);
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
2、easycom
(1)说明
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件
easycom将其精简为一步
(2)使用
只要组件安装在项目的 components 目录下,并符合components/组件名称/组件名称.vue
通过插件库引入到components文件下然后直接引入即可
DCloud 插件市场DCloud 插件市场https://ext.dcloud.net.cn/可以看文件的命名和文档来决定引入标签的名字
三、uView组件库
1、安装配置
(1)打开工程终端
javascript
npm install uview-ui@1.8.8
如果根目录又没有package.json文件,先执行以下命令
javascriptnpm init -y
(2)uView依赖SCSS,必须要安装此插件,否则无法正常运行
查看是否安装scss插件:点击工具=》插件安装
①前往插件市场安装
②终端命令安装
javascript
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
2、引入配置
(1)主JS库:在项目根目录中的main.js
中,引入并使用uView的JS库
javascript
// main.js
import uView from "uview-ui";
Vue.use(uView);
注意要放在
import Vue
之后
(2)全局SCSS:引入uView主题文件
javascript
/* uni.scss */
@import 'uview-ui/theme.scss';
(3)引入基础样式
在
App.vue
中首行的位置引入,注意给style标签加入lang="scss"属性
javascript
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
(4) 配置easycom组件模式
在项目根目录的
pages.json
中,配置easycom注意:
①只有一个
easycom
字段②配置完要重启HX或重新编译项目
javascript
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
3、使用
(1)按钮
html
<template>
<view>
头部组件
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>
</view>
</template>
四、Vuex
1、认识
uni-app 内置了Vuex
(1)使用场景
- 当一个组件需要多次派发事件时。例如购物车数量加减。
- 跨组件共享数据、跨页面共享数据。例如订单状态更新。
- 需要持久化的数据。例如登录后用户的信息。
- 当您需要开发中大型应用,适合复杂的多模块多页面的数据交互,考虑如何更好地在组件外部管理状态时
(2)规则
-
应用层级的状态应该集中到单个
store
对象中。 -
提交
mutation
是更改状态的唯一方法,并且这个过程是同步的。 -
异步逻辑都应该封装到
action
里面
2、state基本使用
(1)在项目根目录下,新建 store
目录=》新建 index.js
文件
javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
state:{
msg:'存放的信息'
},
mutations:{},
actions:{},
getters:{}
})
export default store
(2)在 main.js
中导入文件
javascript
import store from './store'
const app = new Vue({
store,
...App
})
(3)获取数据
javascript
<template>
<view>
<button @click="toIndex">tabar跳转</button>
<button @click="toSwiper">普通页面跳转</button>
<text>{{$store.state.msg}}</text>
</view>
</template>
3、mapState使用
(1)当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题,可以使用 mapState 辅助函数 帮助我们生成计算属性
javascript
<template>
<view>
<text>{{$store.state.msg}}</text>
<text>{{userName}}</text>
</view>
</template>
<script>
import { mapState } from 'vuex'//引入mapState
export default {
computed: mapState({
// 从state中拿到数据 箭头函数可使代码更简练
userName: state => state.userName,
})
}
</script>
(2)当映射的计算属性名称与 state
的子节点名称相同时,可以给 mapState
传一个字符串数组
javascript
<template>
<view>
<text>{{$store.state.msg}}</text>
<text>{{userName}}</text>
<view>
{{msg}}{{userName}}
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'//引入mapState
export default {
computed: mapState(['msg','userName'])
}
</script>
五、网络请求
这里小编用天行API为实例
1、封装请求
创建utils文件夹=》创建request.js文件
javascript
const instance = (url,data,header,callback) => {
const BASE_URL = "https://apis.tianapi.com"
uni.request({
url: BASE_URL + url,
data,
header,
success: callback
});
}
export default instance;
2、细化每个接口的配置
javascript
import instance from "../utils/request.js"
// 获取用户信息(GET)
export function getTianGou(data,callback){
return instance(
'/tiangou/index',
data,
{},
callback
)
}
3、实例调用
javascript
<script>
import {
getTianGou
} from "../../api/user.js"
import instance from "../../utils/request.js"
export default {
onLoad() {
// 跳过第2步,直接调用
instance("/tiangou/index", {
key: ''//data传参
}, {}, (res) => {
console.log(res);
}),
// 细化接口配置后的调用
getTianGou({
key: ''//data传参
}, (res) => {
console.log(res);
})
},
}
</script>
六、媒体上传图片
1、uni.chooseImage(OBJECT)
参数介绍:
①count:最多可以选择的图片张数,默认9
②sizeType:original 原图,compressed 压缩图,默认二者都有
javascript
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
2、代码实例
html
<template>
<view>
<!-- 媒体图片 -->
<button type="default" @click="upImage">上传图片</button>
{{imgArr}}
<image v-for="item in imgArr" :key="item" :src="item" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
imgArr:[]
}
},
methods: {
// 上传图片事件
upImage(){
uni.chooseImage({
count:6,
success:res=> {
console.log(res.tempFilePaths);
console.log(this.imgArr);
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>