首頁 網站源碼 小程式原始碼 好用易擴充的小程式 UI 庫

好用易擴充的小程式 UI 庫

使用

使用 ZanUI-WeApp 前請確保已經學習過微信官方的 小程式簡易教學 和 小程式框架介紹。
然後用 Bower 將 ZanUI-WeApp 加入到你的專案中使用。
你也可以 fork 出一份你自己的 ZanUI-WeApp,這樣可以得到更穩定的程式碼和更方便的進行個性客製化。

我們推薦在你的app.wxss直接引入zanui-weapp/dist/index.wxss。

組件分類介紹

依功能的不同,可以將組件大致的分為2類:

1. 正常引用

如按鈕元件,只需要在頁面中引入按鈕自訂元件即可

{ "usingComponents": { "zan-button": "/path/to/zanui-weapp/dist/btn/index" }
}
<!-- example/btn/index.html --> <zan-button>按鈕</zan-button>

2. API類別元件

如 Toast 元件,需要先在頁面上引入自訂元件。之後邏輯運行時,直接呼叫方法即可展示

{ "usingComponents": { "zan-toast": "/path/to/zanui-weapp/dist/toast/index" }
}
<zan-toast id="zan-toast-test"></zan-toast>

將對應的 Toast 的函數引入頁面,就可以直接呼叫來展示 Toast 了

// example/toast/index.js const Toast = require('/path/to/zanui-weapp/dist/toast/toast'); Page({ showToast() { Toast({
        selector: '#zan-toast-test',
        message: 'toast內容' });
  }
});

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

UniApp實作支付寶小程式原生元件的擴充與使用方法 UniApp實作支付寶小程式原生元件的擴充與使用方法

04 Jul 2023

UniApp是一個基於Vue開發框架的跨平台應用程式開發框架,可以將程式碼一次編寫,同時發佈到多個平台。 UniApp的優點在於其豐富的原生元件擴充能力,可以方便地整合第三方的原生元件,例如支付寶小程式的原生元件。本文將介紹如何在UniApp中實作支付寶小程式原生元件的擴充與使用方法,並給出程式碼範例。 1.原生元件的擴充支付寶小程式的原生元件是指透過Javascr

UniApp實作位元組跳動小程式原生元件的擴充與使用技巧 UniApp實作位元組跳動小程式原生元件的擴充與使用技巧

04 Jul 2023

UniApp是一種基於Vue框架的跨端開發工具,透過使用UniApp,我們可以方便地將一個專案同時編譯成多個平台的應用程序,包括小程式、H5、App等。而位元組跳動小程式是一種獨特的小程式形式,它有著自己的原生元件和獨特的開發方式。本文將介紹如何在UniApp中實作位元組跳動小程式原生元件的擴充與使用技巧,並提供對應的程式碼範例。原生元件的擴充位元組跳動小程式的原生

UniApp實作微信小程式原生元件的擴充與使用技巧 UniApp實作微信小程式原生元件的擴充與使用技巧

06 Jul 2023

UniApp是一款基於Vue.js開發的跨平台應用開發框架,在開發微信小程式時,我們常常需要使用到微信小程式原生元件。本文將介紹如何在UniApp中擴充和使用微信小程式原生元件,並分享一些使用技巧。一、擴展微信小程式原生元件UniApp讓我們可以將微信小程式的原生元件擴展,以支援更多的功能和特性。下面我們以擴充微信小程式原生導覽列元件為例進行說明。在/co

Laravel微信小程式取得使用者詳細資料及附參數小程式碼擴充的分析 Laravel微信小程式取得使用者詳細資料及附參數小程式碼擴充的分析

06 Jul 2018

這篇文章主要介紹了關於Laravel微信小程式獲取用戶詳細資訊及帶參數小程式碼擴展的分析 ,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

UniApp實作京東小程式原生元件的擴充與使用指南 UniApp實作京東小程式原生元件的擴充與使用指南

04 Jul 2023

UniApp實現京東小程式原生組件的擴展與使用指南近年來,行動應用的發展勢頭迅猛,跨平台開發工具也愈加成熟,UniApp作為其中的佼佼者,以其高效且跨平台的特性,受到了越來越多開發者的青睞。而在行動應用開發中,小程式也日漸盛行,為了滿足使用者對於原生體驗的需求,我們需要學會如何利用UniApp實現京東小程式原生元件的擴充與使用。本文將帶領大家一步步實現這個目標

什麼是來源映射以及為什麼 JavaScript 開發人員需要它們? 什麼是來源映射以及為什麼 JavaScript 開發人員需要它們?

23 Oct 2024

來源映射(.map 檔案)彌合了縮小程式碼和原始程式碼之間的差距,使開發人員能夠調試神秘的縮小程式碼。它們提供從縮小程式碼到原始程式碼的映射,允許在生產環境中進行有效的故障排除

學生管理系統原始碼 PHP 原始碼壓縮小工具 學生管理系統原始碼 PHP 原始碼壓縮小工具

29 Jul 2016

學生管理系統原始碼:學生管理系統原始碼PHP 原始碼壓縮小工具:使用方法:(在命令列運行) 複製程式碼程式碼如下:php compactor.php DESTINATION.php SOURCE.php 下載: compactor.php複製程式碼如下:#!/usr/bin/env php <?php /** * Compact PHP code. * * Strip comments, combine entire library into one

2017年最新5個微信小程式完整原始碼推薦下載 2017年最新5個微信小程式完整原始碼推薦下載

06 Jun 2017

雖然微信小程式應用程式越來越火熱,但是網路上公開分享的微信小程式原始碼不多,今天php中文網就為你推薦5個2017年最新的微信小程式完整原始碼供您免費下載使用!希望對您能有所幫助!

分享一套共乘小程式原始碼(前端+後端) 分享一套共乘小程式原始碼(前端+後端)

11 Sep 2017

微信拼車小程式原始碼,後端為PHP+MYSQL

See all articles See all articles

Hot Tools

微信小程式demo:仿商城

微信小程式demo:仿商城

微信小程式demo:仿商城,上手簡單,對商城的一些基本的功能有很好的涉及

外帶:實現類似錨點功能

外帶:實現類似錨點功能

正是大家需要的類似錨點功能,另外也實現了一些外帶app的典型點菜功能,推薦學習研究;

微信小程式demo:樂助

微信小程式demo:樂助

微信小程式demo:樂助:類似基於地理位置的到位;助人應用,與張小龍的小程式精神有點相似。

微信小程式遊戲類demo挑選不同色塊

微信小程式遊戲類demo挑選不同色塊

微信小程式遊戲類demo挑選不同色塊

微信小程式demo:輪播圖變換

微信小程式demo:輪播圖變換

輪播圖樣式變換,簡單的一個用小程式實現的輪播圖,寫法容易