微信小程序开发小结

前言

最近在做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

1. 微信小程序的新单位rpx（responsive pixel）
   rpx实际上是将屏幕宽度分为750份，每一份的像素大小随屏幕的不一样而不同，比如iphone6的屏幕宽度是375px，则1px=2rpx。iphone5的屏幕宽度是320px，则1px=2.34rpx。
   rpx屏幕像素对照图

这里有篇文章写得很详细，微信小程序新单位rpx与自适应布局

2. 使用@import向wxcss文件导入wxss， 比如以下是向app.wxss导入common.wxss示例

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

小结

踩过的坑：在使用view-scroll时无法实现横向滚动条无效，是因为不单单要用官方的组件，还需要自己添加样式，

1. 在scroll-view标签添加overflow:hidden; white-space: nowrap
2. 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>

常浏览的页面：

1. 小程序社区
2. 小程序开发文档