uni-app에서 전역 탄성 레이어 구성 요소를 개발하는 방법은 무엇입니까? 다음 글에서는 uni-app에서 전역 Elastic Layer 구성 요소를 구현하는 방법을 예제를 통해 소개하겠습니다. 도움이 되길 바랍니다.
회사에는 uni-app 프레임워크를 사용하여 작성된 앱이 있습니다. 내부의 탄력적 레이어는 기본적으로 공식 uni.showModal 및 기타 API를 사용하여 기기의 기본 탄력적 레이어처럼 작동합니다. 고객의 요청에 따라 디자인된 스타일로 변경이 필요하여 이러한 컴포넌트를 구현하기 시작했습니다.
탄성 레이어에서 자주 사용하는 방법과 방법에 따라 필요한 속성과 방법을 대략적으로 나열할 수 있습니다.
- 유형:
alert/confirm 등 alert/confirm等
- 展示图标 icon
- 展示内容 content
- 可以api调用
- 支持
promise，可以使用$api.xx().then
前几项就很好做，就在data中定义好字段，外层直接拿官方的轮子uni-popup，这样少写一些控制弹出的逻辑（懒的），这样大致结构就写好了
// template部分
<uni-popup ref="popup" :maskClick="maskClick">
<view class="st-layer" :style="{ width: width }">
<view class="st-layer__content">
<!-- #ifndef APP-NVUE -->
<text class="st-layer__icon" :class="option.iconClass || getIconClass()"
v-if="option.type !== 'none' && option.showIcon"></text>
<!-- #endif -->
<view class="st-layer__msg" v-if="option.msg">
<text>{{ option.msg }}</text>
</view>
</view>
<view class="st-layer__footer" :class="{'is-reverse-cofirmcancel' : isReverseConfirmCancel}" v-if="option.showConfirmButton || option.showCancelButton">
<view class="st-layer__footer__btn st-layer__footer__btn--confirm" @tap.stop="confirmClick"
v-if="option.showConfirmButton"><text>确认</text></view>
<view class="st-layer__footer__btn st-layer__footer__btn--cancel" @tap.stop="cancelClick"
v-if="option.showCancelButton"><text>取消</text></view>
</view>
</view>
</uni-popup>로그인 후 복사
然后js部分先简单实现了一些open和close方法
data() {
return {
option: {}
}
},
methods: {
open(option) {
let defaultOption = {
showCancelButton: false, // 是否显示取消按钮
cancelButtonText: '取消', // 取消按钮文字
showConfirmButton: true, // 是否显示确认按钮
confirmButtonText: '取消', // 确认按钮文字
showIcon: true, // 是否显示图标
iconClass: null, // 图标class自定义
type: 'none', // 类型
confirm: null, // 点击确认后的逻辑
cancel: null, // 点击取消后的逻辑
msg: ''
}
this.option = Object.assign({}, defaultOption, option)
this.$refs.popup.open()
},
close() {
this.$refs.popup.close()
},
confirmClick() {
const confirmHandler = this.option.confirm
if (confirmHandler && typeof confirmHandler === 'function') {
confirmHandler()
}
this.close()
this.$emit('confirm')
},
cancelClick() {
const cancelHandler = this.option.cancel
if (cancelHandler && typeof cancelHandler === 'function') {
cancelHandler()
}
this.close()
this.$emit('cancel')
}
}로그인 후 복사
目前在其他页面已经可以使用
// test.vue 可以使用uni-app的 [easycom组件规范](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83)，不用写import语句
<st-layer ref="stLayer"></st-layer>
// js部分
this.$refs.stLayer.open({
msg: '测试',
confirm: () => {
console.log('点击了确认')
},
cancel: () => {
console.log('点击了取消')
}
})로그인 후 복사
现在基本功能已经实现，但是有人要说了，这样调用不方便，我想这样调用
open(msg).then(() => {
console.log('点击了确认')
}).catch(() => {
console.log('点击了取消')
})로그인 후 복사
那如何实现promise化呢？最简单的方法就是让open方法返回一个promise。如何点击确认或取消的时候进入then方法呢，看下面的写法
...
open() {
return new promise((reoslve, reject) => {
...
this.option.confirm = this.option.confirm || function confirmResolve () {
resolve()
}
this.option.cancel = this.option.cancel || function cancelReject () {
reject()
}
})
}
...로그인 후 복사
如果要封装其他单独的方法，比如confirm之类，可以在open基础上扩展：
confirm(msg, option = {}) {
if (typeof msg === 'object') {
option = msg
} else {
option.msg = msg
}
return this.open({
...option,
showCancelButton: true,
type: 'confirm'
})
}
// 调用方式
this.$refs.stLayer.confirm('是否确认？').then().catch()로그인 후 복사
这样基本的弹层组件已经实现。下面也就是最后一步全局使用原有vue项目写的layer组件要全局使用通常是采用下面的方法注入到页面中
import main from './main.vue'
const LayerConstructor = vue.extend(main)
const initInstance = () => {
instance = new LayerConstructor({
el: document.createElement('div')
})
instance.callback = defaultCallback
document.getElementById('app').appendChild(instance.$el)
}로그인 후 복사
直接拉过来用，结果报错，提示error: document is undefined，才想起uni-app跟普通vue项目的有一个很大的区别，在它的运行原理中有介绍：
uni-app 逻辑层和视图层分离，在非H5端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。虽然开发者在一个vue页面里写js和css，但其实，编译时就已经将它们拆分了。逻辑层是运行在一个独立的jscore里的，它不依赖于本机的webview，所以一方面它没有浏览器兼容问题，可以在Android4.4上跑es6代码，另一方面，它无法运行window、document、navigator、localstorage等浏览器专用的js API。
所以这种注册全局的方法已经不可用。那该如何在uni-app아이콘 아이콘 표시 vue-inset-loader,实现原理就是获取sfc模板内容，在指定位置插入自定义内容(也就是需要全局的组件)，使用方式如下：
// 第一步
npm install vue-inset-loader --save-dev
// 第二步 在vue.config.js(hbuilderx创建的项目没有的话新建一个)中注入loader
module.export = {
chainWebpack: config => {
// 超级全局组件
config.module
.rule('vue')
.test(/\.vue$/)
.use()
.loader(path.resolve(__dirname, "./node_modules/vue-inset-loader"))
.end()
}
}
// 支持自定义pages.json文件路径
// options: {
// pagesPath: path.resolve(__dirname,'./src/pages.json')
// }
// 第三步 pages.json配置文件中添加insetLoader
"insetLoader": {
"config":{
"confirm": "<BaseConfirm ref='confirm'></BaseConfirm>",
"abc": "<BaseAbc ref='BaseAbc'></BaseAbc>"
},
// 全局配置
"label":["confirm"],
"rootEle":"div"
}로그인 후 복사
配置说明
config (default: {})
定义标签名称和内容的键值对
label(default: [])
需要全局引入的标签，打包后会在所有页面引入此标签
-
rootEle(default: "div")
根元素的标签类型，缺省值为div，支持正则，比如匹配任意标签 ".*"
label 和 rootEle
콘텐츠 표시
api에 의해 호출 가능
promise 지원,
$api.xx().then 사용 가능
처음 몇 가지 항목은 쉽습니다. data 에서 필드를 정의하고 외부 레이어의 공식 휠 uni-popup을 직접 사용하면 팝업 제어 로직을 작성하는 시간이 절약됩니다. (게으른) 그러면 일반적인 구조가 작성됩니다rrreee 그러면 js 부분은 먼저 간단히 열기 및 닫기 메소드를 구현했습니다
rrreee🎜이제 다른 페이지에서도 사용할 수 있습니다🎜rrreee🎜이제 기본 기능이 구현되었지만 누군가 이렇게 부르면 불편하다고 하더군요🎜rrreee🎜그
promise는 어떻게 구현하나요? 가장 간단한 방법은 open 메소드가
promise를 반환하도록 하는 것입니다. 확인이나 취소 클릭시
then 메소드 입력은 어떻게 하나요? 아래 작성방법을 참고하세요🎜rrreee🎜
확인 등 별도의 다른 메소드를 캡슐화하고 싶다면 열면 됩니다. the basic Upper Extension: 🎜rrreee🎜 이렇게 기본 Elastic Layer 컴포넌트가 구현되었습니다. 다음은 마지막 단계
전역 사용입니다. 원래 vue 프로젝트에 작성된 레이어 구성 요소를 전역적으로 사용해야 하는 경우 일반적으로 다음 방법을 사용하여 페이지에 삽입됩니다. 🎜rrreee🎜 직접 끌어서 그것을 사용하면 결과는 오류이고
error: document is undefine 메시지가 표시됩니다. 그런 다음
uni-app이 도입된 일반 vue 프로젝트와 매우 다르다는 것을 기억했습니다. 작동 원리: 🎜🎜🎜
uni -app 로직 레이어와 뷰 레이어는 H5가 아닌 쪽에서 실행될 때 로직 레이어와 뷰의 두 부분으로 나뉩니다. 층. 로직 레이어는 비즈니스 로직 실행, 즉 js 코드 실행을 담당하고, 뷰 레이어는 페이지 렌더링을 담당합니다. 개발자가 vue 페이지에 js와 css를 작성하지만 실제로는 컴파일 중에 분할됩니다. 로직 레이어는 독립적인 jscore에서 실행됩니다. 로컬 웹뷰에 의존하지 않으므로 브라우저 호환성 문제가 없으며 Android 4.4에서 es6 코드를 실행할 수 있습니다. 반면에 창, 문서, 네비게이터, localstorage 및 기타 브라우저별 js API. 🎜🎜🎜이러한 글로벌 등록 방법은 더 이상 사용할 수 없습니다. 그렇다면
uni-app에서는 어떻게 구현하나요?
공식 포럼을 살펴보니 loader🎜
vue-inset-loader🎜의 구현을 발견했습니다. 구현 원칙은 sfc 템플릿 콘텐츠를 가져와서 사용자 정의 콘텐츠(즉, 전역 구성 요소)를 삽입하는 것입니다. 지정된 위치를 지정하고 사용합니다. 방법은 다음과 같습니다. 🎜rrreee
구성 지침
🎜🎜🎜
config(기본값:
{} )
라벨 이름과 콘텐츠를 정의하는 키-값 쌍 🎜🎜🎜🎜
라벨(기본값:
[])
라벨 전역적으로 도입되어야 하는 태그는 패키징 후 모든 라벨에 포함됩니다. 페이지에서 이 태그를 소개합니다🎜🎜🎜🎜
rootEle(기본값:
"div")
루트 요소의 태그 유형, 기본값은 div이며 모든 레이블 일치 ".*" 🎜🎜
label 및
rootEle 지원 구성과 같은 정규 표현식을 지원합니다. 별도의 페이지 스타일, 전역 구성보다 우선순위가 높습니다. 🎜🎜🎜🎜여기서 구성 요소는 전역적으로 사용할 수 있습니다. 사용하기 위해 각 페이지에 태그를 작성할 필요는 없습니다. 🎜🎜나중에 사용량에 따라 최적화할 수 있습니다. 레벨이 제한되어 있으므로 모든 사람의 조언을 환영합니다. 🎜🎜추천: "🎜uniapp 튜토리얼🎜"🎜
위 내용은 uni-app에서 전역 탄성 계층 구성 요소를 개발하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
