1. 程式人生 > >微信小程式前端框架/UI元件

微信小程式前端框架/UI元件

前言
   剛開始寫bolg,嘗試記錄一些日常。
   無意找了個很好看的小程式UI元件庫:ColorUI github。
   之前做的小程式小工具都是使用原生的自己編碼的,難免會有東拼西湊的地方,正好這段時間有空,準備花點時間找一個較好的小程式元件庫或者框架,來提示開發效率,以及能提高逼格- -
準備
   百度了一堆,結果如下:
元件庫
有贊UI元件庫:vant webapp github
適用商城類,簡單的需求用這個也不錯
蘑菇街UI元件庫:MinUI github
挺好看的,但是搜出來使用這個的不多,可能我姿勢不對吧
TalkingData UI元件庫:iView webapp github
元件多...
Wux WeApp UI元件庫:Wux WeApp github
好像是個人開發的,效果也不錯,有日曆手風琴等
京東 UI元件庫:Taro-UI github
結合taro框架用react開發方式的,不適合
ColorUI UI元件庫:ColorUI github
直接新增class即可實現效果,視覺效果很棒。
前端框架
美團點評:mpvue github
使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以執行在小程式環境中,從而為小程式開發引入了整套 Vue.js 開發體驗。
京東:Taro github
多端統一開發框架,支援用 React 的開發方式編寫一次程式碼,生成能執行在微信小程式、H5、React Native 等的應用
騰訊:WePY github
接近於 Vue.js
WeTouch:Touch WX 文件
小結
框架:京東的是 React 方式編碼,其他多數是vue方式。不考慮框架,因為都沒用過,耗時多- -
UI元件:看了issue和考慮大廠使用,選用vant webapp、iView webapp
   前前後後花了2,3天時間瞭解微信小程式的元件庫和前端框架,本來準備使用mpvue的,但基於開源時間不是很長,自己不熟悉vue.js,怕自己爬不出坑放棄了,還是選擇UI元件庫。因為懶,選了元件較多的iView webapp,還有一個原因就是iview還有iview admin後臺框架,萬一哪天能用上呢~
   準備使用的是後臺框架ASPNET MVC5.0+EASYUI+EF+WEBAPI,小程式前端選擇iView webapp。當然還有好看的Color UI
開始
   上面基本上都會用到npm;而且由於微信小程式寫法也類似vue,加上選擇的iView是基於vue.js的UI元件庫,iView webapp使用方式與iView基本一致,所以還要學習瞭解一下vue.js。就這樣準備使用iView webapp前,再研究研究node.js和vue.js咯,畢竟是奔著學習來的。
   網上找了一個文章,感覺不錯,大致瀏覽,瞭解即可,畢竟這次目的是小程式。node.js入門

   寫完本文後,因專案原因需要開發移動端專案,iView只有PC端,只能轉到vant這個UI元件了。PC端需求較少,目前工作主要還是移動端和小程式專案。——2018-11-7

相關推薦

程式前端框架/UI元件

前言    剛開始寫bolg,嘗試記錄一些日常。    無意找了個很好看的小程式UI元件庫:ColorUI github。    之前做的小程式小工具都是使用原生的自己編碼的,難免會有東拼西湊的地方,正好這段時間有空,準備花點時間找一個較好的小程式元件庫或者框架,來提示開發效

程式開發框架——元件

    元件的概念,如圖:     小程式給我們提供的元件,如圖  八類元件:1.檢視容器元件主要控制頁面內容、檢視容器可以理解為一個盒子在這個盒子裡面可以裝入更小的盒子填滿,這裡提供有5種: &nb

程式wepy框架中父元件與子元件通訊和互動

官網上描述: $broadcast $broadcast事件是由父元件發起,所有子元件都會收到此廣播事件,除非事件被手動取消。事件廣播的順序為廣度優先搜尋順序。 $emit $emit與$broadcast正好相反,事件發起元件的所有祖先元件會依次接收到$emit事件。 $in

程式之第三方UI框架 zanui 使用教程

ZanUI-WeApp是有贊移動 Web UI 規範 ZanUI 的小程式現實版本,結合了微信的視覺規範,為使用者提供更加統一的使用感受。現已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、swit

程式wepy框架裡整合iview Weapp元件

首先看了iview Weapp官網和GitHub上的原始碼,發現原始碼給的例子都是基於微信小程式原生開發,不太適用於wepy框架,所以這裡主要記錄了在wepy框架裡使用iview Weapp元件的步驟: 2.將原始碼中dist資料夾下所有檔案拷貝到自己的專案裡; 3.

程式前端開發框架,快速自動生成前端頁面

