uniapp scaffold 다운로드 - uniapp scaffold 소스 코드 다운로드

uniapp scaffold

AI 소스 코드

1.0.0

다운로드

소개

uniapp-scaffold는 Vue 2.x를 기반으로 하는 크로스 플랫폼 애플릿 스캐폴딩 및 플러그인 템플릿으로, 사용자 정의 요청 라이브러리, 유틸리티 및 테마를 포함하여 20개 이상의 기본 및 비즈니스 구성 요소(WeChat 시각적 사양 기반)를 제공합니다. , vuex 글로벌 데이터 관리 및 국제 구성은 모두 비즈니스를 신속하게 구현할 수 있는 플러그형 애플리케이션 프레임워크에 통합되어 있습니다.

특징:

완전함: 완전한 구성 요소 및 도구 라이브러리, 빌딩 블록 개발 및 각 끝의 작은 프로그램 출력(기본 방향) + h5 + 앱
단순함: Vue 2로 작성된 코드 세트입니다.

기술 아키텍처

uni-app, Vue, SASS, Vue CLI, Webpack, miniprogram-ci 등

아사코 디자인 디자인 언어

모바일 시나리오를 위해 생성된 맞춤형 구성 요소 라이브러리(30개 이상)

사진관	UED

누가 사용하고 있나요(일부 작동)

아사코 스튜디오：

시각 이미징 및 엔지니어링 연구를 전담하는 실험실이자 스튜디오인 Asako Art Studio(QR 코드를 스캔하거나 아래 WeChat에서 검색)

미니프로그램	집	창의적인	공장	에 대한

아사코 그림자 신문:

한 페이지 달력 • 아름다운 배경화면 라이브러리 RSS

AI가 매일 기분 좋게 동행할 글로벌 시각 및 사진 예술을 선택합니까?

미니프로그램	집	에 대한	창조자	AI데일리

아사코의 집:

절묘한 삶과 DIY 집에 대한 독서를 즐기십니까?

미니프로그램	집	에 대한

아사코 디자인 :

재능(표준화)과 외모(전문성)를 결합한 사용자 경험 디자인 언어

미니프로그램	집	구성요소	에 대한

스포츠 어시스턴트 유지

창고	바이두 버전	헤드라인 버전	위챗 버전
인트라넷

더 추가 예정

개발 | 개발 자세

VSCode + 미니 프로그램 IDE + HbuilderX (옵션, 디렉토리를 수정하여 cli로 전환 가능) VSCode 개발, HbuilderX 실시간 컴파일(시각적 메뉴 조작), 미니 프로그램 IDE 실시간 미리보기 cd projectName => git clone this project => 이 프로젝트 사업 개발을 기반으로;

① HbuilderX IDE 방식

도구, 먼저 각 플랫폼의 개발 도구(IDE)를 다운로드하세요 https://uniapp.dcloud.io/quickstart
Hbuilder에서 현재 프로젝트(uni-app 유형)를 가져오고, 현재 구성인 매니페스트.json 및 Pages.json을 수정 또는 업데이트합니다. (특히 해당 플랫폼의 appid 추가에 주의하고, 요청 및 downloadFile 도메인 이름을 구성합니다. 개발자 백엔드);
플러그인을 구성합니다. 메뉴 표시줄에서 플러그인 관리를 클릭하여 현재 프로젝트(scss, babel, es6 등)에 필요한 플러그인 및 로더, Yarn(특별한 순서 없이 3단계)을 설치합니다.
해당 개발 플랫폼에 대한 메뉴 표시줄 [실행] 현재 IDE에 익숙하지 않은 경우 동기 개발 및 실시간 컴파일을 위해 VSCode로 전환할 수 있습니다.

② CLI 엔지니어링 방식

지속적 통합 참조 문서: https://ask.dcloud.net.cn/article/35750

HBuilderX 프로젝트가 vue-cli 프로젝트로 변환되었습니다.

vue-cli 버전은 더 자주 업데이트됩니다. 일부 새로운 기능을 사용해야 하는 경우 vue-cli 프로젝트로 변환할 수 있습니다.

단계:

HBuilderX 프로젝트의 파일(unpackage 및 node_modules 디렉터리 제외)을 vue-cli 프로젝트의 src 디렉터리에 복사합니다.
vue-cli 프로젝트에서 npm 종속성을 다시 설치합니다(이전에 npm 종속성을 사용한 경우).

게시 |

미니 프로그램 방향은 메인 패키지, 서브 패키지, 플러그인(후속 지원) 제품이 다르며, h5 방향은 라우팅 모드(히스토리, 해시) 구성이 다릅니다.

① HbuilderX IDE 방식

1: 메인 패키지 모드

"게시" 메뉴를 클릭하고 해당 미니 프로그램 플랫폼이나 브라우저로 이동합니다.

