微信小程序第三方js（微信小程序第三方支付平台）

本文目錄一覽：

• 1、怎樣使用微信小程序的第三方js庫？
• 2、重磅：微信小程序發布WeUI.js 官方視覺組件庫！
• 3、微信小程序平台開發需要哪些技術
• 4、微信小程序是用什麼技術實現的？
• 5、微信小程序 第三方插件的使用
• 6、寫給Android開發者看的『微信小程序和Android開發的對比』

怎樣使用微信小程序的第三方js庫？

方法一：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

操作鏈接：網頁鏈接

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

微信小程序平台開發需要哪些技術

開發微信小程序需要用到以下技術：

1、wxml，小程序常用語言為wxml，wxml是微信但是你熟悉wxml之後會發現其實它的編程理念和HTML的網頁編程比較類似。

2、wxss，wxss更趨向於CSS,wxss，其實主要的實現思想理念也和網頁的開發技術差別不大，主要是一些標籤的一些簡單替換，大部分和原先的css、基本不誤，都是通過同頁面調用的方式實現的。

3、js，開發小程序還必須掌握js技術，如果html+css+js的基礎打的好，再來學習一下微信小程序js，之後在前端開發上就沒有什麼問題了。

4、伺服器語言，如果不是專業的後端開發者，可能後端有一定的難度其學習曲線較陡。但是，仍然建議開發者學習一下後端語言，至少需要了解大致的原因框架，能夠看懂其代碼邏輯，這樣不僅可以很好地實現前後端的配合，也能夠在小程序出現bug的時候使用。常見的有PHP、Java、Python、ASP等技術。

5、資料庫語言，如果公司數據量不大，架構不複雜的話資料庫語言相對來說是比較簡單的，一般學會一些常用的命令以及常出現的問題就能夠應付使用。常用的資料庫有免費的MySQL、msSQL、MongoDB、Oracle等資料庫。

微信小程序是用什麼技術實現的？

一、微信小程序的wxml

具有基本的編程經驗的工程師，只有與wxml接觸後，您才會發現該語言的編程概念類似於html網頁的編程技術。經過一番研究和開發，您會知道微信小程序的要求技術含量不高，只是更換了一些標籤，例如

已替換為等待狀態。即使您不太擅長前端，轉用微信小程序的發展也將是一個很好的方向。

二、微信小程序的wxss

wxss是微信的CSS。微信用自己的開發語言wxss代替了Web編程中使用的css；實際上，主要的實現思想與Web開發技術基本相同，並且它只是對某些標籤的簡單替換，其中大部分是原始的CSS，基本上是正確的。它們都是通過調用同一頁面來實現的，但是可以說，微信小程序比Web開發更簡單，更方便。例如，只要寫入index.wxml和index.wxss，它就位於兩個文件中。這兩個文件同時位於同一目錄中，就像直接在網頁上寫CSS一樣，這既簡單又快速。

三、微信小程序的js

如果要開發微信小程序，您必須精通微信小程序的js。只要您具有html+css+js的良好基礎，就可以全力學習微信小程序js，然後在前端進行開發。上面沒有問題，但是微信js需要努力學習。您可以購買參考書或了解微信小程序的API，它們可以快速幫助您參與開發隊列。

四、微信小程序的json

掌握了以上幾點之後，您需要掌握json。簡而言之，json是微信小程序的主要和次要介面。工程師可以通過json控制上下菜單欄，主要和輔助頁面的顯示順序。但是，使用頻率不高。它僅適用於基本小程序的框架，但這也需要學習，因為除顯示類型外，每個前端操作都需要與後端匹配，因為如果要使其放大，則必須之所以簡化，是因為修改代碼後，在迷你程序中搜索到的版本就是啟動後的版本，即我們提交微信評論後顯示的版本。修改源代碼後，需要將其提交給微信公眾進行審核。平台小程序管理平台，用戶只能在審核通過後才能看到您的修改，因此，為避免這種麻煩，您必須了解後端技術開發並與前端鏈接以與您進行交流。

實際上，小程序類似於H5表面，並提供了視圖層描述語言。您需要掌握WXML和WXSS以及基於JavaScript的邏輯層框架。這裡的wxml等同於html，而wxss等同於CSS。

