文档章节

让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm

Phodal
 Phodal
发布于 2016/09/27 10:18
字数 1413
阅读 11004
收藏 98
点赞 10
评论 14

「微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License买了好多年。所以,我觉得他的IDE真不如我这个付费好用。

输入图片说明

而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」。微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了。

如果我们放任下去,未来的Web世界令人堪忧。

输入图片说明

好了,废话说完了:

文章太长不想看,可以直接看Demo哈哈:

源码: https://git.oschina.net/phodal/weapp-webdemo

预览:http://weapp.phodal.com/

真实世界下的MINA三基本元素

「微信小程序」的背后运行的是一个名为MINA框架。在之前的几篇文章里,我们介绍得差不多了。现在让我们来作介绍pipeline:

Transform wxml和wxss

当我们修改完WXML、WXSS的时候,我们需要重新编译项目才能在浏览器上看到效果。这时候后台就会执行一些transform动作:

  1. wcc来转换wxml为一个genrateFun,执行这个方法将会得到一个virtual dom
  2. 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);
});

说了这么多,你还不如去看代码好了:

源码: https://git.oschina.net/phodal/weapp-webdemo 预览:http://weapp.phodal.com/

© 著作权归作者所有

共有 人打赏支持
Phodal

Phodal

粉丝 107
博文 22
码字总数 26954
作品 7
深圳
前端工程师
加载中

评论(14)

小E
小E
多页面要如何实现?
demo只展示了只有一个index,如果pages目录有好多页面呢
花米
花米
这个值得赞
红薯
红薯

引用来自“子弹兄”的评论

引用来自“红薯”的评论

亲,代码放到码云上吧

赶紧升级IOS的App吧,总看着看着就白屏了

已经升级了,苹果不给审核
子弹兄
子弹兄

引用来自“红薯”的评论

亲,代码放到码云上吧

赶紧升级IOS的App吧,总看着看着就白屏了
啦啦啦拉拉
啦啦啦拉拉
Javascript 还是不能触动吗
阿信sxq
阿信sxq
芬达,让我想起了那个要生雪碧的:smiley:
fuygkunlij
fuygkunlij
技术选型的决定因素往往不是技术,在特色的这块土地上,基于微信或微博的话,随时会被封掉,还不用告诉你原因
PSI
PSI
不明觉厉!和微信相关的SDK怎么才能mock呢?
小码农啊森
123
旷视科技face
旷视科技face
:ok_hand:
使用WebStorm进行javascript调试

曾经的选择是使用火狐浏览器的Firebug插件,具体的用法到时候在细说,这篇文章登场的是开发静态网页及javascript的利器--webstorm. 一.相关软件安装和配置   安装WebStorm   WebStorm官网...

java~nick
2017/07/15
0
0
配置webstorm开发微信小程序

微信开发者工具虽然能编辑代码,可以实时预览,如果只用于临时调试代码是足够的,要是作为小程序的开发工具就很显得很弱鸡了,尤其是与功能强悍的webstorm对比,小程序自带的编辑器简直就是玩...

章鱼喵_
07/12
0
0
Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

前言 WebStorm是Jetbrains公司旗下一款JavaScript 开发工具,当你打开这款软件的时候会觉得特别的熟悉,因为它和itellj idea属于同款产品,界面和快捷键基本类似,而且功能非常强大,提示也非...

changyinling520
05/10
0
0
搭建Cocos2d-JS开发环境

使用Cocos2d-JS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书我们推荐WebStorm和Cocos Code IDE工具。 搭建WebSt...

智捷课堂
2015/03/18
0
0
安装和配置—Webstorm入门指南

WebStrom档案 用途:功能强大的前端专用IDE,拥有即时编辑(chrome)、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn...

李长春
2012/11/08
0
2
JavaScript语言基础-环境搭建

我们要想编写和运行JavaScript脚本,则需要:JavaScript编辑工具和JavaScript运行测试环境。下面我们分别介绍一下。 JavaScript编辑工具 JavaScript编辑工具最简单的可以使用一些文本编辑工具...

