mpvue專案使用第三方UI框架vant weapp
簡直醉了。。。折騰了好幾個小時,各種百度,vant-weapp的dist目錄各種放各種試都不行,都試得要睡著了,沒想到。。。居然只是差微信開發者工具裡面一個勾。吐血。。。。
我們搜到的教程都是說從vant-weapp的git倉庫中下載原始碼,拷貝dist目錄到我們建立的mpvue專案檔案的static或者dist或者…資料夾中,我覺得都可以吧,只是涉及你引用元件時的路徑怎麼寫。
這裡把vant-weapp的dist目錄重新命名為vant-weapp放在專案根目錄的static資料夾下:
在src資料夾下,即我們寫vue程式碼的位置,正在編寫的頁面中新增main.json檔案(vue程式碼編譯成小程式程式碼時會直接使用這個檔案):
{
"usingComponents": {
"van-button": "/static/vant-weapp/button/index"
//這個路徑是指根目錄下static檔案中...
}
}
然後就可以運行了:cmd->
npm run dev
接著開啟微信開發者工具,會發現報錯:
開啟微信開發者工具的“詳情”右側欄,有一個ES6轉ES5:
把這個“ES6轉ES5”的選項勾上就不會報錯了…出現vant-weapp的樣式。
相關推薦
mpvue專案使用第三方UI框架vant weapp
簡直醉了。。。折騰了好幾個小時,各種百度,vant-weapp的dist目錄各種放各種試都不行,都試得要睡著了,沒想到。。。居然只是差微信開發者工具裡面一個勾。吐血。。。。 我們搜到的教程都是說從vant-weapp的git倉庫中下載原始碼,拷貝dist目錄到我們建立的mpvue專案檔案
mpvue 使用第三方ui庫
使用第三方ui元件的問題 以vant-weapp 為例子 直接通過 git 下載 Vant Weapp 原始碼 下載完了之後將dist 目錄給複製出來, 進入你的mpvue專案目錄,執行npm run dev 或者 npm run build, 之後目錄下會多
ASP.NET MVC搭建專案後臺UI框架—1、後臺主框架
目錄 準備做一個新的專案,從網頁設計師手中拿到了html靜態頁面(沒有一行js),但是都一個個零散的介面,我需要做的是: 1、 把這些零散的html介面連線起來 2、 自己編寫js或者jquery實現選單效果 3、 把html頁面整合在我們的MVC Razor檢視中 本想著使用第三方的UI
ASP.NET MVC搭建專案後臺UI框架—6、客戶管理(新增、修改、查詢、分頁)
目錄 接著之前未寫完的繼續,本篇,我將講解在此UI框架中和ASP.NET MVC4進行結合開發。效果如下: 這裡,我將新增和修改用了兩個不同的檢視,當然也可以把新增和修改放到同一個檢視中,但是要寫一些業務邏輯程式碼來區分當前呼叫的是修改還是新增,根據新增和修改的不同,而對介面進行不同的操作。 新
ASP.NET MVC搭建專案後臺UI框架—8、將View中選擇的資料行中的部分資料傳入到Controller中
目錄 現在,有一個需求,我需要將表格中選中行的資料中的一部分傳直接傳到控制器中,然後儲存到另外一張表中。一開始,我就想到在前臺使用ajax構造json資料,然後控制器直接通過list接收。 選中介面中的行,然後點選“批量新增到月結表”,彈出一個對話方塊,這個對話方塊的月份列表為當前選擇資料行中
ASP.NET MVC搭建專案後臺UI框架—2、選單特效
目錄 上一篇,已經把整個專案的框框給搭建好了,但是還沒有任何js效果實現。這一節,我就來說下關於選單的特效實現。我需要的效果如下: 需求總結: 點選頂部選單模組,左側顯示不同模組下面的選單列表 點選左側選單選項,展開下面的子選單,並摺疊其它選單模組,選單圖示摺疊顯示為+,展開顯示為
ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開
目錄 上一節已經新增好了選單特效,這一節,我們來新增面板的摺疊和展開功能,效果圖如下: 思路:我在Right檢視中添加了一個div,在這個div中存放一張圖片,通過對這張圖片的點選,來控制Left檢視的隱藏和顯示。說白了,這裡其實就是修改主框架Index檢視中frameset的 cols屬性。
ASP.NET MVC搭建專案後臺UI框架—7、統計報表
本節,我將通過一個Demo,演示Datatables 和ASP.NET MVC的完美結合,可以這麼說,如果這樣的介面都能做出來,後臺系統90%的介面功能都可以開發出來了。 用jquery Datatables 來開發確實是件比較蛋疼的事情(和Jquery EasyUI、MiniUI、ExtJs相比),用
ASP.NET MVC搭建專案後臺UI框架—11、自動載入下拉框查詢
需求:在查詢記錄的時候,輸入第一個字,就自動把以這個字開頭的相關記錄查找出來,輸入2個字就過濾以這兩個子開頭的記錄,依次類推。 突然要用到這個功能了,印象中曾經寫過這個功能的文章,一下子找不到了,只好重新貼出來備忘。最近部落格快2個月沒更新了,因為這兩個月一直在閉門寫書。 <link
ASP.NET MVC搭建專案後臺UI框架—9、伺服器端排序
關於jquery datables的在伺服器端的排序,在網上貌似沒有看到.NET的例子,說實話,之前我也迷惑過,習慣了直接從網上找現成的東西,經過一翻搜尋,沒找到,於是乎,自己除錯唄,調了前臺,調後臺,還真被我看出了規律。事實上datables是支援多列排序的,但是本例,我只寫了單列排序。 在控制器
ASP.NET MVC搭建專案後臺UI框架—5、Demo演示Controller和View的互動
目錄 這一節,我將用一個Demo來演示在此UI框架中,控制器和檢視的互動。以渠道管理為例。效果圖如下: 按回車執行查詢,不是F5,筆誤。 這裡我使用了基於jquery的模態窗體元件lhgdialog和表格元件dataTables。dataTables更多資料請參考:http://dt.thxop
ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援
目錄 在點選左側選單中的選項時,我希望有Extjs、EasyUI等中類似的tab頁籤功能,因為這樣可以支援多個頁面的瀏覽,有時候我們可能需要同時開啟多個頁面,如果不使用頁籤,那麼每次要檢視某個頁面都要去重新呼叫並重新整理,如果在網速慢或者該介面載入很耗時的情況下,簡直會讓人奔潰。因為我又不想引入整個Ex
微信小程式之第三方UI框架 zanui 使用教程
ZanUI-WeApp是有贊移動 Web UI 規範 ZanUI 的小程式現實版本,結合了微信的視覺規範,為使用者提供更加統一的使用感受。現已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、swit
Angular學習筆記之整合第三方UI框架、元件
安裝 Material UI 方法: step 1: npm install --save @angular/material @angular/cdk step 2: npm install --save @angular/animat
vue項目中使用了vw適配方案,引入第三方ui框架mint-ui時,適配問題解決
== indexof 問題解決 .config .proto NPU 選項 === and 問題分析: 一般第三方ui框架用的都是不同的適配方式,如果我們使用了vw適配,那麽在使用mint-ui框架時,就會發現px單位會被轉換成vw,從而導致樣式變小的問題,如圖 解決方案
mpvue+vant weapp專案開發過程中遇到的問題(未完待續)
一、元件上bind:方法名=“方法”,找不到方法 報錯圖: 百度到的:都說methods不可用,可以用computed代替,但是我用了computed,裡面的方法全都在頁面載入時做完了。。。還操作毛線。。。 解決辦法:誤打誤撞用methods可以了。把元件上的bind:方法名=
mpvue項目中使用第三方UI組件庫的方法
true form 原生 index hide 搜索欄 view 熱更新 因此 簡介 微信小程序上線已有一年多時間啦,自美團的mpvue(基於 Vue.js 的小程序開發框架,從底層支持 Vue.js 語法和構建工具體系)問世也過去了好幾個月。 前端技術日新月異,小程序的U
vue-cli3.0結合lib-flexible、px2rem實現移動端適配,完美解決第三方ui庫樣式變小問題 vue-cli 3.0 搭建專案流程
公司最近做的一個移動端專案從搭框架到前端開發由我獨立完成,以前做移動端適配用的媒體查詢,這次想用點別的適配方案,然後就採用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案,開發過程中也遇到一些坑,自己選的方案自己填坑吧。以下記錄我的專案框架搭建及填坑方案。 搭建可以參考我
Vant Weapp 0.4.8 釋出,有贊小程式 UI 元件庫
Vant Weapp 0.4.8 更新內容: Improvements Icon: 增加更多基礎圖示 #980 Icon: 支援傳入圖片連結作為圖示展示 #973 Tab: 新增 animated 屬性 #957 Field: 新增
小程式採坑記 mpvue + Vant Weapp
最新在做一個小程式專案,框架使用的是:mpvue + Vant Weapp;其餘還用的技術棧:vue.js、微信小程式、網路庫flyio等。 mpvue是美團開源的微信小程式框架,由於無限接近vue開發而受到大量關注; Vant Weapp UI庫是輕量、可靠的小程式 UI 元件庫,是