微信小程序（续集）

微信小程序（续集）

今天上午呢，我又复习了我一下昨天所学的微信小程序的一些步骤，还有就是有学习了一些新的东西，那么就开始总结起来吧！

一、微信小程序开发目录说明

1. pages

项目开发目录 相当于vue脚手架中的src目录

一个完整的小程序页面包括4部分：
1. xxx.wxml :模板页面（也称视图，类似于html）
	
	常用标签：
		view:相当于div
		button:按钮
		image:嵌入图像  类似于img
		text:添加文本 相当于span
		block:标签一个组织区域，最终不会渲染到页面上，相当于vue中的template
		
2. xxx.wxss:页面样式 相当于css

   注意：用rpx代表响应式单位 类似于rem
   
3.xxx.js: 写页面逻辑的 

4.xxx.json:页面的配置

  注意：页面的json配置来源于全局（app.json）配置中window字段
  
参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

1. utils

存放封装的工具函数的目录

1. app.js

是小程序的入口js文件 相当于vue中的main.js
通过App({})构造器实现

1. app.json

小程序的全局配置

例如：

{
//小程序管理的所有页面路径
  "pages":[  
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  //小程序的窗口表现
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "1909A",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1. app.wxss

是小程序的全局css样式，全影响所有的页面外观

1. project.config.json

工具的统一配置

1. 如何给小程序添加新的页面

在app.json的pages中直接添加新建的页面路径

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cate/cate",
    "pages/shopping/shopping"
  ],
 
....

}

默认tabBar最少是2项，最多是5项

但可以通过自定义tabBar来突破这个限制

如何实现自定义TabBar?

核心实现思路：通过禁用app.json默认tabBar,创建一个自定义tanB组件来实现

官方参考：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1. wxss相关

rpx:（responsive pixel）: 可以根据屏幕宽度进行自适应

  使用：量多少使用多少 用ps测量 100px,就是100rpx

参考设计师可以用 iPhone6 作为视觉稿的标准

样式导入：@import  主要用于复杂项目样式复用

1. 小程序常用渲染指令

1.遍历 wx:for  相当于vue的v-for 

例如：
 <view wx:for="{{ list2 }}" wx:for-index="n" wx:for-item="itm" wx:key="{{ index/item.id }}">
           <text>编号：{{ n+1 }}---姓名：{{ itm.name }}</text>
 </view>
 
 注：
 item：遍历的每一项
 index:每一项的下标
 wx:for-index:更改下标名
 wx:for-item:更改每一项的名称
 wx:key:通常遍历时添加,提升遍历性能
 
 2.条件渲染
 
  wx:if 相当于vue的v-if       true:显示，false：隐藏
  
   wx:if  满足条件渲染
   wx:else  不满足条件渲染
  
  
  hidden 相当于vue的v-show的反值   true:隐藏，false：显示
  

1. 小程序如何绑定事件

bind+事件名="方法名"

例如：
 <button bindtap="deleteItem">X</button>
 
 交互过程中视图不同步如何解决？
 
 this.setData()
 
   this.setData({
     list2: this.data.list2
   })
 
 

1. 页面之间如何传参

自定义属性：将页面上的参数传递给js

  <view data-自定义名称="参数值">
  
 通过触发事件，在事件方法中接收
 
  let {index}=e.currentTarget.dataset
  
  deleteItem(e) {
    let {index}=e.currentTarget.dataset
    console.log(index)

   
  },

路由跳转传参:页面与页面之间传参

---

二、事件流

1. 事件冒泡：从点击的元素开始触发，向上事件传播

阻止事件冒泡：event.stopProPagation()

1. 事件捕获：多上级元素传递，传递到最具体的元素

btn.addEventListener('click',function() {//回调},true)

三、小程序中事件冒泡和阻止冒泡

bind+事件名="方法名"  向上传递事件，即事件冒泡
catch+事件名="方法名"  阻止事件冒泡

四、小程序生命周期

1. 整体小程序的生命周期：

   App({
   
     onLaunch() {},   监听小程序初始化，只触发一次
     onShow(){},小程序启动或切换到前台运行
     onHide(),小程序切换到后台运行
     
   })
   

2. 小程序页面级别的生命周期：

   Page({
     //页面创建完，只触发一次，通常获取后台数据或接收另一个页面的传参时使用
   	onLoad() {},
   	//进入页面就会触发
   	onShow() {},
   	//页面离开时触发
   	onHide() {},
   	//监听页面初次渲染完成
   	onReady() {}，
   	//监听页面卸载,类似于vue中destroyed
   	onUnload() {}
   	onReachBottom() {
       console.log('到底页面底部')
     },
     //下拉触发
     onPullDownRefresh() {
       console.log('onPullDownRefresh')
     },
     //点击右上角分享时触发
     onShareAppMessage() {
       
     }
   })
   

3. 微信小程序的路由管理

两种路由触发模式：

1.标签方式触发
   
  vue:
   <router-link to="">
   
  小程序：<navigator url="要中转的路径?key=value">
  
  接收：通过另一个页面在onload生命周期中接收 
   
2.编程式触发

  vue:
  this.$router.push()
  
  小程序跳转：
  
  wx.navigateTo()  带历史回退
  wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面  this.$router.replace()
  wx.switchTab() 只跳转到tabBar页面，不带回退
  wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退
  
  

4.动态样式

• 小程序支持的选择器：class选择器,id选择器，标签选择器，群组选择器，伪对象（:before,:after）
• 可以对class做动态样式处理，例如：

   <button class="{{ index===currentIndex? 'active':'' }}" >
          {{ item.typename }}
    </button>

5.数据请求

JS原生：XMLHttpRequest,fetch
jQuery:$.ajax,$.getJSON,$.post(),$.get()
Vue:axios
React:fetch
微信小程序：wx.request() 与jQuery的$.ajax类似

wx.request({
  url:'', //请求的接口地址
  method:'get|post|put|delete',//请求方式 
  header:{},//设置请求头
  data:{}, //传参
  success() {}, //成功返回
  fail() {},// 失败返回

})

注意：

1.小程序请求的接口必须是https协议
2. 请求接口之前要提前配置接口请求：
  第一种方法：在微信小程序后台配置request合法域名
  第二种方法：在开发者工具--详情--本地配置--勾选‘不校验合法域名’

上拉加载更多
1.onReachBottom() {} 页面自带的生命周期
2.scroll-view  实现局部区域的滚动和加载更多

6.组件

• 内置组件：微信小程序封装好的组件，直接拿来就能使用
  • swiper：轮播组件，必须要和swiper-item配合使用

例如：

    <swiper 
        class='banner'
        indicator-dots="true"
        indicator-color="#f00"
        indicator-active-color="#ff0"
        circular="true"
      >
      <swiper-item wx:for="{{ banners }}" wx:key="{{ item.id }}">
        <image src="{{ item.imgurl }}"></image>
      </swiper-item>
    </swiper>
    
    参考:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
    

• scroll-view:局部滚动组件，也可以做上拉加载，下拉刷新，例如：

  <scroll-view 
      scroll-y="true" 
      style="height:{{ height }}px;"
      bindscrolltolower="lower" 
  >
   
    <view class="movie-item" wx:for="{{ moveList }}" wx:key="{{ index }}">
        <image src="{{ item.images.small }}"></image>
         <view clas="movie-title">
            {{ item.title }}
         </view>
      
      </view>


  </scroll-view>

就先这样吧，今天有点太忙了，明天再好好总结一下！