微信小程序day01!!!!

微信小程序介绍

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。
优势
微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。
不足
单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是 20M（这个值一直在变化，以官网为准）。
需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

微信小程序目录介绍

pages:
wxml: 编写小程序界面结构的地方
wxss: 编写小程序样式的地方
json：编写界面配置的地方
js：编写界面逻辑的地方
utils: 编写工具类的地方
app.js：创建程序实例的位置
app.json: 编写全局配置地方
app.wxss: 编写全局样式的地方
project.config.json: 项目的配置文件
sitemap.json：配置哪些网站可以被检索到

WXML

<!--detail/detail.wxml-->
<text>detail/detail.wxml</text>

<view>
  today is Monday
</view>
<view class="box">
  today is Monday
  <view>
    哈哈啊哈哈
  </view>
</view>
<view class="learn">
  learnlearnlearn
</view>

<button bind:tap='flag'>flag</button>
<button bindtap= "flag">flag</button>

<button bindtap="start">start</button>
<button bindtap="pause">pause</button>
<button bindtap="end">end</button>
<view>
  {{content}}
</view>

<view class="big" bindtap="big">
  <button bindtap="small">按钮</button>
  <!-- small big -->
  <!-- 阻止冒泡catch -->
  <button catchtap="small">按钮</button>
  <!-- small -->
</view>
事件捕获capture
<view class="big" capture-bind:tap="big">
  <button bindtap="small">按钮</button>
  <!-- big small -->
</view>
<!-- 事件传参 -->
<!-- <view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view> -->
<button bindtap='addNum' data-number="10">addNum {{num}}</button>
<view bindtap='addNum' data-number="20">
<button bindtap='addNum' data-number="10">addNum {{num+1}}
</button></view>
<!-- currentTarget-dataset:20
target:10
 -->

WXSSWXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。
尺寸单位
在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = （屏幕宽度/750）px
在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px。
样式的导入
在小程序中，样式引用是这样写：
@import ‘./test_0.wxss’
由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。
小程序中的样式选择器

关于wxjs

1.渲染层和数据相关。
2.逻辑层负责产生、处理数据。
3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。