1. 程式人生 > >【微信小程式】——wxss引用外部CSS檔案及iconfont,圖文教程

【微信小程式】——wxss引用外部CSS檔案及iconfont,圖文教程

小程式引入外部檔案的方式是:@import “/.wxss”;

小程式的wxss檔案font-face的url不接受http地址作為引數,可以接受base64,因此可以先將字型檔案下載後,轉換為base64,然後引用。
搜尋想要的圖示,新增到購物車
點選進入購物車
新增圖示到專案中
下載素材到本地
下載到本地並解壓ttf檔案,到連結https://transfonter.org/,對檔案進行轉換。
將檔案解壓到桌面
轉換完成下載到本地

轉換完成,下載到本地後,開啟轉換的檔案,將程式碼引用到wxss中,並定義class類名,再將定義好的檔案,在app.wxss中引用,便可以全域性使用該檔案樣式
引入小程式wxss中
定義class類名
引用

小程式我也是做了沒多久,更多的問題,歡迎大家加微信進群溝通。群二維碼如果過期,請加我微信:mengyilingjian。


進群二維碼

相關推薦

程式——wxss引用外部CSS檔案iconfont圖文教程

小程式引入外部檔案的方式是:@import “/.wxss”; 小程式的wxss檔案font-face的url不接受http地址作為引數,可以接受base64,因此可以先將字型檔案下載後

移動開發之程式的原理與許可權問題以及相關的簡易教程

這幾天圈子裡到處都在傳播著這樣一個東西,微信公眾平臺提供了一種新的開放能力,開發者可以快速開發一個小程式,取名曰:微信公眾平臺-小程式 據說取代移動開發安卓和蘋果,那這個東東究竟是幹嗎用的?但很多人覺得是網頁版應用。有的人很雞凍,但是……最後文章會提及具體的許

程式編譯 .wxss 檔案異常解決

遇到問題   博主最近又重新開始撿起微信小程式,想做點自己的東西。瞭解到最近小程式工具有做更新,就順手更新了最新的版本,功能確實比之前強大了不少!   更新歸更新,更新後控制檯就一直報下面這個錯誤:

程式開發實戰 之 「檢視層」WXML & WXSS 全解析

在《微信小程式開發實戰 之 「配置項」與「邏輯層」》中我們詳細闡述了小程式開發的程式和頁面各配置項與邏輯層的基礎知識。下面我們繼續解析小程式開發框架中的「檢視層」部分。學習完這兩篇文章的基礎知識,動手開發一個簡單的小程式應用已經不成問題了。 檢視層 框架中檢視層以給定的樣式展現資料並反饋事件給邏輯層。

程式在js中匯入第三方js或自己寫的js使用外部js中的function的兩種方法 import和require的區別使用方法

如下 定義了一個外部js檔案,其中有一個function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync("ctx"); var filter = "/ms-code"; var apis

程式--bindtap引數傳遞配合wx.previewImage實現多張縮圖預覽

  本文為原創隨筆,純屬個人理解。如有錯誤,歡迎指出。 如需轉載請註明出處 在微信小程式中預覽圖片分為   a、預覽本地相簿中的圖片。   b、預覽某個wxml中的多張圖片。 分析:實質其實是一樣的。都是給wx.previewImage傳入引數

程式公共方法實現實時捕捉input輸入

專案中,一個表單中經常有好幾個input,但是微信小程式並不像vue那樣實現雙向繫結,所以我們要自己去實現當用戶輸入的時候,實時獲取使用者輸入的值。 方法比較簡單,就兩個步驟。 1.wxml <input data-name='form.base.name

程式開發工具上七牛雲的圖片可以看到但是在真機上看不到的原因解決

在開發微信小程式過程中,在微信開發者工具上,七牛雲的圖片都可以展示出來,但是在真機上,七牛雲的圖片卻展示不出來,也沒有報404找不到或者不能載入圖片的問題,     必須保證: 1.圖片是用image載入的; 2.圖片的url裡面沒有中文; 3.圖片的HTTP應為小寫的

程式c# 實現獲取openid、session_key 服務端

c#寫一個獲取微信小程式 openid和session_key 的方法。。 1,微信小程式端 // 登入 wx.login({ success: res => { // 傳送 res.code 到後臺換取 openId, sessionKey,

程式元件之頁面佈局

小程式的flex佈局 小程式建議使用flex佈局進行排版 flex就是一個盒裝彈性佈局 flex是一個容器,所有子元素都是它的成員。 定義佈局:display:flex flex 容器的屬性: 1、屬性flex-direction: 排列方向。有下面

程式scroll-view 注意事項

之前用到scroll-view的時候踩過一次坑,解決後,覺得不是什麼很深的坑,遂沒有做記錄,結果這次又用到了,同一個坑又掉進去一次,心裡很難受,難受我沒長腦子,也難受我眼高手低,所以這一次,我決定記錄下來,給自己一個警醒!   橫向滑動注意事項: 1、scroll-view

程式下載並預覽文件——pdf、word、excel等多種型別

簡要:wx.downloadFile(OBJECT)下載檔案資源到本地,客戶端直接發起一個 HTTP GET 請求,返回檔案的本地臨時路徑。wx.openDocument(OBJECT)新開頁面開啟文件,支援格式:doc, xls, ppt, pdf, docx, xlsx, pptx。 呼

程式入門

MINA框架:響應式資料繫結系統:檢視層、邏輯層,背後有MVVM     將View 的狀態和行為抽象化,將檢視 UI 和業務邏輯分開 一、檢視層描述語言:      1、WXML:類似HTML    

程式 storage的小結

微信本地儲存,為此提供了好幾個方法。 api文件如下: ps: api文件我居然翻到了兩個版本,真特麼神奇。還好兩版就是一個精簡版一個詳解版。 每個微信小程式都可以有自己的本地快取,可以

程式上拉重新整理和下拉載入

上拉重新整理和下拉載入有兩種方式可以實現: 1.使用scroll-view元件進行操作,使用自帶的scrolltoupper和scrolltolower事件可以實現。適合頁面區域性的上拉下拉。 附上

程式程式引入echarts統計圖

前言 微信現在是太多人使用了,應用這東西也非常的多,也包含小程式了,小程式發展到現在已經是非常好了。我很久都沒寫小程式的教程了,現在就開始今天的教程吧。 預覽 官方git網站。你可以微信掃一掃掃下

程式app.json配置

最近因公司開發團隊合併,需要了解微信小程式,估找了demo來學習。 app.json配置項列表 pages 接受一個數組,每一項都是字串,來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊, 陣列的第一項代表小程式的初始頁面。小程式中新增/

程式app.js配置

App()函式用來註冊一個小程式。接受一個object引數,其指定小程式的生命週期函式等。 object引數: 屬性 型別 描述 觸發時機 onLaunch Function 生命週期函式--監聽小程式初始化 當小程式初始化完成時,

程式https://api.douban.com 不在以下 request 合法域名列表中

https://api.douban.com 不在以下 request 合法域名列表中,請參考。。。 因為這是解決了問題才寫的部落格,所以這裡沒留下報錯截圖,下面是參考了別人的解決方法,已親測有效。 解決方法: 注意:同一賬戶註冊了小程式後好像不能註冊訂閱號

程式如何上傳、提交稽核、釋出操作

微信小程式對個人開發者也提供無認證釋出上傳、提交稽核、提交發布等,個人可以開發一些小程式釋出,釋出成功後,微信中也可以搜尋到,下面小編教教大家如何上傳發布小程式 步驟閱讀 百度經驗:jingyan.