微信小程序-----取经之路（我的微信小程序大全）

<template name="compTabBar">
  <view class="comtabbar" wx:for="{{list}}" wx:key="idx" wx:for-item="itemName">{{idx}}: {{itemName.name}}</view>
</template>

引用组件，wxml部分代码，is属性引用定义的template（引用组件template部分必须写data，不然组件显示不出来）

<import src="../../components/tab-bar/tab-bar.wxml"/>
<template is="compTabBar" data="{{list: tabBarList}}"/>

引用组件，wxss部分代码

@import "../../components/tab-bar/tab-bar.wxss";

引用组件，js部分代码

Page({
  data: {
    "tabBarList": [{
      name: "tab1"
    }, {
      name: "tab2"
    }]
  },
})

2.checkbox样式自定义之类名的查找

样式自定义：

可参考网址https://developers.weixin.qq.com/community/develop/doc/0002c84233032862c6f6bb13256404?highline=%E6%9B%B4%E6%94%B9checkbox%E6%A0%B7%E5%BC%8F

类名的查找：

首先打开官网相关介绍部分https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

然后打开控制台，就可以得到完整类名，例如这个绿色小勾，如下图

checkbox

3.动态class

格式：双大括号+三元表达式

栗子：

<view class="item {{curTab == 'video' ? 'cur' : ''}}" data-tab="video" bindtap="tabChange">离线视频</view>
<view class="item {{curTab == 'test' ? 'cur' : ''}}" data-tab="test" bindtap="tabChange">离线题库</view>

4.动态style

格式：双大括号+表达式

栗子：

<view class="starb" style="width:{{starPercent*20+'%'}}"></view>

此处需要注意，如果starPercent是请求了接口后计算得到的，那么这个view元素应该有个wx:if条件控制显示和隐藏，不然starPercent不生效。

栗子：

<view wx:if={{starPercent}} class="starb" style="width:{{starPercent*20+'%'}}"></view>

5.app.css在自定义组件不生效

自定义组件的wxss中引入app.wxss即可

@import "../../../../app.wxss";

6.事件传参，例如bindTab

思路：将参数设置为data自定义属性

栗子：

wxml：data-tab为要传的参数

<view class="item {{curTab == 'video' ? 'cur' : ''}}" data-tab="video" bindtap="tabChange">离线视频</view>
<view class="item {{curTab == 'test' ? 'cur' : ''}}" data-tab="test" bindtap="tabChange">离线题库</view>

js:

tabChange(event) {
  this.setData({
    curTab: event.target.dataset.tab
  })
},

7.关于全局路由拦截

目前查的各种资料：小程序没有全局路由拦截，路由拦截需在每个页面进行拦截

8.关于隐藏小程序navigationBar的返回按钮

可以运用weui里面的navigation-bar组件，步骤见下：

1.先在右边网址下载navigation-bar组件，https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

2.再参考右边网址写相应的配置，https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html

栗子：

<mp-navigation-bar show="{{true}}" back="{{false}}" background="#264fc8" color="white">
</mp-navigation-bar>

9.关于嵌套循环，自定义for循环的item,index

可以用wx:for-index和wx:for-item重命名，默认为item，index

<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="{{item.id}}">
  <view wx:for="{{item.group}}" wx:for-index="index2" wx:for-item="item2" wx:key="{{index2}}">
    ...
  </view>
</view>

现在key的定义更新成了这个，不用加双括号了,key的值是item里面的某个属性，或者当前item的index

<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
  <view wx:for="{{item.group}}" wx:for-index="index2" wx:for-item="item2" wx:key="index2">
    ...
  </view>
</view>

10.自定义组件-从定义到事件之间的互相调用

我的应用场景：一个页面wrap有四个tab页面（tab1,tab2,tab3,tab4），每个tab页面都有一定的逻辑。写在一个页面感觉不太好。
1.定义：
页面wrap的json，需要引用这几个tab页面

{
  "navigationBarTitleText": "页面wrap",
  "usingComponents": {
    "tab-one": "./tab1/tab1",
    "tab-two": "./tab2/tab2",
    "tab-three": "./tab3/tab3",
    "tab-four": "./tab4/tab4",
  }
}

四个tab页面的json需要定义自己为组件

