小程序-uniapp:uni-app-base 项目基础配置及使用,开箱可用(二)

简介: 小程序-uniapp:uni-app-base 项目基础配置及使用,开箱可用(二)

七、配置vuex

7.1、安装vuex

pnpm add vuex

7.2、src/shime-uni.d.ts 扩展useStore声明

// 扩展useStore声明
import { StateType } from '@/store/index.d'
import { InjectionKey } from 'vue'
import { Store } from 'vuex'
declare module "vue" {
  type Hooks = App.AppInstance & Page.PageInstance;
  interface ComponentCustomOptions extends Hooks {
    // 这里扩展this.$store,还可以在这里对this添加其他的声明
    $store: Store<StateType>
  }
}
declare module 'vuex' {
  export function useStore<S = StateType>(injectKey?: InjectionKey<Store<S>> | string): Store<S>
}

7.3、定义store

7.3.1、src/store/index.ts

import { createStore } from 'vuex'
import { StateType } from './index.d'
// 批量引入其他module,
const files = import.meta.globEager('./modules/*.ts') // vite的写法
const keys = Object.keys(files)
const modules: any = {}
keys.forEach((key) => {
    if (Object.prototype.hasOwnProperty.call(files, key)) {
        // 提取文件的名字作为模块名
        modules[key.replace(/(\.\/modules\/|\.ts)/g, '')] = files[key].default
    }
})
/** 全局的state,这个看自己的需求,如果有用到就在createStore中添加 */
export interface rootStateType {}
export default createStore<StateType>({
    modules
})

7.3.2、src/store/index.d.ts

import { rootStateType } from './index'
import { systemStateType } from './modules/system'
export interface StateType extends rootStateType {
    system: systemStateType
}

7.3.3、src/store/modules/system.ts

import { Module } from 'vuex'
import { rootStateType } from '@/store'
export interface systemStateType {
    title: string
}
const systemModule: Module<systemStateType, rootStateType> = {
    namespaced: true,
    state: () => ({
        title: '你好,我是snow'
    })
}
export default systemModule

7.3.4、src/main.ts 挂载

import { createSSRApp } from "vue";
import App from "./App.vue";
import store from './store'
import '../mock'
export function createApp() {
  const app = createSSRApp(App).use(store);
  return {
    app,
  };
}

7.3.5、video-player文件使用

<view>{{ title }}</view>
import { useStore } from 'vuex'
const store = useStore()
const title = ref(store.state.system.title)

7.3.6、 验证成功

八、使用sass

8.1、安装

pnpm add sass

8.2、src/styles/global.scss定义全局变量

$bg-color: #f5f5f5;

8.3、 vite.config.ts引入

css: {
    // css预处理器
    preprocessorOptions: {
        scss: {
            // 因为uni.scss可以全局使用,这里根据自己的需求调整
            additionalData: '@import "./src/styles/global.scss";'
        }
    }
  },

8.4、页面使用

验证成功

九、配置mockjs

十、配置头部信息

10.1、src/pages.json文件定义

pages.json 页面路由 | uni-app官网

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页", // title
        "navigationBarTextStyle": "white", // 导航栏标题颜色 black、white两种颜色
        "navigationBarBackgroundColor": "#FF0000", // 导航栏背景色
        "enablePullDownRefresh": "false" ,// 是否开启下拉刷新
        "backgroundColor": "#F8F8F8", // 窗口的背景色
        "navigationStyle":"default" , // 导航栏样式,仅支持 default/customm,开启 custom 后,所有窗口均无导航栏
        "usingComponents": { // 引用小程序组件
            "my-component": "/path/to/my-component"
        }
  }
},

1.02、在业务页面onLoad声明周期,函数式定义

onLoad() {
  uni.setNavigationBarTitle({
    title:'个人中心'
  })
}

十一、配置tabbar

十二、uniapp组件

序号 组件 组件名 详细 (uni-app官网)
1 视图容器 view

视图容器。

类似于传统html中的div,用于包裹各种元素内容。

如果使用nvue,则需注意,包裹文字应该使用<text>组件。

2 scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。

3 swiper