微信小程序 第三方插件的使用

各種開發其實都是有插件的，之前我以為小程序沒有，沒想到後來又有了，昨天動手想集成兩個插件試試，沒想到一波三折，這裡記錄一下我踩的坑

1、在微信公眾平台後台，登錄，設置-第三方服務-添加插件。這裡以添加”極點日曆”為例

注意最多只能添加5個哦

2、搜索你要的插件，並添加

添加成功後，就可以在插件管理下面看到你添加的插件了

3、在app.json中添加插件

這裡的插件名可以自己隨意取

這裡以tx-map為例，參考它的文檔

在app.json中添加相關信息

而provider即AppID，version即版本號

在項目中具體怎麼使用，要看開發文檔，而開發文檔我發現有些插件有，有些插件並沒有，反正自己多查查吧

4、在目標頁面的json文件里引用該插件

注意這裡的tx-map即在app.json取的那個名字，而map-route也可以自己取，這裡取啥，到時候wxml里用的組件就是這個名字

5、在目標頁面的wxml文件里使用該插件

如果要使用插件的 js 介面的話，在js里，使用requirePlugin(在app.json里命名的插件的名字)，就能獲得插件對象，比如：

6、查看效果

這個你可以嘗試調整你的調試基礎庫版本，我之前是1.9.1，調整到2.1.1就好了。

這個真心沒搞懂，因為這個錯誤是看心情出現的，一會兒好一會兒不好的，有點不穩定的樣子，據說是降低調試基礎庫版本

這個也是看心情出現的（目前仍然是懵逼臉，不曉得是我錯了，還是插件有問題）

寫給Android開發者看的『微信小程序和Android開發的對比』

微信小程序近期可謂是動作頻出，僅最近新增的能力就有：

種種跡象表明，微信對小程序的期望值是很大，所以在它推出的幾個月效果沒到達預期的情況下，之前的很多『克制』也就逐漸變成『放肆』了 —— 不過不管小程序以後的發展到底怎樣，對我們開發者來發，多了解一些總是沒有壞處的。

他山之石，可以攻玉。

對於是技術人來說，多了解一些不同的技術、不同的開發模式、不同的架構思想，提高技術『廣度』，對於自己的成長是十分必要的。

所以，本文就是從一個 Android 開發者的角度，從項目工程方便切入，來分析一下『微信小程序』跟『Android App』開發上的一些異同。

『微信小程序』開發是一個相對較新的技術，希望通過本文，能讓你對它多一些了解。

因為內容是從Android開發的角度來談的，所以我假設你已經對 Android 開發比較熟悉了。並且對微信小程序的開發也比較感興趣，如果要是再能有些 javascript、css 的基礎的話那就更好了！

Android 開發我們已經比較熟悉——

作為對比，進行微信小程序開發所用的語言是這些——

wxml (WeiXin Markup Language) 基本約等於是 xml。微信之所以沒有直接使用 xml ，可能是為了以後擴展方便一些（野心很大）。

同理， wxss (WeiXin Style Sheets) 基本約等於是 css。也是微信擴展了一些功能，比如統一的尺寸單位 rpx 。

對於 Android 來說，對於頁面的描述基本上在 xml 中定義的，比如：

這是一個簡單的典型的示例，這個文件就是描述了兩部分內容：

some.wxss:

很明顯可以看出：wxml 是負責了 頁面結構 的展示；而 wxss 則負責了對 頁面樣式 的定義。

這種把結構和樣式分離的做法，其實是延續了網頁開發中的習慣（html + css）。

這樣做的好處起碼有兩個：

——看起來還是挺簡單的結構:

這三個文件用以描述小程序 app 相關的內容，他們的命名是固定這樣的，位置也固定是在根目錄下。

app.js 基本相當於 Android 中的 Application 類，文件中主要是有一個 App() 函數，來進行小程序的初始化操作。

app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是靜態化的配置文件。

app.wxss 定義全局的樣式 —— 其定義的樣式會作用於每個頁面。比如在 app.wxss 中加入：

就可以給所有的 text 控制項添加 5px 的 padding 。

