微信小程序 在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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
使用angular写一个hello world
Jan 23 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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实现文件下载(支持中文文名)
2013/12/04 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
js图片上传的封装代码
2017/08/01 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python  Django中的apps.py的目的是什么
2018/10/15 Python
Django实现跨域请求过程详解
2019/07/25 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
python列表推导式操作解析
2019/11/26 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python模块相关知识点小结
2020/03/09 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
学校门卫工作职责
2013/12/07 职场文书
结婚喜宴主持词
2014/03/14 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
公诉意见书范文
2015/06/05 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书