2: 하위 패키지 모드 HBuilderX 3.1.0+에서 릴리스 애플릿의 메뉴를 클릭하고 릴리스 혼합 하위 패키지를 확인한 후 하위 패키지 디렉터리 이름을 입력하고 패키징한 후 해당 디렉터리 파일을 복사합니다. 기존 애플릿에 직접 추가해야 합니다. 페이지 또는 원본 미니 프로그램 app.json의 하청 구성에 참고하세요.

하이브리드 하위 패키지를 게시한 후 처음으로 하위 패키지에 들어갈 때 App.vue의 onLaunch가 트리거됩니다(HBuilderX 3.1.1+).
개발 중에는 리소스(그림, CSS, js 등)와 페이지의 절대 경로를 상대 경로로 조정해야 합니다. 그렇지 않으면 네이티브 미니 프로그램으로 패키징할 때 경로 검색 오류가 발생할 수 있습니다.
기존 미니 프로그램의 app.json에 페이지 또는 하도급 구성을 추가해야 합니다. 참고 문서: https://uniapp.dcloud.io/hybrid

② CLI 엔지니어링 방식

관련 환경 제품 경로는 vue.config.js에서 사용자 정의할 수 있습니다.

1: 메인 패키지 모드 얀 빌드:mp-weixin

2: 하위 패키지 모드

Yarn build:mp-weixin --subpackage (--subpackage=fileName은 서브파일을 생성할 수 있으며 기본값은 없음)
unpackage/build에서 다양한 플랫폼에 해당하는 컴파일된 제품(예: WeChat 애플릿에 해당하는 mp-weixin)

참고: npm run을 Yarn으로 대체할 수 있습니다.

구조 |

 ├── uniapp-scaffold          # your project name
│ ├── /config/               # 业务基础/全局/国际化/皮肤配置等
│ ├── /components/           # 公共组件库: 基础 + 部分高复用业务组件
│ ├── /mixins/               # index已默认全局混入，其他可按需业务自行注入
│ ├── /pages/                # 主要业务页面（index.vue + index.scss）
│ ├── /services/             # 服务Service，建议按照业务模块拆分
│ ├── /styles/               # 全局样式 => core + mixin + function + theme...
│ ├── /store/                # 数据流（globalApp、业务数据等）
│ ├── /static/               # 项目图片、图标、字体及静态资源CDN、tabBar等
│ ├── /utils/                # lib、request、tool等
│ ├── /node_modules/         # npm依赖包
│ ├── /uni_modules/          # 存放[uni_module](/uni_modules)规范的插件
│ ├── /unpackage/            # 编译后多个平台的源码（dev开发版、dist生产版）
│ ├── /wxcomponents/         # 存放小程序组件的目录
│ ├── /platforms/            # 存放各平台专用页面的目录，[详见](https://uniapp.dcloud.io/platform?id=整体目录条件编译)
│ │──page.json               # 配置页面路由、导航条、选项卡等页面类信息
│ │──manifest.json           # 配置应用名称、appid、logo、版本等打包信息
│ │──main.js                 # Vue初始化入口文件
│ │──App.vue                 # 应用配置，用来配置App全局样式以及监听应用生命周期

가이드 |

유니앱 문서
WeChat Mini 프로그램 문서
Toutiao 미니 프로그램 문서
Baidu 미니 프로그램 문서
Alipay 미니 프로그램 문서
에어비앤비 자바스크립트 표준
개미 디자인 소개
JD 프런트엔드 코딩 지침
Taro·React 미니 프로그램 및 다중 터미널 통합 개발 솔루션
크로스엔드 개발 프레임워크 심층 검토 2020 버전
uni-app을 사용하여 작은 프로그램을 개발하는 것이 기본적으로 직접 작은 프로그램을 개발하는 것보다 어떻게 더 나은가요?
크로스엔드 차트 라이브러리 uCharts 창고
크로스엔드 차트 라이브러리 uCharts 문서

UI 라이브러리 |

 ?
AdUI：Asako（浅子，作者的Home） Design（用户体验设计中心）旗下的UI组件库
一款集才华（规范）与颜值（专业）的用户体验设计组件库（基于微信视觉规范进一步封装的组件)
全局组件（@/components目录下）已开启easycom模式，可以不用像传统vue组件那样安装、引用、注册，可以直接在业务中使用（ad-xxx）

* 基础组件
  + ad-button
  + ad-avatar
  + ad-icon
  + ad-badge
  + ad-mask（遮罩，可自定义slot content及position）
  + ad-tag
  + ad-tips
  + ad-actionsheet（浮动面板，支持更强大的配置和淡入淡出动画）
  + ad-card
  + ad-spin（支持svg、img、css loading）
  + ad-calender（日历）
  + ad-text-animate（文字渐变动画）
  + ad-countup（数字递增及动画）
  + ad-tree（树结构）