當然，頁面本身的 xxPage.wxss 可以定義局部樣式來覆蓋全局樣式。

根目錄下的 utils 文件夾中有一個 util.js 文件，這個故名思意，是類似於 Java 中的一些工具類的存在。

utils 文件夾其實是一個非必須的結構，而它之所以出現在官方的 HelloWorld 工程中，是作為一個代表，表明了開發者在這裡是可以自定義新的文件夾和結構的。微信小程序作為一個使用 js 來開發的平台，是可以使用許多第三方的 js 庫的，對於這些第三方庫，以及其他的圖片資源等，都可以放到自定義的文件夾中。

pages 文件夾下包含兩個子目錄：index 和 logs ，兩個目錄的結構都是基本一樣的，都是包含四個相同主名稱的文件： xx.js、xx.wxml、xx.json、xx.wxss 這幾個文件。

這樣的一個典型結構表明它是一個小程序的頁面，四個文件的作用分別是：

在視圖的動態顯示上，微信小程序使用了 數據綁定（data-binding） 的方式。

如果你之前使用過 AngularJS 或者 Vue.js 等這些流行的 js 框架，那麼你肯定對 數據綁定 並不陌生。它是一種把一個控制項的屬性綁定到某個數據對象（view-model）的屬性的方法，這樣在改變數據對象屬性的時候，所對應的控制項屬性也就會相應變化 —— 在開發中，這種方式會使得對 View 層的顯示控制變得十分簡單、自然。

基於此，軟體工程的流行架構方式也在之前的 MVC 、 MVP 之外，又多了一個 —— MVVM（Model-View-ViewModel） 。

數據綁定 這種方式現在是如此的流行，以致於 Android 官方都出了一個 [Data Binding Library] ( ) 來支持數據綁定，但是由於成熟度等原因，目前還並沒有成為主流，Android 中的主流視圖顯示方式，還是通過開發者手動給每個控制項 set 數據。

—— 單從這一點上看，微信小程序的開發模式是比原生 Andorid 要『先進』一些的~ ?

小程序雖然是和前端 H5 頁面一樣是用 js 來開發，但是由於它最終運行的平台不再是瀏覽器，而是和 App 的表現幾無二致，所以頁面的生命周期也是和 App 差不多的。

一個小程序頁面的典型生命周期如下：

對比一下 Android 的 Activity 生命周期 ：

微信小程序的頁面生命周期稍微簡單一些，但主要的思想跟 Activity 生命周期基本是一致的。

小程序的官方 IDE 是微信自己出品 微信Web開發者工具 ，它內置了一個小程序的運行環境，本質上是基於 Chrome 內核的一個瀏覽器框架，算是一個模擬器了。

——它雖然跟 Android 的各種高大上的模擬器相比起來略顯簡陋，但是基本該有的功能也基本都有（斷點、Log、網路監控等），而且由於是基於瀏覽器內核的頁面 DOM 解析，所以運行的速度也是像瀏覽器打開網頁一樣流暢，不會像 Android 模擬器那樣對系統資源要求很高。

另外，在綁定了開發者賬號之後，也可以用手機進行真機調試來調試小程序，所以也能在上線前用不同的機器來進行充分的兼容性測試。

總體來說，小程序作為一個新的形態，從開發的角度，它可以算作是一個【Native開發】和【H5開發】的結合，它吸收了原生開發和 H5 開發的優點。對於前端開發人員和原生開發人員來說，都可以在微信小程序中找到許多熟悉的東西。再細節的許多點這裡就不在贅述了，大家如果有興趣，可以自己上手去體驗一下。

綜上，自然也就有兩種人特別適合去做小程序的開發——H5的前端開發人員，以及之前的 Android/iOS 原生 App 開發者。

微信小程序的開發總體來說是很簡單的。

—— 對於前端開發者來說，了解一下原生 App 的一些相關思想即可，這些工作其實只要讀一遍小程序的開發者指南基本就差不多了。

—— 而對於原生開發者來說，只要稍微補一下 js 的相關知識（html/css），也基本就差不多可以上手去做了。如果你之前恰好已經有過一些 js 的使用經驗，那就不用多說了，花半個小時看一下小程序的文檔，直接上！

關於作者 :