微信小程序中引入js（添加微信小程序）

本文目錄一覽：

• 1、微信小程序 怎麼用第三方js庫 jquery
• 2、微信小程序，weixin，小程序怎麼引入js閉包
• 3、微信小程序wxml中使用js函數
• 4、微信小程序（上）
• 5、重磅：微信小程序發布WeUI.js 官方視覺組件庫！

微信小程序 怎麼用第三方js庫 jquery

方法一：rpn.js：使用rpn.js實現eval函數功能

操作鏈接：網頁鏈接

方法二：

（1）使用Underscore.js：操作鏈接：網頁鏈接

（2）使用Immutable.js：操作鏈接：網頁鏈接

（3）使用UUID、Base64、Chance：操作鏈接：網頁鏈接

擴展微信小程序框架功能（1）——Promise

ES6 對 Promise 有了原生的支持，但微信開發者工具更新版本（0.11.112200）後, 移除了開發者工具對 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 庫。

擴展微信小程序框架功能（2）——Generator

Generator函數是ES6提供的一種非同步編程解決方案，語法行為與傳統函數完全不同。

擴展微信小程序框架功能（3）——函數功能增強

Underscore.js 和 Lodash 是最常用的JavaScript庫。

擴展微信小程序框架功能（4）——Immutable.js

Immutable.js 是 Facebook 開發的不可變數據集合。Immutable

Data（不可變數據）一旦創建就不能被修改。通過使用Immutable

Data，可以更容易的處理緩存、回退、數據變化檢測等問題，應用開發更簡單。

擴展微信小程序框架功能（5）——Redux

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。

擴展微信小程序框架功能（6）—日期時間

Moment.js是一個JavaScript的日期、時間處理工具類，其對於JavaScript的日期時間處理功能非常強悍和全面。可以用在瀏覽器環境中使用，也可以在Node.js中。

擴展微信小程序框架功能（7）——正則表達式

XRegExp 是一個開源的 JavaScript庫，提供一個參數化、可擴展的支持各種瀏覽器的正則表達式的實現庫，支持附加語法、標誌以及方法。

擴展微信小程序框架功能（8）——Xml處理

x2js是一個 實現 XML 與 JavaScript 對象之間相互轉換的工具庫。

擴展微信小程序框架功能（9）——加解密

node-uuid可以快速地生成符合規範 的 UUID。js-base64可以實現Base64編碼和解碼。crypto-js可以非常方便地在 JavaScript 進行加解密。

擴展微信小程序框架功能（10）——測試輔助

Chance是一個 JavaScript 隨機數生成工具。Mock.js可以生成隨機數據，攔截 Ajax 請求。

方法三：moment

操作鏈接：網頁鏈接

微信小程序，weixin，小程序怎麼引入js閉包

一個小程序頁面由四個文件組成，分別是：js

頁面邏輯 、wxml

頁面結構 、wxss

頁面樣式表 、json

頁面配置 。把樣式寶貝到當前頁面同名的.wxss文件裡面就可以了！

微信小程序wxml中使用js函數

上邊這種寫法不生效，在小程序中不支持這種語法。

需要創建一個wxs文件，

在wxml文件中引入該文件，並調用你想要用到的函數

微信小程序（上）

註冊開發者賬號：

安裝小程序開發工具：

創建項目

pages目錄：用於存放所有的頁面。

utils目錄：用於存放工具類文件。

app.js：是入口文件，程序在運行時，首先要執行該文件。

app.json：是全局配置文件，用於配置小程序的信息（它裡面配置的是全局信息）。

app.wxss：是全局樣式文件。全局樣式文件裡面定義的選擇器，在所有的頁面中生效。

project.config.json：是項目配置文件。

sitemap.json：是SEO配置文件，方便用戶搜索到該小程序。

（1）pages配置項

pages裡面註冊的是視圖。用於指定小程序由哪些頁面組成，每一項都對應一個頁面的路徑（含文件名）信息

（2）window配置項

window 是全局窗口配置。

backgroundTextStyle 設置文本樣式（下拉loading的樣式），僅支持 dark / light。

navigationBarBackgroundColor 設置導航欄背景。

navigationBarTitleText 設置導航欄文本。

navigationBarTextStyle 設置導航欄標題顏色，僅支持 black / white。

（3）style

style 設置樣式級別，默認是v2。

（4）sitemapLocation

sitemapLocation 指明sitemap.json 的位置；默認為 ‘sitemap.json’ 即在 app.json 同級目錄下名字的 sitemap.json 文件。

每一個頁面由四個文件組成：xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。

（1）xxx.wxml文件

xxx.wxml文件，就相當於一個html文件。在wxml文件中，不能寫傳統的html標籤，只能寫微信提供的組件。

① view組件

相當於div標籤。

② text組件

相當於span標籤。

③ swiper

swiper是滑塊視圖容器，它裡面只能放swiper-item組件。

swiper組件的常用屬性：

circular是銜接滑動

autoplay是自動切換

interval是自動切換時間間隔

indicator-dots是否顯示面板指示點

