微信小程式從入門到放棄 Num.2

Jacket_7O發表於2018-12-27
微信小程式

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動畫 實現切換效果


相關文章