小程序入门整理

最近在做国内保险小程序，所以整理了一些需要注意的地方，有错误的地方欢迎大家指正。

一. 可以引用的UI组件

1. weui和zanui两个文件夹在项目打包（预览、上传）过程中已经被排除，现在放到项目里主要为了参考
2. 建议最开始先使用weui的组件，weui.wxss已经提取到style文件夹中了；
3. zanui是外部可以直接引用的组件，后期如果使用，在项目打包过程中不能排除

二. wxml和html区别

<view></view>_<div></div>
<scroll-view></scroll-view>_会滚动的div
<navigator></navigator>_<a></a>    	
<text></text>_<span></span>文字
<image></image>_<img/>图片
<icon>_<i></i>小图标
<picker></picker>单选多选，通过mode来区分_<select></select>

三. 小程序字体规范

1. rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
2. 开发微信小程序时设计师可以用 iPhone6(750*1334) 作为视觉稿的标准。
3. 参考网站 www.51xuediannao.com/javascript/…

.f10{font-size:20rpx} 小标签（常用）
.f12{font-size:24rpx} 一般常用字体大小，文章内容（常用）
.f14{font-size:28rpx} 小标题（常用）
.f16{font-size:32rpx} 大标题（常用）
.f18{font-size:36rpx} 大大标题

三. CSS

解析原则

css选择器是从右往左解析https://blog.csdn.net/jinboker/article/details/52126021

书写原则

1. 书写简洁、高效的css，所谓高效就是让浏览器查找更少的元素标签来确定匹配的css属性
   
2. 一个div建议最多有3个css属性，减少查找时间（那天说4个不是很建议）

CSS命名规范

1. 一律小写
   
2. 尽量用英文
   
3. 可以加中划线和下划线（H5中书写不建议使用"_"，因为有浏览器兼容性的问题，在IE6下无效，但小程序不考虑这一点，且官方weui中划线和下划线都有用）
   
4. 少用层级关系，下面一个例子看看就明白了，我列的是H5的标签，小程序也是一样的道理（把层级关系体现在命名里面）

## 不建议这样写
<div class="main">
	<div class="top">
		<p></p>
	</div>
	<div class="center">
		<p></p>	
	</div>
	<div class="bottom">
		<p></p>
	</div>
</div>
<style>
.main .top p{...}
.main .center p{...}
.main .bottom p{....}
</style>
## 建议下面这样写，把层级关系体现在命名里面
<div class="main">
	<div class="main-top">
		<p class="main-top-p"></p>
	</div>
	<div class="main-center">
		<p class="main-center-p"></p>
	</div>
	<div class="main-bottom">
		<p class="main-bottom-p"></p>
	</div>
</div>
<style>
.main-top-p{...}
.main-center-p{...}
.main-bottom-p{...}
</style>

CSS优先级问题

1. 先看看css选择器有哪些再看优先级的问题，下面列了常用的几个

##ID选择器
id="name",id="name_txt"
## 类选择器
.class="head",class="head_logo"
## 标签选择器
body,div,p,ul,li
## 组合选择器
.head .head_logo
## 后代选择器
#head .nav ul li 从父集到子孙集的选择器)
## 伪类选择器,就是链接样式,a元素的伪类，4种不同的状态
a:link,a:visited,a:active,a:hover

2. 优先级排序 行内样式>ID选择器>类选择器>标签选择器
   , 请看下面的示例

<div class="content">
	<p class="con-p colred"></p>
</div>
<style>
## 下面这种定义会显示蓝色，优先级第一行>第二行
.content .con-p{ color:blue}
.colred{ color:red}
## 下面这种定义会显示红色，优先级第二行>第一行
.con-p{color:blue}
.colred{ color:red}
## 下面这种定义会显示蓝色，同级的话，优先级写在后面的>前面的
.colred{ color:red}
.con-p{color:blue}
</style>

参考的网站

微信UI在线预览 weui.io/

weui-git地址 github.com/Tencent/weu…

小程序开发资源汇总 github地址：github.com/justjavac/a…