微信小程序

微信小程序

• 快速的加载
• 更强大的能力
• 原生的体验
• 易用且安全的微信数据开放
• 高效和简单的开发

如何做到

1. wxapkg文件缓存，更新机制为下次更新，实现快速加载
2. 原生组件、分离逻辑层和渲染层提升体验
3. 统一组件、样式，使用配置文件等方式提升开发效率

小程序与普通网页的区别

• 开发上最大的区别是小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中。

  1. webview中加载了形为https://servicewechat.com/{appid}/{version}/page-frame.html的页面
  2. 通过jsbridge再调用到代码其余部分

反编译

1. 获得wxapkg文件
2. wxapkg有什么?

{ name: '/app-config.json', off: 344378, size: 803 }
{ name: '/app-service.js', off: 345181, size: 47925 }
{ name: '/page-frame.html', off: 393106, size: 78934 }
{ name: '/pages/baseNews/baseNews.html', off: 472040, size: 865 }
{ name: '/pages/index/index.html', off: 472905, size: 2371 }
{ name: '/pages/pics/pics.html', off: 475276, size: 840 }
{ name: '/pages/picsNews/picsNews.html'

app-service.js

在“编译”后所有这些 JS 文件都会被汇总到 app-service.js 文件中

page-frame.html

• $gwx 用于通过 JS 代码生成所有 .wxml 文件，其中每个 .wxml 文件的内容结构都在 $gwx 方法中被定义好并混淆了，我们只要传给它页面的 .wxml 路径参数，即可获取到每个 .wxml 的内容，再简单加工一下即可还原成“编译”前的内容。
• setCssToHead