* 业务组件
  + ad-author（一条数据/一个作者的丰富场景，头像、title、描述、额外插槽等）
  + ad-skeleton（骨架屏）
  + ad-status（状态结果页）
  + ad-swiper（3D画廊幻灯片）
  + ad-sticky（滑动固定器）
  + ad-navbar（自定义导航栏）
  + ad-clock（计时器）
  + ad-interact（互动）
  + ad-map（个性化地图）
  + Poster（分享海报插件/wxcomponents/wxa-plugin-canvas）
  + more...

* 图表组件
  + ad-charts（支持个性化配置config/charts，类型支持折线图、柱状图、饼图等10+种）

// 使用方式
可以在任何视图层页面以ad-xxx引用

서비스 |

 // 使用方式

* services层（新建yourpage.js）

import config from "@/config";
import http from "@/utils/request";
const { request } = http;
/* request层做了统一api host拼接url，若覆盖只需自定义baseUrl或在config/index.js自定义hostKey，业务层传参使用 */

// 某推荐列表
export function getAlbumListSvc(query = {}) {
  return request({
    // hostKey: 'monkey' // @/config hosts下配置对应key（自定义host时推荐方式，优于baseUrl）
    // baseUrl: config.yourkey, // 自定义请求host，不指定会走默认api
    url: "/your-api-path",
    method: "post", // 'get'可省略
    data: {
      page: 1,
      size: 10
      ...query
    }
  });
}

* pages业务层

import * as Services from "@/services/home";
export default {
  data() {
    return {
      entry: []
    }
  },
  onLoad(options) {
    // 若需要参数可从options取然后传入query
    this.getAlbumList(query = {})
  },
  methods() {
    async getAlbumList() {
      let res = await Services.getAlbumListSvc();
      if(res.ok) {
          this.entry = res.data;
      }
    }
  }
}

주의할 점

Vue.js 사용 시 주의사항 https://uniapp.dcloud.io/use
다양한 플랫폼을 기반으로 한 소규모 프로그램의 조건부 컴파일(매우 중요) https://uniapp.dcloud.io/platform
고급 개발 기술 https://uniapp.dcloud.io/snippet
성능 최적화 제안 https://uniapp.dcloud.io/performance
WeChat 개발자 도구를 시작한 후 흰색 화면 문제가 발생하는 경우 여러 WeChat 개발자 도구가 시작되었는지 확인하세요. 그렇다면 열려 있는 모든 WeChat 개발자 도구를 닫은 다음 다시 실행하세요. 설치하지 않으면 컴파일 시 흰색 화면이 나타날 수 있습니다)
WeChat 개발자 도구를 통해 Pages.json의 조건에 따라 구성된 페이지를 전환하거나, WeChat 개발자 도구를 닫은 후 HBuilderX에서 지정된 페이지를 시작할 수 있습니다.
컴파일 예외가 발생하고 npm 종속성 패키지를 찾을 수 없는 경우 npm 설치 경로에 문제가 있을 수 있습니다. 관련 노드를 확인하는 것이 좋습니다.
H5 측 데모에서는 일부 구성 요소가 로드되지 않을 수 있습니다. 현재 대부분의 구성 요소는 H5 측에서 테스트되지 않았습니다. 시기적절한 피드백을 환영합니다.

헤드라인 버전

비디오비디오 관련

비디오 구성 요소는 높이가 높아야 하며 최소 높이일 수 없습니다. 그렇지 않으면 iOS에서 재생할 때 소리는 나지만 비디오는 없습니다.

스타일 관련

iconfont가 ByteDance 애플릿 구성 요소에 도입되면 유효하지 않게 됩니다. 해결 방법은 App.vue의 스타일 노드에 도입하는 것입니다.

맞춤 구성요소

Props는 참조로 전달될 수 없으며 값으로만 전달됩니다. props 객체의 속성이 하위 구성 요소에서 수정되면 상위 구성 요소가 동기화되지 않습니다.

네트워크 관련

JSON 반환에서 개행 문자가 발견되어 구문 분석이 실패하게 됩니다. 이러한 개행 문자는 요청 단계에서 필터링되어야 합니다.

업그레이드 로그

스캐폴딩 초기화, 25개 이상의 사용자 정의 구성 요소;

개발 및 제품 협력 및 교류

관련 질문이나 피드백이 있는 경우 Github로 이동하여 문제를 제출하세요. 개발자는 가능한 한 빨리 통보를 받고 비즈니스 또는 기술 설계 협력 의도가 있거나 일상적인 커뮤니케이션이 있는 경우 적시에 문제에 대한 후속 조치를 취할 것입니다. 의도에 따라 아래 개발자에게 연락하고, uniapp 커뮤니티에 댓글을 달고, 그룹에 가입할 수 있습니다.