微信小程序的学习心路（一）

  最近，经过一段时间的学习，我想分享一些我的知识和想法给大家。
  小程序，无需下载APP就使用，而且创新的门槛很高，小程序通过近几年技术上的发展，小程序开发环境和开发者生态系统基本趋于成熟。用户只需要扫一扫就可以打开使用，小程序属于应用块。
下面我来说几个重要的编辑页面文件
1.**js**
微信web开发者工具里的js跟web中的JS相似，JS在HTML的功能使用，是用作于给网页添加动态的功能。而小程序里的js也是用于增加界面的动态功能。
2.**wxml**
同HTML很相似，在这个页面里我们可以通过编辑来描述小程序的页面结构，我们可以在里面看到一些<view></view>、<button></button>、<image></image>、<text></text>等一些基础标签，这些标签按照功能进行了分类。之后我们可以看到在初始的代码里的button里有wx:if这一判断条件。
原始代码为：
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
上述就是说，当if的条件语句成立时，编辑好的页面内容才会实现执行，不符合条件的话就会执行wx:else里的wxml里代码，下面的代码有一个<block></block>这个也可以理解（因为wx:else里包含了image和text两个属性），block属性在这里相当于一个块级元素。这一点跟HTML的编辑也很相似。
3.**wxss**
微信中的wxss也跟HTML中的除上述差不多，具有css的绝大部分属性，是用于放置描述wxml的样式的地方，微信开发者工具为了使wxss相对来说适合开发微信小程序，wxss对css也有一些改动和补充。
与HTML的css样式相比，wxss独有性质有：
（1）尺寸单位
（2）样式导入
尺寸单位
rpx（响应像素）：适应屏幕宽度.规定屏幕宽度750rpx。作为iPhone6，的375px屏幕宽度，总共750个物理像素，所述750rpx = 375px = 750个物理像素，1rpx = 0.5px = 1个的物理像素。
一般情况下，小程序开发设计师用iPhoneone6做为视觉图进行编辑，注意，在小的屏幕上做视觉图难免出现一些倒刺的情况，我们应尽量避免出现。
设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx
样式导入
使用@import语句导入外联样式表，后跟需要导入的外联样式表的相对路径，使用；指示语句的结束。
代码展示：
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import"common.wxss";
.middle-p {
padding:15px;
}
说到外联样式的导入，那我们顺带也就谈一谈内联样式是如何编辑使用的。
目前在微信开发者工具里的组件支持使用class、style这两个属性来编辑内联样式。
class用于指定的样式规则和静态的样式统一都用class属性编辑；style一般用于编辑动态样式，在运行时程序会对代码进行分析，如果我们将将静态样式放在style属性下面，会影响分析速度。
在开发工具中wxss分为index.wxss、logs.wxss、app.wxss。
在app.wxss中定义的样式是一个全局样式，作用于每个页面.在一个页面文件wxss（包括索引和日志）的地方风格定义样式只作用于相应的页面，并且将覆盖相同app.wxss选择。
以上是我对小程序的一个基本的认知和了解，分析了小程序的组成结构和文件类型。我会在后续的学习中继续深入学习和研究。
谢谢大家！Happy ending！