微信小程序 初始

     小程序基础
    1.目录结构
        （1）根目录下有：
                app.js          小程序逻辑
                app.json        小程序公共配置
                app.wxss        小程序公共样式表
               根目录下有一个文件夹
        （2）pages文件夹 ：这个文件夹中放当前小程序中所有的页面
               每个页面的格式都是一致的；都有一个文件夹,文件夹中有4个文件
                xx.wxml     页面结构            必须
                xx.js       页面的业务逻辑      必须
                xx.json     当前页面的配置      可选
               xx.wxss     当前页面的css样式   可选
       （3）其他数据建议放在根目录下，有自己文件夹
                比如：想有一个放图片的地方，可以在根目录下创建images文件夹
                比如：想有一个放静态数据的地方，可以在根目录下创建一个data文件夹
    2.app.json
       （1）作用：小程序公共配置
       （2）这个配置文件夹中可以有如下可选项
                "pages":[       // 页面路径
                    "pages/index/index",
                    "pages/about/about"                   
                ]
          PS：1.页面路径的后缀不要加，只写文件名
                   2.最后一个页面路径后，一定不要加","，否则报错
                   3.pages数组中的第一个元素项是小程序进入时显示的第一个页面
                "window":{
                    "navigationBarBackgroundColor":"#000",
                    "navigationBarTextStyle":black/white,
                    "navigationBarTitleText":"标题",
                    "backgroundColor":"背景颜色",
                    "backgroundTextStyle":"black/white",
                    "enablePullDownRefresh":true,
                    "onReachBottomDistance":number,
                    "pageOrientation"
                 },
                "tabBar":{
                    "color":"HexColor",        // tab 上的文字默认颜色
                    "selectedColor":"HexColor",
                    "backgroundColor":"HexColor",
                    "borderStyle":"black/white",
                    "position":"bottom/top"
                    "list":[{
                        "pagePath":"",页面路径
                        "text":"", 提示文字
                        "iconPath":"图标路径",
                        "selectedIconPath":"被选中时图片路径"
                    },{
                    }]   
                }
                // 说明:1.只能配置最少 2 个、最多 5 个 tab
                // 2.每一个tabBar元素项有4个属性
                // 3.tabBar默认放在页面底部，如果放到页面顶部，图标会自动隐藏起来。
            }
    3.app.js
        （1）说明：每个小程序有且仅有一个，作用是定义整个小程序的逻辑。生命周期回调函数、页面不存在的函数、页面错误的函数、全局数据
        （2）配置
            App({
                onLaunch (options) {
                    // Do something initial when launch.
                },
                onShow (options) {
                    // Do something when show.
                },
                onHide () {
                    // Do something when hide.
                },
                onError (msg) {
                    console.log(msg)
                },
                onPageNotFound(){

                }
                globalData: {}
            })
       （3）生命周期函数：onLaunch，onShow，onHide
                解释：生命周期函数，当小程序创建后，会自动执行的一些函数。在运行的不同阶段会被触发执行。
                onLaunch：只会被触发一次，在刚进入小程序时触发，对小程序初始化
                onShow：当小程序从后台进入到前台时触发
                onHide：小程序隐藏时触发

                 globalData：是全局数据，可以在任何页面中被访问到

    4.app.wxss
       （1）作用：定义全局css样式
       （2）尺寸单位：
                rpx:可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。
               1px=2rpx;
        （3）样式导入
                可以导入外部写好css样式
                @import '外部css路径'
        （4）小程序建议使用弹性盒布局
                弹性盒布局：
                display:flex;
    5.xx.wxml
       （1）说明：定义页面结构的。
       （2）微信中定义了一套新的标签，使用时最好使用微信定义的，不要使用div+p+span
                视图容器：view  块级元素
                                 swiper  轮播图元素
                                 scroll-view 可滚动视图区域
                 基本内容：text  文本标签
                 表单：Input
                            单选、多选、下拉框、文本域
                            日历、switch
                导航：navigator 相当于a标签，可以实现页面跳转
                媒体：image,audio,video
                地图：map
                画布：canvas
        （3）能帮定一些语法
            ①数据绑定：{{}}
            ②条件选择：wx:if = "条件"
                                 wx:elif
                                 wx:else
             ③列表渲染：wx:for="{{list}}"
                 有两个默认的键名：
                           item    循环的键值
                           index   循环下标
                  修改默认键名：
                          修改item,  wx:for-item = 'value'
                          修改index, wx:for-index = '新值'
                   遍历时需要添加 wx:key='值'，保证遍历每一个元素都是唯一的，防止报错。
            ④绑定事件
                    点击事件: tap
                    触摸事件：touchstart
                                     touchmove
                                     touchend 
                    长按事件：longpress
                    css3动画事件：transitionend
                                             animationstart
                                             animationend
                    绑定事件：
                                允许事件冒泡： bind+事件
                               不允许事件冒泡：catch+事件
                     举例：<view bindtap="事件函数||表达式"></view>
                PS：1.事件绑定是写在标签中，一般事件会指定一个事件函数或者一个表达式。
                     2.如果是事件函数，事件函数需要定义在对应页面的js中
             ⑤事件对象：事件函数中有一个默认的参数event，就是事件对象 
    6.xx.js
        （1）说明：定义当前页面的业务逻辑
        （2）配置
            Page({
                data:{},                
                onLoad:function(){},
                demo:function(){}
            })
            说明：1.data:当前页面的数据
                 2.生命周期函数，只是针对当前页面在运行过程中会自动触发的一些函数
                   onLoad   当页面加载完成时自动执行
                   onShow   当页面显示时执行
                   onHide   当页面隐藏时执行
                   onReady  当页面准备好时执行
                   onUnload 当页面卸载时执行
                 3.还可以定义自己需要的函数，以及功能函数，如demo
                    onPullDownRefresh   下拉刷新
                    onReachBottom       上啦加载更多
        （3）修改数据方法
                this.setData({
                       key:value,
                       key:value
                })
                this 指的是当前xx.js 大对象
                this.data.key 访问data中的数据
    7.xx.json
       （1）说明：只能修改当前页面的导航条样式、标题及样式
       （2）配置
            {
                "navigationBarBackgroundColor":"#000",
                "navigationBarTextStyle":black/white,
                "navigationBarTitleText":"标题",
                "backgroundColor":"背景颜色",
                "backgroundTextStyle":"black/white",
                "enablePullDownRefresh":true,
                "onReachBottomDistance":number,
                "pageOrientation"
            }
    8.xx.wxss
        （1）说明：写当前页面的css样式
        （2）写法和正常css写法一样
                注意：rpx
                        @import
                        建议使用弹性盒布局
    9.路由
        1.作用：切换页面
        2.定义方式：
            1.标签形式：<navigator />
              使用方法：
                <navigator url='路径' open-type='跳转方式' />
                url:要跳转的路径
                open-type:navigate  打开新页面，不能打开tabBar页面
                          redirect  路由重定向
                          switchTab 打开tabBar页面
                          reLaunch  重启
                          navigateBack 后退
                          exit      退出小程序

            2.代码形式：
                打开新页面：wx.navigateTo({
                    url:'路径'
                })
                路由重定向：wx.redirectTo({
                    url:'路径'
                })
                打开tabBar页面: wx.switchTab({
                    url:'路径'
                })
                重启： wx.reLaunch({
                    url:''
                })
                后退： wx.navigateBack({
                    url:''
                })