지식 포인트
三方组件库的安装与使用 computed 的安装与使用
새 코드 분기
master벤치마크로 삼고 gitee새 코드 분기 component를 만들고 이 분기에서 코드를 개발합니다. 명령은 다음과 같습니다.
git pull // 拉取 component 分支
git checkout component // 切换到 component 分支进行开发
1. Mind UI Weapp 컴포넌트 라이브러리
1. 컴포넌트 라이브러리 소개
이 프로젝트에 사용된 컴포넌트 라이브러리는 Mind UI Weapp이 프로젝트를 위해 제가 개발한 네이티브 UI컴포넌트 npm설치 방법을 지원합니다.
- 구성 요소 라이브러리 소스 코드:
https://github.com/NameLi/mind-ui-weapp - 구성요소 라이브러리 문서:
https://mind-ui-weapp.ixook.com
2. 컴포넌트 라이브러리 설치
-
컴포넌트 라이브러리 설치
npm i mind-ui-weapp -S* 컴포넌트 라이브러리가 빌드 및 설치되면node_modules폴더 됩니다 WeChat Developer Tools의 Local Settings 를 클릭하고 npm 모듈 사용 옵션을 선택한 다음 상단 메뉴 Tools -> Build npm을 클릭합니다 . 빌드가 완료되면miniprogram_npm디렉토리가 생성되며 이 디렉토리에서 빌드된 컴포넌트 라이브러리 파일 패키지를 볼 수 있으며 컴포넌트를 가져와서 사용할 수 있습니다. -
app.json전역 등록은 파일usingComponents의 개체 아래에 있는 등록을 가져와 전역적으로 사용할 수 있습니다 . 일반적으로 사용 빈도가 높은 구성 요소는 전역적으로 등록됩니다.{"usingComponents": {"m-button": "mind-ui-weapp/button/index",}}* 페이지/컴포넌트 등록 페이지 또는 컴포넌트의xxx.json파일 (button컴포넌트를 예로 들어)"usingComponents": {"m-button": "/mind-ui-weapp/button/index"}하여 템플릿에서 사용<m-button type="primary">按钮</m-button>* 화면border.wxss아래 테두리는 컴포넌트 라이브러리에 내장되어 있으며 , 스타일은 의사 및 . 템플릿의 스타일이 이미 의사 클래스를 사용하는 경우 요소 레이어를 추가하여 스타일 충돌을 덮어쓰지 않도록 외부로 래핑하십시오. *스타일 재정의*의 모든 구성 요소 가 활성화 되고 외부 페이지 스타일은 구성 요소 내부 스타일을 직접 재정의할 수 있으며 구성 요소 스타일 네임스페이스는 입니다 . 프로젝트의 스타일 이름과 충돌하지 않도록 하십시오. * 사용자 정의 구성 요소 스타일을 재정의해야 하는 경우 활성화해야 합니다.Retina1pxcss::before::aftertransform/* app.wxss 或 app.scss */@import "miniprogram_npm/mind-ui-weapp/assets/style/border.wxss";Mind UI WeappaddGlobalClass: truem-Mind UI WeappstyleIsolation: 'shared' -
JS 메서드 구성 요소의 사용은
JS현재toastmessagemodal호출되는 세 가지 유형의 구성 요소를 지원합니다. 페이지나 컴포넌트 파일에 컴포넌트 코드를 도입할 수 있지만 그래도 전역 속성에 임포트 하여.js마운트 하고 컴포넌트를 에서 전역 컴포넌트로 등록하는 것이 좋습니다. 경로는 상대 위치를 사용하는 데 문제가 있습니다. 어느 페이지나 컴포넌트 에서 사용할 경우 해당 컴포넌트를 페이지 템플릿에 작성해야 합니다 참고: 컴포넌트에서 사용하는 경우 해당 컴포넌트를 소개하는 페이지 템플릿에 해당 컴포넌트를 작성해야 합니다. 유효하지 않다. ### 2. 플러그인importapp.jswxapp.json// app.jsimport Toast from 'mind-ui-weapp/toast/toast'import Message from 'mind-ui-weapp/message/message'import Modal from 'mind-ui-weapp/modal/modal'wx.$toast = Toast; wx.$message = Message;wx.$modal = Modal;jswx.$toast('simple toast');<m-toast id="toast" />miniprogram-computed
1. miniprogram-computed소개
플러그인은 공식적으로 WeChat 애플릿에서 제공되며 공식 설명은 다음과 같습니다. 애플릿 사용자 지정 구성 요소의 확장 구현 behavior, 계산 속성 computed및 watch수신기. 데이터 또는 속성이 변경되면 computed필드 되고 watch수신기가 트리거됩니다. 평신도의 용어로 , vue 의 구현 과 유사 computed합니다 . 차이점은 에서 사용할 수 없고 값을 매개변수 것입니다. 에 대한 지원 이 없습니다 .watchvuecomputedthisdatacomputedwatchVuehandle
2. miniprogram-computed설치
npm i miniprogram-computed -S
설치가 완료되면 개발자 도구 npm 构建를 사용하여 사용해야 합니다.
3. miniprogram-computed사용
const = require('miniprogram-computed').behavior; // 引入计算属性组件
Component({behaviors: [computedBehavior],// 注入 mixins...
})
computedBehavior매번 사용할 때마다 도입되는 것을 피하기 위해 .app.jswx
// app.js
const computedBehavior = require('miniprogram-computed').behavior;
wx.computedBehavior = computedBehavior;
사용:
// 组件中
Component({behaviors: [wx.computedBehavior],// ...
})
// 页面中
Page({behaviors: [wx.computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b;}},// ...
})
3. 힘내 설정
설치된 타사 패키지 파일은 호스팅할 필요 git가 없으므로 .gitignore다음에서 관련 파일을 무시해야 합니다.
# .gitignore 文件中新增以下文件名称
package-lock.json// 本地包管理文件
/node_modules// 三方包
/miniprogram_npm // npm 构建后的三方包
네이티브 코드를 온라인으로 제출:
git add . // 将本地代码添加到缓存区
git commit -m "UI 组件库与 computed 组件的安装与使用"// 将缓存区代码添加到本地仓库
git pull // 拉取远程代码
git push // 将代码提交到远程仓库
구성 요소 분기 코드를 마스터로 병합
git checkout master // 切换到主分支
git merge component // 将 copmponent 分支代码合并到当前分支
git push// 将合并后的代码提交到远程分支
마침내
위는 본 프로젝트에 사용된 3자 컴포넌트 라이브러리에 대한 소개이며, 자세한 사용법은 차후 개발 코드에 반영하도록 하겠습니다.
마침내
프런트 엔드 정보 패키지는 모두를 위해 준비되어 있습니다. 54권, 2.57G 프론트엔드 관련 전자책, "프론트엔드 인터뷰 모음(답변 및 분석 포함)", 어렵고 핵심적인 지식 비디오 자습서(풀 세트)가 포함되어 있습니다.
도움이 필요한 친구는 아래 카드를 클릭하여 무료로 받고 공유할 수 있습니다.