微信小程序day01

小程序与普通网页开发的区别？

①运行环境的不同

小程序 运行环境微信

网页 运行环境浏览器

②API的不同

小程序无法调用BOM DOM的API

③开发模式不同

网页：浏览器+代码编辑

小程序：专用的开发工具 微信开发者工具

项目目录？

pages 页面目录 文件夹中的每一个文件都是一个页面

页面文件夹中的子文件都是一个界面 子页面中的文件

.js文件 wxss 样式文件 wxml 页面文件 .json 文件配置文件

untils 工具文件

app.js 项目的入口文件

app.json 全局的配置文件 关于代码的

app.wxss 全局的样式文件

project.config.json 项目配置文件

project.private.config.json 项目配置文件(项目私有的 使用此文件会覆盖 项目配置文件相同的配置)

sitemap.json 项目索引文件 用来判断是否让微信小程序搜索到

常用的组件及样式？

样式的使用方式？

小程序中的JS ？

<view class="home-container">
  {{msg}}你{{age}}岁了
</view>
<view class="{{cls}}">
  {{age < 18? '未成年':'成年'}}
</view>
<button bindtap="tapHandler" >{{msg}}</button>
<view>
  计数器{{count}}
</view>
<button bind:tap="addHandler" >{{msg}}</button>
<!-- 通过时间处理函数 操作数组 给数组添加元素  -->

<view>
  数组{{counts}}
</view>
<button bindtap="addsz" >{{msg}}</button>
<!-- 阻止事件  catchtap 冒泡 
写法 2 catch:tap
-->
<view  class="fa" bindtap="faHanlder"> 
<!-- 注册事件 防止冒泡的到父亲 触发元素的事件 -->
<view class="son" catchtap="sonHanlder">
  
</view>
  
</view>


<!-- 事件对象的属性 -->
<view  class="fa" bind:tap="eventHadnler"> 

<view class="son" >
trag 与 currentTarget区别
</view>
</view>



<!-- 事件处理函数传参-通过自定义属性传参  -->
<view  data-my-name="fa1" id="fa"class="fa" bind:tap="eventHadnler"> 

<view class="son" id="son" data-my-name="son1">
trag 与 currentTarget区别
<!--
 点击父亲 target 和 currentTarget 获取到的 ID都是 父亲
 点击孩子target 的ID 是孩子
 currentTarget 是父亲
-->
</view>
</view>