微信小程序1--简易教程

微信小程序开发的第一天
    0.视频太麻烦了,先看一遍官方手册吧
    1.微信开发环境的安装:
        1.安装开发者工具
        2.安装nodeJS的环境
    2.程序的目录和结构:
    当使用快速开始的模板的时候,会自动的生成几个文件
        1. .json后缀的JSON配置文件
        2. wxml ---html
        3. wxss ---css
        4. js ---js文件
*********************************
    1.json文件的作用
        1.app.json
            作用:
                公共样式的配置
                一级目录--一个入口
            代码:
                {
                    "pages":[
                        //里面的元素,是微信小程序的每一个页面啊
                    ],
                    "window":{
                        //在这里设置小程序的导航栏样式和动作
                    },
                    "tarBar":{
                        "list"[{
                            pagePath:"页面的路径",
                            "text":"首页"
                        },
                        {
                            //这不就是路由吗
                            //对目标的页面会有相应的配置的
                        }
                        ]
                    },
                    networkTimeout:{
                        //关于网络延时的设置
                    },
                    "debug":true  //调试模式
                }
        2.page.json
            作用:
                用于log文件夹下的文件的
                    进行单个的页面窗口配置(注意,是窗口的配置)
                    
            代码: 
                {
                  "navigationBarBackgroundColor": "#ffffff",
                  "navigationBarTextStyle": "black",
                  "navigationBarTitleText": "微信接口功能演示",
                  "backgroundColor": "#eeeeee",
                  "backgroundTextStyle": "light"
                }
            理解:
                不就是把app.json的窗口设置单独拿出来了吗
                吓唬我
        3.project.config.json (项目配置文件)
            这个属于开发者工具的配置
            就是,配置你的编辑器---方便的导入和导出配置
                这个,就先不看了
    2.WXML文件
        理解:
            感觉就是一个xml语言
            作用,就是显示页面view----html的作用而已
        代码区别:
            1.小程序自定义了标签
                view,button,text
            2.使用了一些类似于vue的模板语法的东西
                wx:if  {{  }}
            3.执行的机制
                就是mvvm的方式
                使用了数据的绑定-----越来越像vue了
    
    3.WXSS文件:
        理解:
            样式文件,类似于css
        与css的区别:
            1.兼容大部分css样式
            2.使用了新的语法
                rpx :作为单位--这个没使用过(或者是rem的翻版???)
            
    4.js的交互逻辑
        理解:
            还是js文件
        区别:
            1.有了像vue一样的生命周期一样的东西
            2.提供了一些小程序使用的API
        
******************************************
小程序的能力
    1.小程序的启动:(页面的执行顺序)
        1.用户打开小程序
            小程序下载到本地
        2.入口文件---也就是那个主路由
            app.json文件,获取页面的路由
        3.微信软件渲染
            微信客户端,读去pages字段的第一个路由(默认为首页)
            把夜歌首页的代码装载进来,
            并且,渲染出这个页面
        4.然后,onLaunch 事件被触发
            1. 类似于nodeJS --这个是事件驱动的
            2. 这个,属于生命周期初始化完了吧
            3.初始化结束
            
        5.页面只有一个实例,全部页面共享
            单页面引用 ---这就是vue(确定了..哈哈哈)
    2.程序与页面:
        单个页面的装载顺序
        以pages/logs/logs  页面为例
            1.找公共的窗口样式
            2.装载wxml和wxss
        注意:
            这里,貌似也会进行实例化
            vue的子组件('子页面'),也是都需要实例化的
        
    3.微信小程序提供的组件:
        理解:
            就是代码的封装
            类似于vue的组件,也有组件之间的传值
            小程序,将他们封装在标签里面
        代码:
            <map></map>
            涉及了组件的传值,


    4.微信提供的一些API
        案例:(看手册就好)
            1.地理位置
            2.扫一扫
        理解:
            这些方法或者属性属于wx 这个对象,
            那么,wx 是全局对象吗??? --一会儿试试
            
            异步,刚好试试ES6的promise 和 一些ES6的方法
********************************************
开发前的准备;
    准备好了,睡觉......................