微信小程序从入门到放弃 Num.2

Template模板的使用

template意思在于一个页面划分为多个模块 控制显示与隐藏。

首先你需要创建一个页面目录，如 pages/home/home.wxml

在pages/home/  下创建components文件夹(与wxml为平级关系)(与小程序的组件是两回事)

在刚才创建的components文件夹下创建 Message.wxml (名称可以自定义，我需要一个消息模板，所以创建了Message.wxml)

template上的 “name” 是重点，一定要想好名称
开始书写 Message.wxml

<template name="NoMessage">
     <view class="no-msg">

     </view>

 </template>

调用(例：pages/home/home.wxml 上调用)
这个import 是引用的文件
书写template "is" 上写 刚才起的name名称  wx:if用来判断是否显示

<template is="NoMessage" wx:if="{{NoMessage}}"></template>

在template中的 图片路径跟 页面上书写时一置(无需考虑多了一层 多加一个../)

如果控制台报错 webview网络渲染层错误，说明你的图片路径有误，不是多写了就是少写了层级

微信API的使用

首先打开 官方API地址

developers.weixin.qq.com/miniprogram…

挑块瘦肉下手 (咱们来通过API进行路由的跳转)

场景: 我有一个home页面 也有 一个 shop页面,现在需要从home->shop

假设：home页面有个button 按钮 通过点击事件 进行跳转 和 传参

页面 wxml中

<view bindtap="goShop">去商品页面</view>

跳转 在js中

goShop:function () {
    wx.navigateTo({              url: '../shop/shop' //跳转页面          })}


goShop:function () {
    let text = "去吃大腰子";
    wx.navigateTo({
            url:`../shop/shop?text=${text}` //页面传参
       })
}

只有跳转往往是不够的 我们需要接收

打开我们的 shop目录 进入shop.js onLoad生命周期 是指进入页面加载的时候会触发 

onLoad: function (options) {
        console.log(options,'来了老弟~')
}

总结： wx.*** 是指微信API,一般在方法中都可以直接调用 

微信组件 tabBar的使用

场景:进入微信小程序 底部菜单栏依次为 

首页 商品 我的 (三大模板)  

有请我们的tabbar出厂 (打开根目录下的 app.json)

copy下面代码 与pages数组平级 ！！！

static/img/icon_tab_main_pre.png  static为存在静态资源的目录 与app.json平级关系

backgroundColor = 背景颜色 ，   selectedColor = 当前项选中时 文字颜色 

"tabBar": {   
 "color": "#ccc",    
 "selectedColor": "#FF5374",    
 "borderStyle": "#E6E6E6",    
 "backgroundColor": "#fff",        
 "list": [      
            { "pagePath": "pages/home/home",       
              "iconPath": "static/img/icon_tab_main_nor.png",   
              "selectedIconPath": "static/img/icon_tab_main_pre.png", 
              "text": "主页"     
             },  
            { "pagePath": "pages/message/message", 
              "iconPath": "未选中的icon图片",        
              "selectedIconPath": "已选中的icon图片",
              "text": "商品"     
            },  
            {  "pagePath": "pages/mine/mine", 
               "iconPath": "static/img/icon_tab_mine_nor.png",
               "selectedIconPath": "static/img/icon_tab_mine_pre.png",
               "text": "我的"
             } 
        ]
  },

Demo checkbox复选

场景: 我们有了底部菜单栏 用户可以进入首页查看 可以进入商品也浏览商品了

现在我看中好几种商品 我想都选择下来

OK

shop 页面 wxml

<view class='list' wx:for="{{listArr}}" wx:key="{{index}}" data-index="{{index}}" catchtap='check' data-bool="{{item.bool}}">   
 <view class='list-img'>      
 <image src='{{item.bool?imgArr[1]:imgArr[0]}}'></image>    
</view>    
<view>{{item.name}}</view></view><view>
</view>

shop页面  wxss

.list{  width: 100%;  height: 70rpx;  border-bottom: 1rpx solid #ccc;  display: flex;}
.list .list-img{  width: 50rpx;  height: 50rpx;}
.list .list-img image{  width: 100%;  height: 100%;}

shop页面 js

data: {      
     listArr: [ { name: '1', bool: false },
                { name: '2', bool: false }, 
                { name: '3', bool: false },
                { name: '4', bool: false },
                { name: '5', bool: false }, 
                { name: '6', bool: false },
                { name: '7', bool: false },
            ],   
   bool:false,    
   imgArr: ['../../static/img/icon_fuxuan_nor.png', '../../static/img/icon_fuxuan_pre.png'],  
   management_good: false,  
   middlearr: [],
},
check: function (e) {   
 var that = this;   
 let arr2 = [];   
 var arr = that.data.listArr;   
 var index = e.currentTarget.dataset.index; 
   arr[index].bool = !arr[index].bool;
    for (let i = 0; i < arr.length; i++) { 
     if (arr[i].bool) { arr2.push(arr[i])  }  
    }; 
  that.setData({listArr: arr, middlearr: arr2 })    
  console.log(this.data.middlearr,'middlearrmiddlearr')  
},

下期预告

1. 微信组件封装与引用

2. wx.request二次封装

3.官方组件 swiper的运用

4.Demo 在小程序中使用CSS3动画 实现切换效果