小程序css-# 小程序代码组成

小程序代码组成

​上一章我们通过开发者工具快速创建了一个QuickStart项目。 您可以注意到该项目中生成了不同类型的文件：

带有 .json 后缀的 JSON 配置文件。 带有 .wxml 后缀的 WXML 模板文件。 带有 .wxss 后缀的 WXSS 样式文件。 JS脚本逻辑文件，后缀为js

拿出来我们看看这4个文件的作用。

JSON配置

JSON 是一种数据格式，而不是一种编程语言。 在小程序中，JSON 起到静态配置的作用。

我们可以看到项目根目录下有一个app.json和project.config.json。 据悉，pages/logs目录下还有一个logs.json。 我们依次解释一下它们的用途。

小程序配置app.json

app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面性能、网络超时、底部选项卡等。 QuickStart 项目旁边的 app.json 配置如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

我们简单说一下这个配置中每一项的含义：

pages 数组 - 用于描述当前小程序所有页面的路径，这是为了让陌陌客户端知道你的小程序页面当前定义在哪个目录。 window 数组 - 定义小程序所有页面的底部背景颜色、文字颜色定义等

其他配置项详情请参考文档小程序的配置app.json。

工具配置project.config.json

一般你在使用工具的时候，也会根据自己的喜好进行一些个性化的配置，比如界面颜色、编译配置等，当你换到另一台笔记本电脑，重新安装工具的时候，就得重新配置。

考虑到这一点，小程序开发者工具也会在每个项目的根目录下生成一个project.config.json，您在该工具上所做的任何配置都会写入此文件中。 当您重新安装工具或者更换笔记本电脑工作时，您只需要加载同一个项目的代码包小程序css，开发者工具就会手动为您恢复您开发项目时的个性化配置，包括编辑器的颜色，上传代码时手动压缩等一系列选项。

其他配置项的详细信息请参考文档开发者工具的配置。

页面配置page.json

虽然这里的page.json是用来表示pages/logs目录下的logs.json等与小程序页面相关的配置。

如果你整个小程序的风格是黄色，那么你可以在app.json中声明底部颜色为橙色。 实际情况可能并非如此，可能你的小程序中每个页面都有不同的颜色来区分不同的功能模块小程序css，所以我们提供了page.json，以便开发者可以独立定义每个页面的一些属性，比如刚才的底部颜色、是否允许下拉刷新等

其他配置项的详细信息请参考文档。

JSON 句型

下面介绍一下小程序中JSON配置的一些注意事项。

JSON 文件用大括号 {} 括起来，以键值的形式表达数据。 JSON 的键必须用双冒号括起来。 实践中，在编译JSON时，忘记在Key值中添加双冒号或者将双冒号写成单冒号是一个常见的错误。

JSON值只能是以下数据格式，任何其他格式都会触发错误，例如JavaScript中的undefined。

数字，包括浮点数和整型字符串，需要用双冒号括起来 Bool 值，true 或 false 列表，需要用方括号括起来 [] 对象，需要用大括号括起来 {}Null

还应该注意的是，在 JSON 文件中使用注释是很困难的，尝试添加注释会导致错误。

WXML 模板

从事过网页编程的人都知道，网页编程采用HTML+CSS+JS的组合，其中HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS一般是用于处理页面。 与用户互动。

出于同样的原因，它在小程序中也有同样的作用，其中WXML扮演着与HTML类似的角色。 打开pages/index/index.wxml，您将看到以下内容：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

与 HTML 非常相似，WXML 由标签、属性等组成。 而且区别还有很多，我们来一一讨论：

标签名称有点不同

在编写HTML时，经常使用的标签是div、p和span。 开发者在编写页面时，可以根据这些基本标签来组合不同的组件，比如日历、弹窗等。 换个思路，既然大家都需要这种组件，那我们为什么不把这种常用的组件封装起来呢，这样就大大提高了我们的开发效率。

从上面的例子可以看出，小程序的WXML标签有view、button、text等，这些标签是小程序为开发者封装的基本能力。 我们还提供地图、视频和音频等组件。

更详细的组件描述请参考下一章小程序的能力

最近在写项目的框架，写了一个JQueryMessageBox类来使用jquery ui中的dialog()来显示消息框。 为了方便该方法调用，我添加了一个手动判断页面是否添加了ui.js和ui.css的方法，代码如下：

//如果没有包含ui.js,则引用
    if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{
        $("""").appendTo('head');
    }}
//如果没有加载css,则加载
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{
        $('').appendTo('head');
//dialog() script
    }}

但CSS代码不会立即加载，所以显示对话框时不会有样式（IE9下是可以的，因为IE9下即使稍后下载CSS，页面元素也会重绘css 加载，但IE8不会）。解决这个问题的办法css 加载，可以使用ajax，当css加载完后，再显示dialog，这样就可以用样式显示了，代码如下：

if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {
                $.ajax({
                    url: '/css/jquery-ui-1.8.14.custom.css',
                    success: function(data) {
                        //创建一个style元素，并追加到head中
                        //替换其中images的路径
                        $('' + data.replace(/url(images/g, 'url(/css/images') + '').appendTo('head');
                        //dialog() script;
                    }
                });
            }
            else { 
                //dialog() script;
            }