小程序学习

1. 小程序中样式的写法：
   小程序的git仓库地址: https://github.com/wechat-miniprogram/miniprogram-demo.git
   wxss：1. 行内样式（内联样式）// 2. 页内样式 // 3. 全局样式
   作用域是不太一样的，如果三个样式作用于同一个组件时候，class=‘content’，
   行内样式 > 页面样式 > 全局样式
   前端适配：rpx；=> 移动端适配方案；1px = 2rpx
   可以根据屏幕进行自适应
   @import 进行导入
   官方样式库：微信小程序有官方样式库；WeUI for 小程序 官方样式库
   组件化开发，在程序的下面需要出现搜索框
   官方样式库及其使用（官方样式库）
   2.wxml：
   类似于html：基本一样：
   格式比较严格：属性严格区分大小写：
   mustache语法：{{ }}
   Page({
   });
   随着时间的改变而改变
   onl oad() {
   }
   绑定属性；
   文本大小；
   需求：切换颜色
   监听按钮的点击
   Dom操作
   小程序是不能进行DOM操作的；
   逻辑判断： wx:if wx:elseif wx: else
   hidden属性：
   v-if 和 hidden在实现隐藏的功能有什么区别？
   hidden在组件中依然是存在的 v-if该组件不存在，压根儿没有创建；
   true：创建 flase：没有创建
   如果显示和隐藏的切换非常高，应该使用hidden；如果显示和隐藏切换的频率十分低，wx：if条件判断；
   列表渲染：wx:for基础
   a. wx-for的基础（回顾）
   遍历数组：
   {{item}} {{index}}
   {{item}} {{index}}
   把里面的东西做了一个包裹；
   b. block块的概念，性能更高；列表渲染：
   c. item, index
   wxml的引入：主要对某些代码进行复用；
   模板语法：对模板里面的东西进行复用；
   template模板语法的使用；使用include导入template
   多个页面：相同的header/footer 标题：footer：wxml
   view / include / wxml的导入；
   关于wxml的导入：
   import导入：
   1. 主要是导入template
   2. 特点：不能进行递归导入
   include引入：
   1. 将公共的wxml中的组件抽取到一个文件中
   2. 特点：不能导入template/wxs，可以进行递归导入
2. wxs：在wxml中是不能直接调用Page/Comppnent中定义函数的。
   但是在某些情况下，我们可以希望使用函数来处理wxml中的数据，类似vue中的过滤器，这个时候就使用wxs了。
   过滤器：wxs如何使用：运行环境和其他js是隔离开的；
   wxs使用的限制和特点：wxs的运行环境和其他js代码是隔离的，wxs中不能调用其他js文件中定义的函数，也不能调用小程序中提供地API；
   wxs函数不能作为组件的事件的回调；
   由于运行环境的差异，运行的效率无异；
3. wxs的演练：
   第一种写法：写在wxs单标签里面：
   
   // js代码
   var name = ‘a’;
   var name = ‘b’;
   

// common.js的模块化导出方式的写法：
module.exports = {
   message: message,
   name: name,
   sum: sum,
   test: test
}
第二种写法：定义在单独的wxs文件当中，再使用<wxs>标签进行导入
不能使用绝对路径，必须使用相对路径
注意src必须是相对路径：
<wxs src="../../wxs/info.wxs" module="info" /> 
// common.js的模块化导出机制；

wxml
<view>{{info.message}}</view>
<view>{{info.name}}</view>
<view>{{info.sum(20,30)}}</view>

4. 事件处理的回顾：
   bind: tap: 点击事件
   小程序常见的事件类型：
   bind : touchstart
   …
   
   事件对象的解析：
   对事件对象做具体的分析：
   小程序中的事件对象
   小程序事件对象之间的区别：
   a. target 和 curretTarget;
   target: 产生事件的view
   currentTarget：记录触发事件的view
   b. touches 和 changedTouches;
   touches: 用来记录当前有几个手指在小程序中触摸的以及对应的触摸点的信息；
   changeTouches记录变化的信息：
   在什么时候能够看到他们的区别: 首先是在touchend里面能看到他们的区别： touchend ： 点上去之后离开之后触发；
   event -> touches/changedtouches 属性；
   touches： [0];
   changeTouches: [1]；记录变化；
   事件的传递参数：
   如何传递参数：
   事件参数传递的了练习：
   
5. 事件的冒泡和捕获：bind catch之间的区别：区分事件冒泡和事件捕获；
   catch和bind之间的区别（事件处理）
   
6. 小程序组件化开发：
   自定义组件：
   如何注册自定义组件：使用我们的自定义组件：
   
   自定义组件的过程和步骤：
   
   使用自定义组件和细节注意事项：
   组件之间通信通过property进行传递，externalClasses 标签slot

组件之间通过自定义事件进行通信：

my-property:

组件向外传递事件：— 自定义事件
组件内部发出事件：
当前计数： {{ counter }}
自定义事件传递：



传递数据 传递样式 组件内部发生的事件如何去通知外面；
通过自定义事件以及事件监听进行传递；
7. 如何获取组件对象：

// selectComponent('.sel-class')
handleIncrementCpn() {
  // 最终目的：修改my-self中的counter
  const my_sel = this.selectComponent('.sel-class');
  // 拿到组件实例 setData()修改组件中的数据
  
  my_sel.setData({
    counter: my_sel.data.counter + 20
  })
}
8. 什么是插槽：
小程序预留插槽：
Component构造器：

页面的生命周期函数总结：

// 2. 监听组件本身的生命周期

标签：wxml,自定义,wxs,样式,程序,学习,事件,组件
来源： https://blog.csdn.net/sinat_36048532/article/details/116306188