【移動應(yīng)用開發(fā)技術(shù)】微信小程序在Chrome瀏覽器上運行以及WebStorm的使用方法

在下給大家分享一下微信小程序在Chrome瀏覽器上運行以及WebStorm的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！「微信小程序」的開發(fā)框架體驗起來，還不錯——自帶了UI框架。但是問題是他的IDE，表現(xiàn)起來相當(dāng)?shù)脑愀狻鋵嵵饕且驗?，我?dāng)時買WebStormLicense買了好多年。所以，我覺得他的IDE真不如我這個付費好用。而且，作為一個擁護(hù)自由和開源的「GitHub中國區(qū)首席Markdown程序員」。微信在「微信小程序」引導(dǎo)著Web開向封閉，我們再也不能愉快地分享我們的代碼了。如果我們放任下去，未來的Web世界令人堪憂。好了，廢話說完了：文章太長不想看，可以直接看Demo哈哈：GitHub:/phodal/weapp-webdemo預(yù)覽：/真實世界下的MINA三基本元素「微信小程序」的背后運行的是一個名為MINA框架。在之前的幾篇文章里，我們介紹得差不多了?，F(xiàn)在讓我們來作介紹pipeline：Transformwxml和wxss當(dāng)我們修改完WXML、WXSS的時候，我們需要重新編譯項目才能在瀏覽器上看到效果。這時候后臺就會執(zhí)行一些transform動作：1.wcc來轉(zhuǎn)換wxml為一個genrateFun，執(zhí)行這個方法將會得到一個virtualdom2.wxss就會轉(zhuǎn)換wxss為css——這一點有待商榷。wcc和wxss，可以從vendor目錄下獲取到，在“微信web開發(fā)者工具”下敲入help，你就會得到下面的東東：運行openVendor()，你就會得到上面的wcss、wxss、WAService.js、WAWebview.js四個文件了。Transformjs文件對于js文件來說，則是一個拼裝的過程，如下是我們的app.js文件：App({

onLaunch:

function

()

{

}

})它在轉(zhuǎn)換后會變成：define("app.js",

function(require,

module){var

window={Math:Math}/*兼容babel*/,location,document,navigator,self,localStorage,history,Caches;

App({

onLaunch:

function

()

{

}

})

});

require("app.js");我假裝你已經(jīng)知道這是什么了，反正我也不想、也不會解釋了~~。同理于：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，我們需要有一個virtualdom，即用wcc轉(zhuǎn)換后的函數(shù)，如：/*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')

}

}))就會湊發(fā)這個事件了。我簡單的拆分了WXWebview.js得到了幾個功能組件：define.js，這里就是定義AMD模塊化的地方exparser.js，用于轉(zhuǎn)換WXML標(biāo)簽到HTML標(biāo)簽exparser-behvaior.js，定義不同標(biāo)簽的一些行為mobile.js，應(yīng)該是一個事件庫，好像我并不關(guān)心。page.js，核心代碼，即Page、App的定義所在。report.js，你所說的一切都能夠用作為你的呈堂證供。virtual_dom.js，一個virtualdom實現(xiàn)結(jié)合wcc使用，里面應(yīng)該還有component.css，也可能是叫weuiwa-wx.js，定義微信各種API以及WebView和Native的地方，和下面的WX有沖突。wx.js，同上，但是略有不同。wxJSBridge.js，WeixinJSBridge于是，我就用上面的組件來定義不同的位置好了。當(dāng)我們觸發(fā)自定義的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",

{}));

}

})

})因此，這里就是負(fù)責(zé)DOM初始化的地方了，這里得到的Dom結(jié)果是這樣的：<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會被轉(zhuǎn)換為wx-view，text會被轉(zhuǎn)換為wx-text等等，以此類推。這個轉(zhuǎn)換是在virtualdom.js中調(diào)用的，調(diào)用的方法就是exparser。遺憾的是我現(xiàn)在困在data初始化上面了~~，這里面有兩套不同的事件系統(tǒng)，有一些困擾。其中有一個是：WeixinJSBridge、還有一個是appengine中的事件系統(tǒng)，兩個好像不能互調(diào)。。。使用WebStorm開發(fā)在瀏覽器上運行之前，我們需要簡單的mock一些方法，如：window.webkit.messageHandlers.invokeHandler.postMessagewindow.webkit.messageHandlers.publishHandler.postMessageWeixinJSCore.publishHandlerWeixinJSCore..invokeHandler然后把config.json中的一些內(nèi)容變成__wxConfig，如：__wxConfig

=

{

"debug":

true,

"pages":

["index"],

"window":

{

"backgroundTextStyle":

"light",

"navigationBarBackgroundColor":

"#fff",

"navigationBarTitleText":

"WeChat",

"navigationBarTextStyle":

"black"

},

"projectConfig":

{

},

"appserviceConfig":

{

},

"appname":

"fdfafafafafafafa",

"appid":

"touristappid",

"apphash":

2107567080,

"isTourist":