微信小程序是怎么运行的?
微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径
而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。
小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行
整个小程序只有一个 App 实例,是全部页面共享的
----------------------------------------------------------------------------------------------------------------------------
程序与页面
你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js,你可以看到 logs.js 的大体内容就是:
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。
在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。
有关于 Page 构造器更多详细的文档参考 注册页面 Page 。
微信小程序是怎么运行的?的更多相关文章
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序原生开发简介
简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法 文档:https://develope ...
- .NET CORE MYSQL 微信小程序 HTTPS 随笔
今天一天都没有撸码,没写BUG没改BUG,整一天都在弄那个微信小程序的配置了..唉.. 一个项目用的微信小程序,界面做出来了,就等着AJAX取网络数据后再显示到界面上了,查了下文档, 小程序取网络数据 ...
- 【转】微信小程序原理
微信小程序原理 kamidox 关注 2016.11.05 09:42* 字数 2356 阅读 14621评论 5喜欢 75赞赏 1 微信小程序使用了前端技术栈 JavaScript/WXML/WXS ...
- uniapp的微信小程序,获取授权,获取中文街道地理位置
w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...
- 微信小程序剖析【下】:运行机制
在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实 ...
- 教你理解微信小程序的生命周期和运行原理
转自:http://blog.csdn.net/tsr106/article/details/53052879 写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君 ...
- 理解微信小程序的生命周期和运行原理
写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...
随机推荐
- Altium Designer 10 快捷键笔记
一.放置.走线类: 1.交互式走线(Track):P T 2.铺铜(Fill):P F 3.大面积铺铜(Polygon):P G 4.自动扇出:元件封装上右键,C F 二.编辑类 1.调整铺铜(Pol ...
- 安装网卡ifconfig不出现问题
安装万兆网卡,Ethernet controller: Intel Corporation 82599EB 10-Gigabit SFI/SFP+ Network Connection 使用lspci ...
- jmeter插件安装
一.下载插件 访问网址http://jmeter-plugins.org/downloads/all/,下载三个文件.其中JMeterPlugins-Standard和JMeterPlugins-Ex ...
- 微信小程序之点击列表的item带参数跳转界面
1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...
- adb环境配置+常用adb命令+Logcat命令的用法+手动进行文件比对的方法+批量挪bug
1. adb环境配置:下载adb环境变量包:打开计算机属性-高级系统设置-环境变量:新建变量adb,值为刚才的环境变量包路径:编辑path值,在最后面加上;%adb%;确定就妥了 2. 常用adb命令 ...
- css计算属性 calc()
left: calc((100vw - 400px) / 2); calc 进行简单的运算时,运算符号左右各要有一个空格,不然不起作用.
- 我的代码-normalize
# coding: utf-8 # In[13]: import pandas as pdimport numpy as npimport scipy as spfrom os import list ...
- Keuskal算法模板
int cmp(const int i, const int j) { return w[i]<w[j]; }///间接比较函数,w[i]表示边i权值 int find_set(int x) { ...
- Javascrip基础
术语解释 Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速 ...
- Big Event in HDU HDU - 1171
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1171 题意:给出每个物体的价值和物体的数量,如何分使得A,B所得价值最接近并且A的价值不能小于B 思路 ...