小程序基础

1 文件目录结构
    pages:页面
    utils:工具类
    app.json:全局配置文件，pages(路由），window(全局样式)
    project.config.json:个性化配置文件，当重新安装工具时，配置可进行移植
    WXML:类似.vue文件，小程序封装了标签。
    WXSS:css文件，增加了适配手机尺寸的单位。app.wxss为全局样式。
    app.js:小程序注册文件
2 app.json
    pages:页面路由
    window:窗口样式
    tabBar:tab栏样式
    networkTimeout:网络超时时间
    debug:是否开启debug模式
    在每一个小程序页面中也可定义配置文件，页面配置文件会覆盖全局配置文件
3 WXML
特性：
3.1 数据绑定
    <text>{{msg}}</text>        //文本绑定
    <text data-name="{{msg}}"></text>       //属性绑定
    <view hidden="{{flag?true:false}}"></view>      //运算符绑定
3.2 条件渲染
    <view wx:if="{{option1}}">1</view>
    <view wx:elif="{{option2}}">2</view>
    <view wx:else>3</view>
3.3 列表渲染
    <block wx:for="{{list}}" wx:for-item="item" wx:key="index"></block>
3.4 模板引用
    <template name="template1">
        <view>hello world</view>
        <view>{{name}}</view>
    </template>

    <template is="template1" data="{{name}}"></template>        //数据必须从data中传入
    import:
    <!-- a.wxml -->
    <view>hello</view>
    <template name="templateA">
        <view>hello wrold</view>
    </template>
    <!-- index.wxml -->
    <import src="a.wxml"></import>
    <template is="templateA"></template>
    输出hello world
    import作用域：
    模板引用只会引用上一级自定义的模板，而上一级模板import的其他模板将不会引用，避免了死循环问题
    include:
    <!-- a.wxml -->
    <view>hello</view>
    <template name="templateA">
        <view>hello wrold</view>
    </template>
    <!-- index.wxml -->
    <include src="a.wxml"></include>
    <template is="templateA"></template>
    输出：hello,使用效果与import相反
4 wxss
    4.1 外联样式引入
    /** a.wxss **/
    .header{
        color:red;
    }
    /** b.wxss **/
    @import './a.wxss'
    4.2内联样式
    <view style="color:red;width:{{mainWidth}};"></view>
5 wxs（微信自带脚本语言系统相当于js）
    5.1 模块(每个模块中数据在其他模块中不可见)、
    内联wxs：
    <!-- index.wxml -->
    <wxs module="m1">
        module.exports = {
            msg:'hello world'
        }
    </wxs>
    <view>{{m1.msg}}</view>
    外部导入wxs：
    <!-- a.wxs -->
    module.exports={
        name:'hkj'
    }
    <!-- b.wxs -->
    module.exports=require('./a.wxs');  //引用后导出，也可拆分为两步
    <!-- b.wxml -->
    <wxs src="b.wxs" module="b"></wxs>
    <view>{{b.name}}</view>
    5.2 注释
    单行注释    //
    多行注释    /* */
    结尾注释（该注释后所有代码均不执行）    /*
    5.3 数据类型
    js数据类型：string,number,boolean,null,undifined,array,object
    wxs数据类型：string,number,boolean,array,object,function,data,regexp