滑块视图容器。

一般用于左右滑动或上下滑动,比如banner轮播图。

注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。

4 match-media

media query 匹配检测节点。

类似于网页开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。

例如在match-media组件中放置一个侧边栏,媒体查询规则设置为宽屏才显示,就可以实现在PC宽屏显示该侧边栏,而在手机窄屏中不显示侧边栏的效果。

5 movable-area

可拖动区域

由于app和小程序的架构是逻辑层与视图层分离,使用js监听拖动时会引发逻辑层和视图层的频繁通讯,影响性能。为了方便高性能的实现拖动,平台特封装了movable-area组件。

movable-area指代可拖动的范围,在其中内嵌movable-view组件用于指示可拖动的区域。

即手指/鼠标按住movable-view拖动或双指缩放,但拖不出movable-area规定的范围。

当然也可以不拖动,而使用代码来触发movable-viewmovable-area里的移动缩放。

movable-view的规范另见movable-view

6 movable-view

可移动的视图容器,在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。

7 cover-view

覆盖在原生组件上的文本视图。

app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。

8 cover-image 覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
9 基础内容 icon 图标。
10 text

文本组件。

用于包裹文本内容。

11 rich-text

富文本。

支持默认事件,包括:click、touchstart、touchmove、touchcancel、touchend、longpress。

12 progress 进度条。
13 表单组件 button 按钮。
14 checkbox 多项选择器,内部由多个 checkbox 组成。
15 editor

富文本编辑器,可以对图片、文字格式进行编辑和混排。

在web开发时,可以使用contenteditable来实现内容编辑。但这是一个dom API,在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能,并且在uni-app的H5平台也提供了兼容。从技术本质来讲,这个组件仍然运行在视图层webview中,利用的也是浏览器的contenteditable功能。

编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储。

通过setContents接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在应用内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入这段样式,并维护<ql-container><ql-editor></ql-editor></ql-container>的结构,参考:使用 editor 组件导出的 html

图片控件仅初始化时设置有效。

16 form

表单,将组件内的用户输入的<switch><input><checkbox><slider><radio><picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

17 input

单行输入框。

html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:radio组件checkbox组件时间选择日期选择图片选择视频选择多媒体文件选择(含图片视频)通用文件选择

18 label

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。

for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有:<button>, <checkbox>, <radio>, <switch>

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

嵌入页面的滚动选择器。

相对于picker组件,picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时,往往需要使用picker-view

21 radio 单项选择器,内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。
22 slider 滑动选择器。
23 switch 开关选择器。
24 textarea 多行输入框。
25 路由与页面跳转 navigator

页面跳转。

该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

该组件的功能有API方式,另见:uni.navigateTo(OBJECT) | uni-app官网

26 媒体组件 animation-view Lottie动画组件,动画资源参考Lottie官方链接
27 audio 音频。
28 camera 页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
29 image 图片。
30 video 视频播放组件。
31 live-player

实时音视频播放,也称直播拉流。

使用live-player 组件需注意:如果发布到小程序,需要先通过各家小程序的审核。指定类目的小程序才能使用(微信小程序类目百度小程序类目),审核通过后在各家小程序管理后台自助开通该组件权限。

32 live-pusher 实时音视频录制,也称直播推流。
33 地图 map

地图组件。

地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。

34 画布 canvas

画布。

35 webview web-view web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。
36 拓展组件(uni-ui) uni-app官网 uni-app官网
相关文章
|
2月前
|
移动开发 开发框架 小程序
uni-app:demo&媒体文件&配置全局的变量(三)
uni-app 是一个使用 Vue.js 构建多平台应用的框架,支持微信小程序、支付宝小程序、H5 和 App 等平台。本文档介绍了 uni-app 的基本用法,包括登录示例、媒体文件处理、全局变量配置和 Vuex 状态管理的实现。通过这些示例,开发者可以快速上手并高效开发多平台应用。
|
2月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
138 1
uniapp一个人开发APP关键步骤和考虑因素
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
292 3
|
3月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
2月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
79 1
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
42 1
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
46 2
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
31 0
|
2月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
80 0