小程序页面分为三大块
1、页面布局:wxml 类似于html
2、页面样式:wxss 类似于css
3、页面脚本:JavaScript + weixinScript
文件结构
1、app整个应用程序配置类
app.js(脚本) app.json(全局配置) app.wxss(全局样式)
2、page页
page.js(脚本) page.json(页面单独配置) page.wxml(结构) page.wxss(样式)
3、Component 组件
component.js component.json component.wxml component.wxss
小程序mvvm架构
m:model
v:view
vm:viewModel (mina框架)
mina框架:1、DataBindings数据绑定
2、Domlisteners 事件绑定
mvvm框架的好处
将命令式编程转变成声明式编程
命令式编程:按照输入的指令进行动作(原生dom操作)
声明式编程:先声明一个变量,在需要的地方展示即可(Vue、React、Angular框架)
小程序的配置:(详细规则查看官方文档)
project.config.json:项目配置文件,如项目名称、appid 、项目详情中配置等。随项目初始化自动生成,一般不需要修改
sitemap.json:微信搜索相关,是否可以被用户搜索到,一般不需修改
app.json:全局配置
pages:[ ] 页面路径配置
window:{ } 全局默认窗口展示
tabBar:{ } 底部导航
page.json:页面单独配置 会覆盖全局配置
如 页面标题:navigationBarTitleText:“页面标题”
引入组件 usingComponents:{ }
小程序双线程模型
小程序的宿主环境 微信客户端
染层线程:执行wxml、wxss文件,通过webview
逻辑层线程:执行js文件,通过jsCore
最后通过微信客户端合成