智捷课堂
2015/03/12
0
0
webstorm使用firefox进行本地调试

由于在Firefox架构中重大变化,远程调试及标准的WebStorm本地调试都没办法在Firefox中工作。这些步骤是可以用于火狐33、34、及35的临时解决办法。 在火狐中允许调试 打开一个火狐浏览器,,点...

在湖闻樟
2015/04/17
0
5
详解配置VS Code/Webstorm来调试JavaScript

译者按: 本文介绍了使用Node Inspector来调试 JavaScript和TypeScript应用。 原文: Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm 🐞🔫 译者......

Fundebug
05/10
0
0
Web开发神器WebStorm 8.0.1之我爱Spy-js

最近试用了Web开发神器WebStorm 8.0.1,WebStorm最新试用版 在其发布的最新工具中Spy-js值得注意(WebStorm 8.0.1全部更新信息)通过Spy-js你可以看到触发代码执行的事件的完整列表,然后帮你...

kouxunli1
2014/04/14
0
3
WebStorm 9正式发布——优越而简单

WebStorm 9带了更多引人注目的新特性。包括支持目前最热门、最强大的开发框架及应用库。并在WebStorm 9集成新的工具和改进性能。这次WebStorm 9正式发布,集合之前测试版的信息,整体给开发者...

kouxunli1
2014/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(五)- 文字排版样式和效果

CoreText进阶(五)- 文字排版样式和效果 效果 以下是三个设置了不同属性的效果图 第一个设置了文字颜色为红色,字体为16号 第二个设置了文字颜色为灰色,字体为16号,对其为居中 第三个设置...

aron1992
23分钟前
1
0
10.23 linux任务计划cron~10.27 target介绍

crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查是...

洗香香
33分钟前
0
0
告警系统主脚本、告警系统配置文件、告警系统监控项目

20.20 告警系统主脚本 告警系统主脚本 main.sh内容 #!/bin/bash#Written by aming.# 是否发送邮件的开关export send=1# 过滤ip地址export addr=`/sbin/ifconfig |grep -A1 "en...

lyy549745
37分钟前
0
0
Don’t Repeat Yourself

在软件工程中,Don’t Repeat Yourself(DRY)是软件开发的原则,旨在减少重复,用抽象代替它,使用数据规范化来避免冗余。 这个原则在维基百科上是说是由Andy Hunt和Dave Thomas《The Pragmat...

woshixin
38分钟前
0
0
搭建webpack项目框架

作者:汪娇娇 时间:2018年6月4日 一、说明 随着业务发展和前端人员的增加,搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面,一开始好像就没考虑其他框架,直接选了webpack。w...

娇娇jojojo
46分钟前
0
0
Java基础——面向对象(内部类)

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 内部类: 1.有名内部类 2.无名内部类 内部类申请...

凯哥学堂
54分钟前
0
0
HttpClient内部三个超时时间的区别

RequestConfig requestConfig = RequestConfig.custom() .setConnectionRequestTimeout(config.connReqTimeout) //从连接池中获取连接的超时时间 ......

1713716445
今天
0
0
每天一个命令SCP

每天一个命令:SCP scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的。可能会稍微影响一下速...

河图再现
今天
0
0
cron/chkconfig/systemd/unit/target

linux任务计划 : cron工具 任务计划在运维工作中用到的比较多,大部分系统管理工作都是通过定期自动执行某个脚本来完成。 查看linux中任务计划的配置文件: /etc/crontab [root@yolks-001 ~]...

Hi_Yolks
今天
1
0
ftp攻略

Vsftpd完全攻略(一)ftp原理与vsftp安装:https://www.iyunv.com/thread-44698-1-1.html Vsftpd完全攻略(二)设置匿名用户也支持下载和上传与创建目录:https://www.iyunv.com/forum.php?mo...

寰宇01
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部