讓你的「微信小程式」執行在Chrome瀏覽器上,讓我們使用WebStorm
「微信小程式」的開發框架體驗起來,還不錯——自帶了UI框架。但是問題是他的IDE,表現起來相當的糟糕——其實主要是因為,我當時買WebStorm License買了好多年。所以,我覺得他的IDE真不如我這個付費好用。
而且,作為一個擁護自由和開源的 「GitHub 中國區首席Markdown程式設計師」。微信在「微信小程式」引導著Web開向封閉,我們再也不能愉快地分享我們的程式碼了。
如果我們放任下去,未來的Web世界令人堪憂。
好了,廢話說完了:
文章太長不想看,可以直接看Demo哈哈:
真實世界下的MINA三基本元素
「微信小程式」的背後執行的是一個名為MINA框架。在之前的幾篇文章裡,我們介紹得差不多了。現在讓我們來作介紹pipeline:
Transform wxml和wxss
當我們修改完WXML、WXSS的時候,我們需要重新編譯專案才能在瀏覽器上看到效果。這時候後臺就會執行一些transform動作:
- wcc來轉換wxml為一個genrateFun,執行這個方法將會得到一個virtual dom
- wxss就會轉換wxss為css——這一點有待商榷。
wcc和wxss,可以從vendor目錄下獲取到,在“微信web開發者工具”下敲入help
,你就會得到下面的東東:
執行openVendor()
,你就會得到上面的wcss、wxss、WAService.js、WAWebview.js四個檔案了。
Transform js檔案
對於js檔案來說,則是一個拼裝的過程,如下是我們的app.js檔案:
App({
onLaunch: function () { }
})
它在轉換後會變成:
define("app.js", function(require, module){var window={Math:Math}/*相容babel*/,location,document,navigator,self,localStorage,history,Caches;
App({
onLaunch: function () {
}
})
});
require ("app.js");
我假裝你已經知道這是什麼了,反正我也不想、也不會解釋了~~。同理於:
define("pages/index/index.js", function(require, module){var window={Math:Math}/*相容babel*/,location,document,navigator,self,localStorage,history,Caches;
Page({
data: {
text: initData
}
});
require("pages/index/index.js");
至於它是如何replace或者apend到html中,我就不作解釋了。
MINA如何執行?
為了執行一個Page,我們需要有一個virtual dom,即用wcc轉換後的函式,如:
/*v0.7cc_20160919*/
var $gwxc
var $gaic={}
$gwx=function(path,global){
function _(a,b){b&&a.children.push(b);}
function _n(tag){$gwxc++;if($gwxc>=16000){throw 'enough, dom limit exceeded, you don\'t do stupid things, do you?'};return {tag:tag.substr(0,3)=='wx-'?tag:'wx-'+tag,attr:{},children:[]}}
function _s(scope,env,key){return typeof(scope[key])!='undefined'?scope[key]:env[key]}
function _wl(tname){console.warn('template `' + tname + '` is being call recursively, will be stop.')}
function _ai(i,p,e,me){var x=_grp(p,e,me);if(x)i.push(x);else{console.warn('path `'+p+'` not found from `'+me+'`')}}
function _grp(p,e,me){if(p[0]!='/'){var mepart=me.split('/');mepart.pop();var ppart=p.split('/');for(var i=0;i<ppart.length;i++){if( ppart[i]=='..')mepart.pop();else if(!ppart[i])continue;else mepart.push(ppart[i]);}p=mepart.join('/');}if(me[0]=='.'&&p[0]=='/')p='.'+p;if(e[p])return p;if(e[p+'.wxml'])return p+'.wxml';}
//以下省略好多字。
然後在我們的html中加一個script,如
document.dispatchEvent(new CustomEvent("generateFuncReady", {
detail: {
generateFunc: $gwx('index.wxml')
}
}))
就會湊發這個事件了。我簡單的拆分了WXWebview.js得到了幾個功能元件:
- define.js,這裡就是定義AMD模組化的地方
- exparser.js,用於轉換WXML標籤到HTML標籤
- exparser-behvaior.js,定義不同標籤的一些行為
- mobile.js,應該是一個事件庫,好像我並不關心。
- page.js,核心程式碼,即Page、App的定義所在。
- report.js,你所說的一切都能夠用作為你的呈堂證供。
- virtual_dom.js,一個virtual dom實現結合wcc使用,裡面應該還有component.css,也可能是叫weui
- wa-wx.js,定義微信各種API以及WebView和Native的地方,和下面的WX有衝突。
- wx.js,同上,但是略有不同。
- wxJSBridge.js,Weixin JS Bridge
於是,我就用上面的元件來定義不同的位置好了。當我們觸發自定義的generateFuncReady
事件時,將由virtual_dom.js來接管這次Render:
document.addEventListener("generateFuncReady", function (e) {
var generateFunc = e.detail.generateFunc;
wx.onAppDataChange && generateFunc && wx.onAppDataChange(function (e) {
var i = generateFunc((0, d.getData)());
if (i.tag = "body", e.options && e.options.firstRender){
e.ext && ("undefined" != typeof e.ext.webviewId && (window.__webviewId__ = e.ext.webviewId), "undefined" != typeof e.ext.downloadDomain && (window.__downloadDomain__ = e.ext.downloadDomain)), v = f(i, !0), b = v.render(), b.replaceDocumentElement(document.body), setTimeout(function () {
wx.publishPageEvent(p, {}), r("firstRenderTime", n, Date.now()), wx.initReady && wx.initReady()
}, 0);
} else {
var o = f(i, !1), a = v.diff(o);
a.apply(b), v = o, document.dispatchEvent(new CustomEvent("pageReRender", {}));
}
})
})
因此,這裡就是負責DOM初始化的地方了,這裡得到的Dom結果是這樣的:
<wx-view class="btn-area">
<wx-view class="body-view">
<wx-text><span style="display:none;"></span><span></span></wx-text>
<wx-button>add line</wx-button>
<wx-button>remove line</wx-button>
</wx-view>
</wx-view>
而我們寫的wxml是這樣的:
<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>
</view>
很明顯view會被轉換為wx-view,text會被轉換為wx-text等等,以此類推。這個轉換是在virtual dom.js中呼叫的,呼叫的方法就是exparser。
遺憾的是我現在困在 data初始化上面了~~,這裡面有兩套不同的事件系統,有一些困擾。其中有一個是:WeixinJSBridge、還有一個是app engine中的事件系統,兩個好像不能互調。。。
使用WebStorm開發
在瀏覽器上執行之前,我們需要簡單的mock一些方法,如:
- window.webkit.messageHandlers.invokeHandler.postMessage
- window.webkit.messageHandlers.publishHandler.postMessage
- WeixinJSCore.publishHandler
- WeixinJSCore..invokeHandler
然後把 config.json
中的一些內容變成__wxConfig
,如:
__wxConfig = {
"debug": true,
"pages": ["index"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"projectConfig": {
},
"appserviceConfig": {
},
"appname": "fdfafafafafafafa",
"appid": "touristappid",
"apphash": 2107567080,
"isTourist": true,
"userInfo": {}
}
如這裡我們的appname是哈哈哈哈哈哈哈
——我家在福建。
然後在我們的html中引入各個js檔案,啦啦。
我們還需要一個自動化的glup指令碼來watch wxml和wxss的修改,然後編譯,如:
exec('./vendor/wcc -d ' + inputPath + ' > ' + outputFileName, function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
});
說了這麼多,你還不如去看程式碼好了:
相關推薦
讓你的「微信小程式」執行在Chrome瀏覽器上,讓我們使用WebStorm
「微信小程式」的開發框架體驗起來,還不錯——自帶了UI框架。但是問題是他的IDE,表現起來相當的糟糕——其實主要是因為,我當時買WebStorm License買了好多年。所以,我覺得他的IDE真不如我這個付費好用。 而且,作為一個擁護自由和開源的 「GitH
十幾行程式碼就可以讓你的微信小程式掛掉
mpvue ( github 地址請參見)是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心, mpvue修改了 Vue.js 的 runtime 和 compiler 實現,使其可以執行在小程式環境中,從而為小程式開發引入了整套 Vue.js 開發體
讓你的微信小程式具有線上支付
小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 最近需要在微信小程式中用到線上支付功能,於是看了一下官方的文件,發現要在小程式裡實現微信支付還是很方便的
「微信小程式」PHP非同步程序async-helper例項詳解
PHP非同步程序async-helper例項詳解 PHP 的非同步程序助手,藉助於 AMQP 實現非同步執行 PHP 的方法,將一些很耗時、追求高可用、需要重試機制的操作放到非同步程序中去執行,將你的 HTTP 服務從繁重的業務邏輯中解脫出來。以一個較低的成本將傳統 PHP 業務邏輯轉換成非阻塞、高可用、可
「微信小程式」實現獲取當前位置並在地圖上顯示
盆友圈最近真是被微信小程式這貨刷爆了,哪那都是它,作為一個喜歡嘗(作)鮮(死)的前端汪來說,我肯定不會輕易放棄這麼好的嘗試機會,嘛溜的,先搭好環境壓壓驚! 環境搭建 地球人都知道此次微信官方釋出小程式的內測版只給了200個測試名額,作為茫茫
讓你的微信小程式具有線上支付功能
最近需要在微信小程式中用到線上支付功能,於是看了一下官方的文件,發現要在小程式裡實現微信支付還是很方便的,如果你以前開發過服務號下的微信支付,那麼你會發現其實小程式裡的微信支付和服務號裡的開發過程如出一轍,下面我就具體說一下小程式裡微信支付的開發流程和注意點。 1.
對於前端,「微信小程式」其實不美好
微信小程式開放公測了,9月底我曾經寫過一篇 「微信小程式」來了,其中最後一句:“謝天謝地,我居然還是個前端”。 這種火爆的新事物總是令人激動,感謝這個時代。 但是,當我真作為開發者去一行行擼碼,我還是忍不住翻起了白眼。 終於,11/03微信小程式正式開始公測。本著“另殺錯莫放過”的原則,我也開始了自己的微
「微信小程式」來了
ps:微信APP Store、微信小程式、微信應用號都是指同一個事情。 苦逼程式猿剛下班到家,還沒來得及洗漱,收到條小道訊息的推送。於是我有氣無力的拿著手機點開了這條推送訊息,映入眼簾的就是這張封面圖片。 首先,已經有不少人拿到微信小程式的內測; 很榮幸,勞資連需要啥資格都不太瞭解。 微信小程式是個什麼鬼
帶你瞭解微信小程式的取值、傳值、資料儲存
小程式介面設定如下 父級頁面:A介面 子級頁面:B介面 異級頁面:C介面 一.本頁面取值(A介面→A介面) a.例如:input輸入文字獲取到value(鍵盤輸入時觸發) wxml: <input type='text' name="userName" maxleng
【微信小程式控制硬體①】 全網首發,藉助 emq 訊息伺服器帶你如何搭建微信小程式的mqtt伺服器,輕鬆控制智慧硬體!
一、前言; 從去年開始自學前端,到今年的伺服器的學習,也算是自己的一大進步了!這幾天開始搭建小程式的伺服器,琢磨了三天的Nginx中間訊息外掛,期間也是不睡午覺!也許入門Nginx,和大家一樣期
手把手教你實現微信小程式中的自定義元件
前言 之前做小程式開發的時候,對於開發來說比較頭疼的莫過於自定義元件了,當時官方對這方面的文件也只是寥寥幾句,一筆帶過而已,所以寫起來真的是非常非常痛苦!! 好在微信小程式的庫從 1.6.3 開始,官方對於自定義元件這一塊有了比較大的變動,首先比較明顯的感覺就是文件
手把手教你實現微信小程式客服會話聊天,智慧小程式客服!
如果你是一個經常需要接待使用者的小程式,可能已經給小程式添加了一個簡單的客服功能按鈕,讓使用者更主動和你互動! 客服人員可以直接使用微信公眾平臺網頁版客服工具進行客服訊息回覆。或者使用更智慧的第三方小程式客服,來實現更多多維度的操作! 比如多達 15 中的自動回覆,以及多
微信小程式下拉重新整理和上拉載入
example One:如果所有頁面都要開啟下拉重新整理功能: aap.json中: "window":{ "enablePullDownRefresh":true, //開啟下拉重新整理功能 "navigatio
微信小程式:登陸獲取使用者資訊,包括維護3rdSession。(Node.js-Koa)
前兩三個月最常見的問題就是登陸模組的問題了。自己也改了好幾次登陸的問題,從普通登陸,一直改到維護3rdSession。(token) 普通登陸:使用者資料包括appid,secret全部暴露在外,相對來說不安全。 上前臺程式碼塊: wxml <button open-typ
微信小程式斬獲世界大獎後,中小企業怎樣搭上這輛快速列車?
在烏鎮舉行的第五屆世界網際網路大會“世界網際網路領先科技成果釋出活動”,小程式作為一項全新的技術和應用創新,首次獲選世界網際網路領先科技成果。 想進小程式市場,什麼行業適合你?該做什麼小程式? 通過報告看,獲得投資次數最多的領域是媒體、企業服務和教育,資本看好,創業趨勢大半都會往這三個領域上靠攏。
微信小程式下拉載入和上拉重新整理兩種實現方法
方法一:onPullDownRefresh和onReachBottom方法實現小程式下拉載入和上拉重新整理 首先要在json檔案裡設定window屬性 屬性
微信小程式獲取表單初始值,提交改變過的資料
form表單,通過onload(options)獲取的引數給輸入框賦值,提交改變後的引數 <form bindsubmit="submitForm"> <view class='item'> <view class='label'>聯絡
微信小程式下拉重新整理、上拉載入
下拉重新整理: (1)直接呼叫onPullDownRefresh:function()事件,首先設定app.js以及有該需求的頁面json檔案中的 “enablePullDownRefresh”: true, //允許下拉重新整理 “backgroundTextStyle”: “dar
微信小程式學習(18) —— 上拉載入和下拉重新整理
在微信小程式上實現下拉重新整理、上拉載入的效果 使用系統提供的onPullDownRefresh、onReachBottom這2個事件, 前提需要在app.json或page.json配置檔案中設定,才能使用。 app.json是全應用的頁面都可以使用該事件
關於微信小程式unionID、OpenID的區別,以及如何獲取
看圖 問: 1:小程式裡面為什麼要使用OpenID,有什麼意義? 2:小程式既然有了OpenID,為何還要unionID? 答:以下是我個人看法,如有不對地方請指出 1:微信小程式為什麼會有OpenID,其實在微信小程式裡面OpenID,就代表著我們一個人,擁有一個身份證一樣的東