但在此时，我们需要在模拟器中调试、查看其效果，所以要将它当作单独页面来使用一次，调试完后可将js/json文件删除，并删除在app.json中pages值中的路径，此是后话，暂且略过。
我们在app.json中将ratingbar页面路径移到pages值的首位（见上图），保存后发现模拟器的首页变成了ratingbar页面。
页面上唯一的一条内容是由开发者工具在新建页面时自动生成的。我们打开ratingbar.wxml页面，将自动生成的标签内容删除，并输入以下内容，按Shift+Alt+F键格式化代码：
<!--pages/movies/ratingbar/ratingbar.wxml--><view class=http://www.likecs.com/'ratingbar-stars'>
<!--全黄星星-->
<image src=http://www.likecs.com/'/images/ratingbar/star_fill_whole.png'/>
<image src=http://www.likecs.com/'/images/ratingbar/star_fill_whole.png'/>
<image src=http://www.likecs.com/'../../../images/ratingbar/star_fill_whole.png'/>
<!--半黄半灰星星-->
<image src=http://www.likecs.com/'/images/ratingbar/star_fill_half.png'/>
<!--全灰星星-->
<image src=http://www.likecs.com/'../../../images/ratingbar/star_fill_none.png'/>
</view>
可以视为官方提供的一种容器，需要成对出现的，在这里它内部含有5个image组件。class表示其样式，它将会去同页面的wxss文件中查找并渲染值为.ratingbar-stars的样式（见下文）。image是图像组件，有一个属性src，表示要显示的图片的地址。像这类内容不需要再包含其它控件的控件，你也可以写成单闭合标签的形式。
这里src的路径出现了2种写法，绝对路径和相对路径，如果不了解的可另外拓展一下，这里的路径是一样的。
再点开ratingbar.wxss文件，并输入以下内容：
/* pages/movies/ratingbar/ratingbar.wxss *//*的控件的样式 */
.ratingbar-stars {
display: flex;
flex-direction: row;
padding-right: 4rpx;
}
/*的控件下所包含的image控件的样式 */
.ratingbar-stars image {
height: 17rpx;
width: 17rpx;
padding-top: 5rpx;
padding-right: 4rpx;
}
这里的首个.ratingbar-stars样式（请注意样式名前面有个小点号“.”），与的class相呼应，将会用于渲染该控件。
这里采用了CSS中著名的flex弹性盒子模型，flex-direction:row;意味着其内部控件将采用水平横向的方式排列，要表示竖直排列可将值改为column。
第二个.ratingbar-stars image样式（请注意中间有空格，且image前面没有点号），表示渲染class='ratingbar-stars'的控件内部包含的image控件，这里表示了高height、宽width、距离顶部的内边距padding-top、距离右侧的内边距padding-right。CSS的更多属性知识欢迎另行拓展，这是一个多记多练才能生巧的知识。
rpx长度单位rpx是微信小程序推出的单位，可以根据不同手机不同的屏幕宽度进行内容自适应，使页面元素在不同屏幕宽度的手机上看起来具有一致性。
无论手机屏幕实际宽度是多少，小程序都会在底层将屏幕宽度换算成750份，如果设计师以iphone6的750*1334（物理像素）为标准出设计稿的话，1rpx=0.5px=1物理像素，你可以直接使用设计师标注的参数加上rpx即可。
上面的width:17rpx表示无论在什么样的移动设备上，其大小都为750份中的17份，宽屏则显示大一些，窄屏则显示小一些，视觉效果一致。
按Ctrl+S键保存现有代码，模拟器即时显示出了目前的页面效果：3颗黄星、1颗半星、1颗灰星。
在wxml文件中，我们在内写了5个静态的image图像控件。然而在实际场景中，这个不可能是写死的，而应该是根据电影的不同评分进行相应的显示。
动态数据涉及到一些数据绑定等相关的知识，这里先简要介绍一下。
数据绑定{{}}