indicator-color指示點顏色

indicator-active-color當前選中的指示點顏色

④ image

image是圖片組件，最好全部採用網路圖片，因為小程序的總體積不允許超過2MB。

（2）xxx.wxss文件

xxx.wxss文件，就相當於一個css文件。在wxss文件中，最好不要寫標籤選擇器和id選擇器，統一寫類選擇器。

為了讓小程序裡面的內容在各種設備上能夠自適應顯示，微信推出了響應式單位：rpx。在iphone6中，2rpx=1px。

（3）xxx.js文件

xxx.js文件，是交互文件（核心文件）。

Page()函數，返回頁面對象，該函數需要傳一個配置參數，這個配置參數是一個對象。在這個配置對象中，定義當前頁面的所有內容。

① data

定義頁面的數據。

② 自定義函數

開發者可以添加任意的函數或數據到Object 參數中，在頁面的函數中用this可以訪問。

（4）xxx.json文件

xxx.json文件，是頁面的配置文件（它裡面配置的是當前頁面信息）。

WXML 中的動態數據均來自對應 Page 的 data。

（1）獲取data中數據

通過插值表達式{{}}，可以顯示js裡面定義的data裡面的數據。

（2）組件屬性(需要在雙引號之內)

（3）運算

可以在{{}} 內進行簡單的運算。

① 三元運算

② 邏輯判斷

bindtap是觸屏事件，其實就是相當於網頁中的點擊事件。

小程序中bindtap綁定方法時不能傳參數。所以組件通過data-xxx傳遞數據。

注意： 自定義屬性的命名用駝峰或者大寫命名，小程序內部會自動轉成小寫。

8、setData()方法

setData()方法，更新頁面中數據。頁面數據更新後，調用setData()方法重新渲染到頁面。

wx:for指令用於循環數組數據，生成組件。

循環出來的每一項通過item返回，每一項對應的索引，通過index返回。

wx:key=””，設置每一項唯一的標識。循環列表時，添加wx:key的好處是，將來列表發生變化時重新渲染列表的損耗為更低。

條件渲染可以使用wx:if或hidden。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

wx:if用於條件渲染：條件為真生成裡面的內容，條件為假不會生成裡面的內容。（每次重新生成內容）

也可以用wx:elif 和 wx:else 來添加一個 else 塊。

hidden用於條件渲染：條件為真隱藏裡面的內容，條件為假顯示裡面的內容。（每次切換樣式）

在app.json文件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。

color：tab上的文字默認顏色，僅支持十六進位顏色。

selectedColor：tab上的文字選中時的顏色，僅支持十六進位顏色。

backgroundColor：tab的背景色，僅支持十六進位顏色。

borderStyle：tabbar上邊框的顏色， 僅支持 black / white。

position：tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。

custom：自定義tabBar。

（2）list

list：tab的列表。

list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。

pagePath：頁面路徑，必須在pages 中先定義。

text：tab 上按鈕文字。

iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。selectedIconPath：選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。

（1）跳轉普通頁面

方法① navigator組件

方法② navigateTo()方法

navigateTo()方法，用於跳轉普通頁面。

（2）跳轉tabBar頁面

方法① navigator組件

如果要使用navigator組件跳轉tabBar頁面，需要設置open-type=”switchTab”。

方法② switchTab()方法

switchTab()方法，用於跳轉tabBar頁面。

title：提示的標題

content：提示的內容

success：介面調用成功的回調函數。回調函數中的confirm屬性返回true，表示點擊的是確定按鈕，否則是取消按鈕。

title：提示的內容

icon：圖標

duration：消息提示框的顯示時間

mask：是否顯示透明蒙層，防止觸摸穿透

模塊化語法有兩種：① commonjs規範，② es6規範。

nodejs環境採用的就是commonjs規範。採用exports 或 module.exports 導出成員，採用require() 導入成員。

微信小程序支持commonjs規範，同時還支持官方的ES6規範。ES6規範採用export 導出成員，採用import 導入成員。

將封裝的方法放到util目錄下的js文件中。可以新建js文件，也可以寫在直接util.js文件中。

（1）確認框方法

定義確認框方法，並導出

（2）消息框方法

定義消息框方法，並導出

（3）獲取事件參數的方法

import是ES6的導入語句。

wx對象是微信小程序的全局對象，在任何地方都可以使用。

（1） 註冊語句

（2） 在app.js入口文件中導入

注意： 註冊給wx對象的方法，需要在app.js文件中導入，才可使用。

（3） 調用方法

wx.方法名(參數)

重磅：微信小程序發布WeUI.js 官方視覺組件庫！

12月16日，微信正式發布了WeUI.js動態視覺組件庫。WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，可以讓用戶的使用感知更加統一。WeUI.js動態視覺組件庫包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。

一、weui.js是什麼？

weui.js是WeUI的輕量級JS封裝，不需要依賴其它庫，GZIP後僅有9.0 KB。

二、weui.js包含哪些組件？

actionsheet

alert

confirm

dialog

form

gallery

loading

picker

searchbar

slider

tab

