微信小程序 在Chrome浏览器上运行以及WebStorm的使用


Posted in Javascript onSeptember 27, 2016

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

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

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

好了,废话说完了:

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

GitHub: https://github.com/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,你就会得到下面的东东:

微信小程序 在Chrome浏览器上运行以及WebStorm的使用

运行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得到了几个功能组件:

  1. define.js,这里就是定义AMD模块化的地方
  2. exparser.js,用于转换WXML标签到HTML标签
  3. exparser-behvaior.js,定义不同标签的一些行为
  4. mobile.js,应该是一个事件库,好像我并不关心。
  5. page.js,核心代码,即Page、App的定义所在。
  6. report.js,你所说的一切都能够用作为你的呈堂证供。
  7. virtual_dom.js,一个virtual dom实现结合wcc使用,里面应该还有component.css,也可能是叫weui
  8. wa-wx.js,定义微信各种API以及WebView和Native的地方,和下面的WX有冲突。
  9. wx.js,同上,但是略有不同。
  10. 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一些方法,如:

  1. window.webkit.messageHandlers.invokeHandler.postMessage
  2. window.webkit.messageHandlers.publishHandler.postMessage
  3. WeixinJSCore.publishHandler
  4. 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);
});

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

GitHub: https://github.com/phodal/weapp-webdemo

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

通过此文,希望能帮助大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js中this的用法实例分析
Jan 10 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
微信小程序 开发指南详解
Sep 27 #Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 #Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 #Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 #Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 #Javascript
javascript动画之模拟拖拽效果篇
Sep 26 #Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 #Javascript
You might like
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php时间戳转换代码详解
2019/08/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python+opencv实现阈值分割
2018/12/26 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
学校安全教育制度
2014/01/31 职场文书
世界遗产的导游词
2015/02/13 职场文书
公安机关起诉意见书
2015/05/20 职场文书
被告答辩状范文
2015/05/22 职场文书
春节晚会开场白
2015/05/29 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
java调用Restful接口的三种方法
2021/08/23 Java/Android
Python字符串常规操作小结
2022/04/03 Python