微信小程序開發ui模闆（微信小程序ui設計）

今天給各位分享微信小程序開發ui模闆的(de)知識，其中也會對微信小程序ui設計進行(xíng)解釋，如(rú)果能碰巧解決你現在面臨的(de)問題，别忘了關注本站，現在開始吧(ba)！

本文目錄一(yī)覽：

• 1、微信小程序開發常用知識點
• 2、微信小程序ui框架有(yǒu)哪些
• 3、Taro3.4開發微信小程序示例

微信小程序開發常用知識點

與iOS開發很相似，小程序的(de)導航欄也可(kě)以全局設置一(yī)下，在公共文件app.json中設置了導航欄相關樣式如(rú)下：

這個地(dì)方是全局設置，如(rú)果想要在不同的(de)頁面設置各自(zì)的(de)标題屬性，隻需要在該子(zǐ)級文件中設置

子(zǐ)頁面想調用共公js的(de)方法，需先在子(zǐ)頁面js中先實例化app:具體過程如(rú)下

在需要調用的(de)子(zǐ)頁面中，

如(rú)果是嵌套循環，很容易出現多個list和(hé)index，例如(rú)表視(shì)圖一(yī)樣，所以在小程序中可(kě)以重命名 list 和(hé)index 方法為(wèi)：wx:for-index='重命名' wx:for-list="重命名"

在APP開發中，UI複用是一(yī)個很好的(de)手段，在小程序上就是模闆template。

在逛小程序聯盟的(de)時候發現了一(yī)個大濕總結的(de)比我(wǒ)好，搬過來一(yī)下。

微信小程序中，如(rú)果幾個頁面中需要引用同一(yī)個header/footer，當定義了公共模闆時，有(yǒu)兩種引用方法如(rú)下：

方法一(yī)：在公共模闆中定義template元素，利用 方法 ,這種方式隻會顯示公共模闆的(de)template裏面的(de)內(nèi)容，之外的(de)內(nèi)容不會顯示

** 方法二:**

總結：import方式和(hé)imclude方式的(de)不同在于前者僅引用公共模闆中的(de)template裏面的(de)內(nèi)容後者僅引用template以外的(de)內(nèi)容，顯而易見，include方式更簡單一(yī)些，在wxml中隻需要一(yī)句話即可(kě)。

rpx單位是微信小程序中css的(de)尺寸單位，rpx可(kě)以根據屏幕寬度進行(xíng)自(zì)适應。規定屏幕寬為(wèi)750rpx。如(rú)在 iPhone6 上，屏幕寬度為(wèi)375px，共有(yǒu)750個物理(lǐ)像素，則750rpx = 375px = 750物理(lǐ)像素，1rpx = 0.5px。

具體的(de) 這裏有(yǒu)一(yī)片文章(zhāng)介紹的(de)很詳細 ， 還有(yǒu)這個

小程序的(de)事件主要有(yǒu)：

小程序中的(de)wxml中綁定事件有(yǒu)兩種：以touchtab為(wèi)例 ，在wxml中必須有(yǒu)bind/catch不然無法實現上述事件

bindtouchtab和(hé)catchtouchtab bind的(de)不會阻止事件冒泡（元素最裏層到最外層函數執行(xíng)），catch會阻止冒泡，隻是冒泡到當前層結束

如(rú)果想在元素執行(xíng)某事件時把元素的(de)某個屬性傳到後台 可(kě)在元素中加入data-屬性名稱=“xxx”,在事件函數中 function(event){}的(de)event中的(de)currentTarget裏面的(de)data-set裏面可(kě)查看接收在元素中綁定的(de)的(de)id或者其他屬性clientX/Y 查看滑動手指距離(lí)屏幕左側的(de)位置，查看滑動位置也可(kě)以通過touchstart和(hé)和(hé)touchend的(de)clientx/y獲取

看到幾個别人寫的(de)，瞬間石化，果斷收藏。

在小程序中，定義了一(yī)項工具文件utils,此文件的(de)js旨在本文件之內(nèi)有(yǒu)效，當其他子(zǐ)頁面想調用其中的(de)js方法或者變量時，需要兩步驟：

1：在utils被調用的(de)js文件中，面向對象的(de)方式模型輸出： module.exports={要調用的(de)函數名稱：要調用的(de)函數名稱 }；

2：在要調用的(de)js文件中模塊化引入utils的(de)js文件 var object=require("utils被調用的(de)js文件地(dì)址")； 可(kě)以輸出一(yī)下object就能看到被調用的(de)方法了；

例子(zǐ)如(rú)下：

要調用的(de)js文件：

小程序的(de)後台獲取數據方式get/post具體函數格式如(rú)下：wx.request({})

如(rú)果屏幕中某元素的(de)內(nèi)容超過此元素的(de)高(gāo)度，可(kě)設置元素為(wèi)scroll-view 為(wèi)滾動狀态元素，這樣可(kě)以做(zuò)到元素固定高(gāo)度且元素內(nèi)容滾動屏幕不滾動的(de)效果；

scroll-view标簽的(de)主要屬性分為(wèi)以下幾種：

微信小程序廣告輪播元素 圖片所在元素/swiper-item

其中屬性有(yǒu)：

圖片更改事件：bindchange='imgchange' imagechange()的(de)e.detail.current為(wèi)當前顯示頁面的(de)下标值

微信小程序ui框架有(yǒu)哪些

微信小程序開發，是目前火爆的(de)開發方式，也是适應中小企業快速解決的(de)一(yī)個方案。選擇一(yī)個合适自(zì)己的(de)開發UI框架，能夠讓自(zì)己開發速度提升數倍。

推薦兩個小程序UI框架：

WeUI

WeUI是由微信官方設計團隊分别支持微信H5網頁和(hé)微信原生小程序的(de)開源UI組件

ColorUI

ColorUI是開源且支持原生小程序的(de)UI組件，由于我(wǒ)目前在幫朋(péng)友改一(yī)個原生的(de)微信小程序，所以就選擇了這款開源組件。

Taro3.4開發微信小程序示例

安裝腳手架

初始化如(rú)下圖，選擇Vue3、Less、vue3-NutUI模闆：

安裝後可(kě)能會出現一(yī)些告警提示，并提示npm audit ，如(rú)下圖

如(rú)果忽略它，在run dev時會報錯，并且報錯提示還比較難懂。

這個報錯的(de)原因是taro的(de)版本不一(yī)緻所引起，需要運行(xíng) npm audit fix 進行(xíng)修複，修複後再運行(xíng)就正常了。

3.1 引入組件

3.2 頁面使用組件

NUTUI幾個有(yǒu)意思的(de)組件，如(rú)table, card,fixednav

4.1 init初始化

app.js中初始化，輸入雲開發ID

4.2 編寫雲函數（另說明）

4.3調用雲函數

用于多端展示，taro應該是有(yǒu)其之長(cháng)處的(de)。如(rú)果僅是用于微信小程序開發，不如(rú)用微信開發者工具。

微信小程序開發ui模闆的(de)介紹就聊到這裏吧(ba)，感謝你花時間閱讀本站內(nèi)容，更多關于微信小程序ui設計、微信小程序開發ui模闆的(de)信息别忘了在本站進行(xíng)查找喔。