微信小程序学习笔记——第一弹：小程序代码结构

    近来被微信小游戏强势刷了一波后，萌生了学习微信小程序/小游戏的冲动~
    作为一个马上就要毕业的学生狗(｡☉౪ ⊙｡)，学习一下新技术，顺道还能丰富自己的简历，简直不能再美滋滋了~~~
    学习笔记会持续更新 至 完成第一个小程序实例，如果以下对小程序的理解有错误的地方，请这位有缘的看官好心修正，小生感激不尽(≖ ‿ ≖)✧~
    以下内容是参考、归纳 微信小程序开发文档 而来~

//===========================================================================
一、get基本装备：小程序账号 + 开发工具
https://mp.weixin.qq.com/ 进入微信公众平台——选择小程序开发文档，按步骤操作。
（注意：邮箱必须没有绑定过微信公众平台、开发平台、其余小程序）



二、查看装备属性：微信web开发者工具
界面十分类似于浏览器代码调试页面，仔细看一下项目文件目录也有一种熟悉感（PS：小生之前做过一段时间前端项目），仿佛有点理解小程序套路了，看来之后的学习能够轻松一点~





三、查看技能属性：代码结构
项目文件目录中的四类文件：JSON配置文件、WXML、WXSS、JS脚本逻辑文件
（1）JSON配置文件：app.json     project.config.json    page.json
其中，page.json中配置内容与app.json内容一致，app.json用于初始全局配置，page.json一般位于pages/logs即，页面或日志文件夹，用于该页面/日志的个性化配置



   


（2）WXML文件：类似于网页开发中的html文件，用于搭建页面结构骨架，实质是以组合html基本标签构成组件，方便用户构建页面，与html的差别见下
    A、标签组件
    组件用x-mind简单归纳了一下：https://pan.baidu.com/s/1o9Gy9Qi

    B、增加wx:if等属性以及{{}}表达式，与vue中v-if等指令属性很类似，目的也相差无几，主要是为了分离视图UI渲染与业务逻辑，形成mvvm模式，抽象出传统网页开发中 获取/修改页面状态并操作DOM树进行视图渲染这一过程，使js只用来管理业务逻辑
    指令用x-mind简单归纳了一下：https://pan.baidu.com/s/1mjz7HhQ

（3）WXSS文件：具有 CSS 大部分的特性，也有一些修改
    A、新增了尺寸单位：rpx 用于适配不同手机，与预期页面效果会有些许差别
建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

    B、 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效
可在wxss中导入外部样式列表：@import+'相对路径名'

/** common.wxss **/
.small-p {
padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

建议：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
    C、 仅支持部分 CSS 选择器



（4）JS文件：处理业务逻辑，通过 事件对象 将视图层与逻辑层串联，可调用微信提供API实现功能逻辑
    A、基本结构，事件绑定可见“WXML指令”的xmind
——APP(object)  注册小程序，一个小程序一次



——Page(object)  注册一个页面



    B、小程序API：文档   https://mp.weixin.qq.com/debug/wxadoc/dev/api/