uniapp scaffold
1.0.0
uni-app、Vue、SASS、Vue CLI、Webpack、miniprogram-ci など。
| スタジオ | UED |
|---|---|
アサコ アート スタジオ、ビジュアル イメージングと工学研究に特化した研究室およびスタジオ (QR コードをスキャンするか、以下の WeChat で検索してください)
| ミニプログラム | 家 | クリエイティブ | 作品 | について |
|---|---|---|---|---|
1ページカレンダー・美しい壁紙ライブラリ RSS
AI が毎日のご機嫌に合わせて世界的なビジュアルおよび写真アートを選択しますか?
| ミニプログラム | 家 | について | クリエイター | AIデイリー |
|---|---|---|---|---|
素晴らしい生活についての読書を楽しんだり、家をDIYしたりしませんか?
| ミニプログラム | 家 | について |
|---|---|---|
才能（標準化）と外観（専門性）を組み合わせたユーザーエクスペリエンスデザイン言語
| ミニプログラム | 家 | コンポーネント | について |
|---|---|---|---|
| 倉庫 | 百度版 | 見出しバージョン | WeChatのバージョン |
|---|---|---|---|
| イントラネット |
VSCode + ミニ プログラム IDE + HbuilderX (オプション、ディレクトリを変更することで cli で切り替え可能) VSCode 開発、HbuilderX リアルタイム コンパイル (ビジュアル メニュー操作)、ミニ プログラム IDE のリアルタイム プレビュー cd projectName => git clone this project ⇒本プロジェクトに基づく事業展開；
ツールは、まず各プラットフォームの開発ツール(IDE)をダウンロード https://uniapp.dcloud.io/quickstart
現在のプロジェクト (ユニアプリ タイプ) を Hbuilder にインポートし、現在の構成、manifest.json および Pages.json を変更または更新します (特に、対応するプラットフォームの appid の追加に注意してください。また、request および downloadFile ドメイン名を構成します)開発者バックエンド);
プラグインを設定します。メニュー バーの [プラグイン管理] をクリックして、現在のプロジェクトに必要なプラグインとローダー (scss、babel、es6 など)、yarn をインストールします (ステップ 3 は順不同)。
メニュー バーの [実行] をクリックして、対応する開発プラットフォームに移動します。現在の IDE に慣れていない場合は、VSCode に切り替えて同期開発とリアルタイム コンパイルを行うことができます。
継続的インテグレーションのリファレンスドキュメント: https://ask.dcloud.net.cn/article/35750
vue-cli バージョンはより頻繁に更新され、新しい機能を使用する必要がある場合は、vue-cli プロジェクトに変換できます。
ステップ：
ミニプログラム方向にはメインパッケージ、サブパッケージ、プラグイン（その後のサポート）の異なる製品があり、h5方向には異なるルーティングモード（ヒストリー、ハッシュ）の構成があります。
1: メインパッケージモード
2: サブパッケージ モード HBuilderX 3.1.0+ では、リリース アプレットのメニューをクリックし、リリース混合サブパッケージを確認し、サブパッケージ ディレクトリの名前を入力し、パッケージ化した後、対応するディレクトリ ファイルをコピーします。既存のアプレットに自分で追加する必要があります。元のミニ プログラム app.json のページまたは下請けの設定に注意してください。
関連環境の製品パスは vue.config.js でカスタマイズできます
1: メインパッケージモードyarn build:mp-weixin
2: サブパッケージモード
注: 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全局样式以及监听应用生命周期
?
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;
}
}
}
}
関連する質問やフィードバックがある場合は、Github にアクセスして問題を提出してください。ビジネス上または技術的な設計上の協力がある場合、または毎日のコミュニケーションがある場合は、開発者にできるだけ早く通知され、タイムリーに問題がフォローアップされます。意図している場合は、以下の開発者に連絡し、uniapp コミュニティにコメントし、グループに参加してください。
| クリエイター | グループ | スポンサー |
|---|---|---|
マサチューセッツ工科大学