{
  "component": true
}

wrap页面引用四个组件：引用时需要指定id，wrap页面调子组件事件时用到

<!-- tab标签页 -->
<view class="lrtab clear">
	<view wx:for="{{tab.list}}" wx:key="index" class="item {{item.id===tab.index?'cur':''}}" data-id="{{item.id}}" bindtap="changeTabIndex">{{item.name}}</view>
</view>
<!-- tab标签对应内容 -->
<view class="lrcontent">
	<view hidden="{{tab.index != 1}}">
	  <tab-one id="tabOne" bindtabonechange="tabOneChange"></tab-one>
	</view>
	<view hidden="{{tab.index != 2}}">
	  <tab-two id="tabTwo"></tab-two>
	</view>
	<view hidden="{{tab.index != 3}}">
	  <tab-three id="tabThree"></tab-three>
	</view>
	<view hidden="{{tab.index != 4}}">
	  <tab-four id="tabFour"></tab-four>
	</view>
</view>

目录截图

2.事件调用
wrap页面js精简，注释清楚明白

Page({
  // 页面的初始数据
  data: {
    tab: {
      index: 1,
      list: [
        { "id": 1, "name": "tabOne" },
        { "id": 2, "name": "tabTwo" },
        { "id": 3, "name": "tabThree" },
        { "id": 4, "name": "tabFour" },
      ]
    },
    paramsId: null,
  },
  //wrap页面控制组件tab页面的显示和隐藏
  changeTabIndex(el){
    let id = el.currentTarget.dataset.id;
    this.setData({
      ['tab.index']: id
    })
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    //获取从上一个页面穿过来的参数，此博客文档中不需要
    this.setData({
      paramsId: options.id
    })
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    // 此处用到了页面定义的id
    this.tabOne = this.selectComponent('#tabOne');
    this.tabTwo = this.selectComponent('#tabTwo');
    this.tabThree = this.selectComponent('#tabThree');
    this.tabFour = this.selectComponent('#tabFour');
    //组件tabOne获取列表
    this.tabOne.getList(this.data.paramsId);
  },
  // 捕获到组件tabOne的触发事件，wrap页面的事件,更新其他三个tab页面的列表
  tabOneChange(e){
    //从tabOne页面传过来的参数
    let id = e.detail.id;
    //更新其他三个tab页面的列表
    this.tabTwo.getList(id);
    this.tabThree.getList(id);
    this.tabFour.getList(id); 
  },
})

组件tab页面触发wrap页面的事件

Component({
  data: {
    passId: 1,
  },
  methods: {
    getList(){
      //此处省略逻辑若干...
      this.dealVideoSrc();
    },
    dealVideoSrc() {
      let self = this;
      //触发tabonechange事件，来触发wrap页面的bindtabonechange="tabOneChange"监听事件
      self.triggerEvent('tabonechange', { id: self.data.passId});
    },
  }
})

11.下拉加载更多，页面返回顶部

原因：在wxml里，列表渲染的显示变量，有些在加载列表的函数中，发生了变化，使已有数据的层从显示到隐藏再到显示。

栗子：

<view class="list" >
  <!-- 显示加载中的动画 -->
  <template is="comLoader" wx-if="{{listObj.loader}}"/>
  <!-- 显示没有数据的组件 -->
  <template wx-if="{{!listObj.loader && listObj.list.length === 0}}" is="comNoData"/>
  <!-- 显示有数据的列表 -->
  <view wx-if="{{!listObj.loader && listObj.list.length != 0}}">
    <view class="item" wx:for="{{listObj.list}}" wx:key="{{index}}">
      <view class="top">
        <view class="label">{{item.label}}</view>
        <view class="time">{{item.time}}</view>
      </view>
      <view class="title">{{item.title}}</view>
    </view>
  </view>
</view>

详解：（这是原因，请耐心，认真查看哦）

有数据的列表：显示和隐藏逻辑里面有listObj.loader这个变量的控制，我写的获取数据的函数getList中，开始会设置该变量为true显示，等ajax获取到数据之后，会设置为false不显示。一个层如果从显示，到隐藏，在显示，那肯定是从顶部开始显示！这就是原因，你可以查查你写的代码里面有没有类似这种的变量控制哦。