toast

toptips

uploader

三、使用方式：

Github：

詳細文檔：

四、微信團隊為何在此時公布官方視覺組件庫：

1、為了更像微信OS

微信團隊和之前的輕應用平台相比，不是簡單為了給開發者和用戶之間提供一個平台連接、也不是只為了做一個流量入口平台那麼簡單，而是為了打造一個完美的微信OS生態。當年百度、UC等平台推出的輕應用，更多的只是起到了一個平台倒流和連接的作用，並沒有對開發框架和設計規範進行過如此統一的規範和要求。現在看來，最好的生態，當然是類似蘋果安卓OS那樣，所有的應用具備統一的開發框架和接近OS生態的完美體驗。

2、為了極致的用戶體驗

從小程序內測到公測已經過去了三個月，我們有理由相信微信團隊已經接到了不少小程序開發者的審核需求，這其中最讓微信團隊頭疼的應該就是開發設計規範不符合微信團隊的要求，達不到微信團隊想要的那種用戶體驗。微信官方進一步推出Weui就是為了讓所有開發者提交的小程序都能夠接近微信APP的體驗效果，從而給微信用戶帶去最佳的用戶體驗，這也是未來小程序生態能否提高8億用戶使用熱度和頻率的一個重要指標。

3、倒逼第三方服務商轉型

微信團隊在早年推出公眾號的時候曾經推出過「開發者模式」，當時，微信團隊鼓勵第三方公司利用微信公眾號開放的介面進行各種微應用的開發，比如：微網站、微商城，微工具等各種應用。但是，微信團隊早期並沒有對這些接入應用的開發框架和設計規範進行統一的定義和嚴格要求，導致每一個服務接入商基本都是按照自己的開發框架和設計標準進行開發來設計，使得市面上看到的這些應用頁面呈現五花八門，用戶體驗極其糟糕，這也就造成了早期的應用服務被用戶的接受度過低，同時無法給企業帶來實際價值的癥結所在。隨著微信小程序的出現，微信團隊重塑統一的開發框架和設計規範，倒逼這些第三方服務機構重新定義自己的跟隨策略，按照新的開發規範重新提供新的平台服務。或許，現有的微信第三方服務機構格局將被打破，第三方服務機構將面臨新一輪的洗牌。

五、WeUI.js給小程序開發者帶來了哪些好處？

1、使用Weui設計出來的小程序如同用戶使用微信客戶端一樣的視覺效果，可以讓小程序的體驗感更強。

2、使用Weui設計小程序更夠提高開發者的開發效率，降低開發者的開發成本，從而讓開發者更快的開發出符合規範的小程序。

3、使用Weui設計小程序如同您僱傭一支國內頂尖的設計團隊幫您打造一個接近完美的視覺框架。

六、微信小程序給前端設計領域帶來了那些影響和推動：

1、全平台兼容

微信小程序重新定義了APP，使得一款應用能夠在android、iphone以及windows

phone中都能運行，對於前端來說實現了「一次編譯，到處運行」的理念。

2、前端開發思維的改變

設計理念需要從傳統的PC思維需要轉向到以移動為先的思維，這其中主要考慮的差異化在於屏幕尺寸、網路帶寬、輸入設備等幾個方面的不同。同時很多之前可以用於iOS與Android的控制項需要在小程序上重新調整和創新。

3、推動前端技術的發展

微信小程序以其簡單的開發環境，使以Javascript和HTML5為主的前端技術成為真正的主流，越來越多的人開始接觸前端開發，為前端技術的發展貢獻力量。

4、前端投入成本的增加

原本一家傳統企業的前端開發人員需要覆蓋PC端、移動端、APP應用等各種平台，微信小程序的出現會導致未來的前端開發人員還需要涉及小程序的前端開發設計，這在一定程度增加了前端開發人員學習和工作成本，同時也會給企業帶來更多的人才投入成本。

5、前端人才的競爭更加明顯

微信小程序的誕生會吸引一大批後台開發、APP開發的程序猿們加入前端開發大軍，進一步衝擊現有的前端開發人員的的知識結構，加劇前端開發崗位的競爭格局，迫使一些低端且知識結構不全面的前端開發人員面臨被淘汰或者失業的風險。

6、全棧工程師會越來越吃香

隨著微信小程序的出現，既懂後台，又懂前端的人才會越來越受到企業的重視和擁抱，特別對於創業團隊和互聯網企業來說，一個擁有全局思維、熟悉各種技術的人才非常重要。身為技術人員，我們需要不斷擁抱變化，不斷get新技能，努力成為一個全棧工程師。

微信正式發布WeUI.js動態視覺組件庫，這意味著，大家可以在小程序裡面，直接使用在官方設計文檔附錄中的視覺組件（而不需要額外引入其他庫）。微信團隊真的是用心在打造小程序生態，筆者也是真的在用心給大家帶來更多乾貨，這也是筆者第一時間給大家帶來的解讀。碼字不易，如果本文對你和你身邊的朋友有所啟發，感謝轉發，你的支持是我們碼字員最大的動力。