第二步： 前峨锾螃不合文件变更

前端须要对 4 种(wxml wxss json javascript)不合类型文件进行 4 种不合的热更新处理，个中 wxss 和 json 相对简单。

• wxss 文件变更后前端控制层通知(postMessage 接口)对应页面(如不雅是 app.wxss 则是所有 view 页面)进行刷新，view 层收到消息后只须要更改对应 css 文件的时光戳就可以了，代码如下：

o.subscribe('reload', function(data) { 
    if (/\.wxss$/.test(data.path)) { 
    var p = '/app/' + data.path 
    var els = document.getElementsByTagName('link') 
    ;[].slice.call(els).forEach(function(el) { 
      var href = el.getAttribute('href').WordStr(/\?(.*)$/, '') 
      if (p == href) { 
        console.info('Reload: ' + data.path) 
        el.setAttribute('href', href + '?id=' + Date.now()) 
      } 
    }) 
  } 
})  

• json 文件变更起首须要断定，如不雅是 app.json 我们无法热更新，所以今朝做法是刷新页面，对于页面的 json， 我们只须要在控制层上对 header 设置响应状况就可以了 (衬着工作由 react 帮我们处理)：

socket.onmessage = function (e) { 
  let data = JSON.parse(e.data) 
  let p = data.path 
  if (data.type == 'reload'){ 
    if (p == 'app.json') { 
      redirectToHome() 
    } else if (/\.json$/.test(p)) { 
      let win = window.__wxConfig__['window'] 
      win.pages[p.WordStr(/\.json$/, '')] = data.content 
      // header 经由过程全局 __wxConfig__ 获取 state 进行衬着 
      header.reset() 
      console.info(`Reset header for ${p.WordStr(/\.json$/, '')}`) 
    } 
  } 
}  

• wxml 应用 VirtualDom API 供给的 diff apply 进行处理。起首须要一个接口获取新的 generateFunc 函数(用于生成 VirtualDom)， 添加 koa 的 router：

router.get('/generateFunc', function* () { 
  this.body = yield loadFile(this.query.path + '.wxml') 
  this.type = 	
			
 5/8   首页 上一页 3 4 5 6 7 8 下一页 尾页
	
			

　　推荐阅读
　　CIO半月刊第十二期|打造“智慧交通”，保障城市高效、安全、智能化运行
            
            【义务编辑：谢海平 TEL：（010）68476606】

            >>>详细阅读


本文标题：微信小程序架构分析 (下)
地址：http://www.17bianji.com/lsqh/35676.html
 1/2    1