uniapp scaffold
1.0.0
uni-app، Vue، SASS، Vue CLI، Webpack، miniprogram-ci، إلخ.
| استوديو | UED |
|---|---|
Asako Art Studio، مختبر واستوديو مخصص للتصوير البصري والأبحاث الهندسية (امسح رمز الاستجابة السريعة أو ابحث في WeChat أدناه)
| برنامج صغير | بيت | مبدع | يعمل | عن |
|---|---|---|---|---|
تقويم من صفحة واحدة • مكتبة خلفية جميلة RSS
يختار الذكاء الاصطناعي الفنون المرئية والتصويرية العالمية لمرافقتك في مزاج جيد كل يوم؟
| برنامج صغير | بيت | عن | الخالق | منظمة العفو الدولية يوميا |
|---|---|---|---|---|
هل تستمتع بالقراءة عن الحياة الرائعة وصنع منزلك بنفسك؟
| برنامج صغير | بيت | عن |
|---|---|---|
لغة تصميم تجربة المستخدم التي تجمع بين الموهبة (التوحيد القياسي) والمظهر (الاحترافية)
| برنامج صغير | بيت | عناصر | عن |
|---|---|---|---|
| مخزن | نسخة بايدو | نسخة العنوان | نسخة وي شات |
|---|---|---|---|
| الإنترانت |
VSCode + Mini Program IDE + HbuilderX (اختياري، يمكن تبديله باستخدام cli عن طريق تعديل الدليل) تطوير VSCode، تجميع HbuilderX في الوقت الحقيقي (تشغيل القائمة المرئية)، معاينة في الوقت الحقيقي لبرنامج Mini Program IDE cd projectName => git clone هذا المشروع => بناءً على تطوير أعمال المشروع هذا؛
الأدوات، قم أولاً بتنزيل أدوات التطوير (IDE) لكل منصة https://uniapp.dcloud.io/quickstart
قم باستيراد المشروع الحالي (نوع uni-app) في Hbuilder، وقم بتعديل أو تحديث التكوين الحالي وmanifest.json وpages.json (انتبه بشكل خاص إلى إضافة معرف التطبيق الخاص بالنظام الأساسي المقابل، وتكوين أسماء نطاقات الطلب وdownloadFile في الواجهة الخلفية للمطور)؛
قم بتكوين المكون الإضافي. انقر فوق إدارة المكونات الإضافية في شريط القائمة لتثبيت المكونات الإضافية وأدوات التحميل المطلوبة للمشروع الحالي (scss، وbabel، وes6، وما إلى ذلك)، والغزل (الخطوة 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: بناء خيوط وضع الحزمة الرئيسية: mp-weixin
2: وضع الحزمة الفرعية
ملاحظة: يمكن استبدال تشغيل npm بالغزل.
├── 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، والانضمام إلى المجموعة؛
| الخالق | مجموعة | راعي |
|---|---|---|
معهد ماساتشوستس للتكنولوجيا
