NaN

uniapp 教程

(一) 创建项目

(二) 禁用ts检查

code => 首选项 => 设置 => 输入 Type Validate 取消勾选

(三) 使用 uview-ui 库

(1) 常用组件

  1. 导航栏

    • is-back 返回
    <u-navbar :is-back="true" back-text="返回" title="登录"></u-navbar>

  2. 单元格

(2) uview公共样式

  1. 公共样式路径: /uni_modules/vk-uview-ui/libs/css/common.scss
  2. 全局样式变量: uni.scss
  3. 主题样式: /uni_modules/vk-uview-ui/theme.scss

(四) 网络请求

  1. vue3在组件中使用 uni.$u.get(post)来请求数据

(五) 请求拦截器

https://vkuviewdoc.fsq.pub/js/http.html

// common/http.interceptor.js
export default {
	install: (app, options) => {
		app.config.globalProperties.$u.http.setConfig({
			baseUrl: 'http://huruqing.cn:3008',
			showLoading: true,
			// originalData: true,
			loadingMask: true,
			loadingText: '请求中...',
		})
		app.config.globalProperties.$u.http.interceptor.request = config => {
		// config.header['user-token'] = 'xxxxxx';
		return config;
		}
	}
}

(六) 项目配置 pages.json 

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/account/account",
		    "style" : {
		        "navigationBarTitleText": "",
				"navigationBarTitleText": "账号",
		        "enablePullDownRefresh": false
		    }

		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
	    ,{
            "path" : "pages/about/about",
            "style" : {
                "navigationBarTitleText": "关于",
                "enablePullDownRefresh": false
            }

        }
        ,{
            "path" : "pages/computer/computer",
            "style" : {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }
        ,{
            "path" : "pages/project/project",
            "style" : {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }

        }
        ,{
            "path" : "pages/demo/demo",
            "style" : {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }

        }
    ],
	"globalStyle": {
    // 使用自定义导航栏
		"navigationStyle":"custom",
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "仰光电影",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
    // 颜色
		"color": "#7A7E83",
    // 选中颜色
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/about/about",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "关于"
		},
		]
	}
}

(七) uview和vue3

码云地址: https://gitee.com/vk-uni/vk-uview-ui 文档地址: https://vkuviewdoc.fsq.pub/components/icon.html

  1. 安装: 在插件市场安装
  2. 使用
<template>
	<view> 
		<u-button >默认按钮</u-button>
		<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>

(八) 页面跳转和传参

(1) 页面跳转

  1. 普通页面跳转

    uni.navigateTo({url: '/pages/xxx/xxx')

  2. 跳转到tab页面

    uni.switchTab({url: '/pages/xxx/xxx')

(2) 传参

vue2请看官网 vue3传参

// a页面
uni.navigateTo({
	url: '/pages/B/B?id=1'
})

// b页面
<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	onLoad((options) => {
		console.log('接收传值：',options)
	});
</script>

(九) 全局变量

https://vkuviewdoc.fsq.pub/guide/globalVariable.html

(十) 在微信小城中打开网站

  1. 打开端口: 开发者工具 -> 设置 -> 安全 -> 服务端口 ->打开
  2. hbuilderx配置 -> 偏好设置 -> 运行配置 -> 小程序运行配置 -> 微信开发者工具路径 -> 填入微信开工具的安装目录
  3. manifest.json配置 -> 微信小程序 -> 输入appId

(十一) 跨组件通信pinia

(1) 安装依赖 

npm install pinia --save

(2) 新建目录和相关文件

  1. 新建index.js文件

    import { createPinia } from 'pinia'
const store = createPinia()
export default store

  2. 新建login.js

    import { defineStore } from 'pinia'

export const useloginStore = defineStore({
  id: 'login', // id必填，且需要唯一
  state: () => {
    return {
      userName: uni.getStorageSync('userName') ? uni.getStorageSync('userName') : '未登录'
    }
  },
  // actions 用来修改 state
    actions: {
      login(userName) {
      	uni.setStorageSync('userName', userName)
      	this.userName = userName
      },
      logout() {
      	uni.clearStorage()
      	this.userName = '已退出登录'
      }
    }
})

(3) 修改main.js 

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App,
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
// vuex
import store from './store'
// pinia
import pstore from './pinia-store'
export function createApp() {
	const app = createSSRApp(App)
	app.use(pstore)
	app.use(store)
	return {
		app
	}
}

(4) 使用 

<template>
  {{store.userName}}
		<button @click="store.login('张三')">立即登录</button>
		<button @click="store.logout()">退出登录</button>
</template>
	
<script setup>
	import {useloginStore} from '@/store';
  const store = useloginStore(); 
</script>