微信小程式自動切片生成佈局軟體是一款根據效果影象畫畫一樣來設計微信小程式,自動生成匯出前端頁面的快速開發工具。可以很方便、快速地生成小程式的wxml,wcss,js檔案。可以大大提高您的工作效率,減少前端佈局的編寫工作。功能如下:1.切片功能:原來手工寫的這部分工作,可以用切

程式之官方UI框架we-ui 使用教程

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程式量身設計,令使用者的使用感知更加統一。包含button、cell、dialog、 progress、 toa

程式入門二UI框架

上一章節,談了文章列表的結構搭建,現在要給它披上嫁衣,我選擇的是weui-wxss這款官方提供的UI框架。下一章便要談談如何使用 wx.request 動態獲取資料 第一步:需要把下載的內容cop

程式開發框架——WXSS(一)

    WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。     width:用來設定元素'寬度' / height:用來設定元素'高度 '/

程式--15自定義元件

關於自定義元件有兩個知識點需要說一下: 1.子元件向父元件傳引數 在子元件內部,這樣觸發事件,傳遞引數 在父元件內部這樣接收引數 2. 父元件向子元件傳引數 在父元件這裡定義一個now-in 在子元件這裡引入 這樣的話,nowIn就相當於data裡

程式scroll-view和元件

scroll-view的css樣式很坑   按照下邊這個 .scroll-view_H{   white-space: nowrap; } .scroll-view-item{   height: 200px; }

程式 wepy框架關於攔截器的應用例項

需求 因為安全的需要,很多時候我們訪問介面的時候需要進行驗籤,而用於驗籤的資訊是需要存入請求頭的 業務邏輯如下: 登入並獲取使用者資訊 將使用者資訊存入全域性變數中 其他業務訪問介面 攔截請求,並將需要的驗籤資訊存入到請求頭裡面 放行

程式之父子間元件傳參

1.建立元件 開啟微信開發者工具,建立元件,會生成四個檔案:wxml,wxss,js,json 在wxml中: <view>我是元件A</view> 在js中: Component({ behaviors: [], properti

程式圖片處理 image元件用法

image 圖片。 屬性名 型別 預設值 說明 最低版本 src String   圖片資源地址,支援雲檔案ID(2.2.3起) &nb

程式前端開發踩坑(一)

之前由於不瞭解微信小程式的整個的執行開發機制,走了很多的彎路,腦子靈光的可能不會遇到,這個主題系列的帖子希望可以幫助到像我一樣理解能力慢的孩子。 不論是開發微信小程式還是說學習任何一門程式語言,最重要的一點是要夯實基礎,不是隻是去看看概念,從hello word開始就要好好的去對待每一行程式碼,軟工是工科,

程式開發框架—wepy快速入門

 小程式框架wepy文件 Github地址 wepy官網:https://tencent.github.io/wepy/index.html 專案建立與使用 安裝wepy 以下安裝都通過npm安裝 安裝 wepy 命令列工具。

程式之店鋪評分元件及vue中用svg實現的評分顯示元件

在微信小程式中,有遇到要展示店鋪評分,或者是訂單完成後對商品進行評價,用到了星星展示,查了下,在微信中無法使用svg實現圖片,微信中只能將svg圖片轉成base64來顯示,所以是在vue中使用的svg來實現評分 1.效果圖 微信中的可以點選及顯示,但是,顯示的話,在4.2分,

程式框架

什麼是小程式:小程式是一種不需要下載即可使用的應用,它實現了「觸手可及」的夢想,使用者掃一掃或者搜一下即可開啟應用,也體現了「用完即走」的理念,使用者不用關心是否安裝太多應用的問題,應用將無處不在,隨時可用,但又無需安裝。 相比於手機應用,小程式又有什麼特性呢? 1:無需安裝; 2

程式自定義波浪元件

最近看到好多app上有波浪背景,有動態的,有靜態的,這裡是在小程式中用得動態。 先看看效果圖:裡面的文字是元件內部定義的。 這是用兩個svg的圖片用css關鍵幀動畫做的效果(這裡謝謝子彈簡訊裡前端群的小夥伴提供的web版的css動畫檔案) 在小程式中使用,注意一個問

程式前端原始碼詳解及例項分析

微信小程式前端原始碼邏輯和工作流 看完微信小程式的前端程式碼真的讓我熱血沸騰啊,程式碼邏輯和設計一目瞭然,沒有多餘的東西,真的是大道至簡。 廢話不多說,直接分析前端程式碼。個人觀點,難免有疏漏,僅供參考。 檔案基本結構: 先看入口app.js,app(obj)註冊一個小程式。接受一個 obje