前言
最近在做ITA的一个项目，恰好用到了微信小程序，所以来小结一下小程序的用法。本篇文章只适合初次接触微信小程序的小伙伴，不适合使用过微信小程序的小伙伴。
微信小程序是在2017年1月19日凌晨开始上线的，距离现在已经一年多了，所以网上的教程数不胜数。在知乎里有位答者答得很详细，可以多看看，
如何入门微信小程序开发，有哪些学习资料？
开发工具
微信小程序基础知识
前端项目的结构
传统网页变成结构是HTML+CSS+JS，在微信小程序是WXML+WXSS+JS
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
小程序的项目结构
WXML
1.支持数据绑定
2.可进行列表渲染，wx:for
3.可以进行条件渲染，wx:if，wx:elif，wx:else
4.可以使用模板，用<template></template>定义代码片段，然后在不同的地方调用
5.可以在标签里绑定事件，bindtap
WXSS
- 微信小程序的新单位rpx（responsive pixel）
rpx实际上是将屏幕宽度分为750份，每一份的像素大小随屏幕的不一样而不同，比如iphone6的屏幕宽度是375px，则1px=2rpx。iphone5的屏幕宽度是320px，则1px=2.34rpx。
rpx屏幕像素对照图
这里有篇文章写得很详细，微信小程序新单位rpx与自适应布局
- 使用@import向wxcss文件导入wxss， 比如以下是向app.wxss导入common.wxss示例
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
小结
踩过的坑：在使用view-scroll时无法实现横向滚动条无效，是因为不单单要用官方的组件，还需要自己添加样式，
- 在scroll-view标签添加overflow:hidden; white-space: nowrap
- scroll-view里面的view标签需要添加display:inline-block
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view class="scroll-view_H" scroll-x style="width: 100%; overflow:hidden; white-space: nowrap;">
<view id="green" class="scroll-view-item_H bc_green" style="display:inline-block"></view>
<view id="red" class="scroll-view-item_H bc_red" style="display:inline-block"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow" style="display:inline-block"></view>
<view id="blue" class="scroll-view-item_H bc_blue" style="display:inline-block"></view>
</scroll-view>
</view>
常浏览的页面：
