優化微信小程式之九宮格佈局方案
2018年了，時間過的真快，最近想擴充套件一下知識面，也順便學習一下比較成熟的微信小程式開發平臺，於是乎就操刀微信，抽空花了幾天看完微信小程式的開放平臺(https://mp.weixin.qq.com/debug/wxadoc/dev/index.html)，看完簡易教程、框架、元件和API，有點似曾相識燕歸來的感覺，畢竟筆者遊歷iOS和Android平臺多年，對HTML5也有所瞭解，感覺就是雜糅的一個混合式開發方式、好了，感興趣的直接微信小程式官網即可，現在已經對個人開發者開放了，下面就簡單說下我們常用的一個佈局—九宮格佈局，實現功能就是九宮格導航到下個頁面，並且帶上相應引數獲取不同的頁面資訊。
一、思路整理
第一步，自然是少不了建立工程了，這個預設已經沒有問題，那就是wxml佈局，採用for迴圈佈局啊，萬一是動態呢，千萬不要寫死，程式設計師不能認為是固定的，否則坑自己也坑接盤俠；
第二步，美化wxml佈局，建立wxss檔案，這個基本功，必須會了；
第三步，初始化js資料，採用導航模式到詳情頁，也就是點選每個格子到對應的頁面（這裡頁面只要一個）；
二、程式碼實現
1、首頁js頁面，初始化資料
const app = getApp() Page({ data: { routers: [ { name: 'HTML', url: '/pages/Course/course', icon: '/image/java_ico.png', code: '10' }, { name: 'Java', url: '/pages/Course/course', icon: '/image/python_ico.png', code: '11' }, { name: 'CSS', url: '/pages/Course/course', icon: '/image/java_ico.png', code: '10' }, { name: 'PHP', icon: '/image/python_ico.png', code: '11' }, { name: 'Python', url: '/pages/Course/course', icon: '/image/java_ico.png', code: '10' }, { name: 'JavaScript', icon: '/image/python_ico.png', code: '11' }, { name: 'C++', url: '/pages/Course/course', icon: '/image/java_ico.png', code: '10' }, { name: 'Object-C', icon: '/image/python_ico.png', code: '11' }, { name: 'Ruby', url: '/pages/Course/course', icon: '/image/java_ico.png', code: '10' } ] }, onLoad: function () { console.log('onLoad') var that = this } })
2、佈局檔案wxml頁面程式碼
<view class="container"> <view class="weui-grids"> <view class="weui-grid" wx:for="{{routers}}" wx:key="name"> <navigator url="{{item.url+'?name='+item.name+'&code='+item.code}}"> <view class='weui-grid__bg'> <view class="weui-grid__icon"> <image src=" {{item.icon}}" mode="scaleToFill" /> </view> <text class="weui-grid__label">{{item.name}}</text> </view> </navigator> </view> </view> </view>
注意：url是如何傳引數的，包括名字和編號，用於詳情的顯示和網路獲取資料；
3、美化wxss頁面程式碼
.weui-grids {
position: relative;
overflow: hidden;
}
.weui-grids:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.weui-grids:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.weui-grid {
position: relative;
float: left;
padding: 20px 10px;
width: 33.33333333%;
box-sizing: border-box;
}
.weui-grid:before {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
bottom: 0;
border-right: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.weui-grid:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.weui-grid:active {
background-color: #ECECEC;
}
.weui-grid__bg {
position: relative;
float: left;
padding: 0px 0px;
width: 100%;
box-sizing: border-box;
}
.weui-grid__icon {
width: 32px;
height: 32px;
margin: 0 auto;
}
.weui-grid__icon image {
display: block;
width: 100%;
height: 100%;
}
.weui-grid__icon + .weui-grid__label {
margin-top: 5px;
}
.weui-grid__label {
display: block;
text-align: center;
font-weight: bold;
color: #000;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
三、效果展示
四、優化部分
筆者筆者這裡優化了主要有兩個地方，首先筆者為了方便借鑑了CSDN另一位小夥伴寫的程式碼，文章地址：http://blog.csdn.net/xxdddail/article/details/70314211，作者只是示例如何實現效果，但是並不滿足筆者需要，比如，文章點選九宮格只是各自到一個獨立頁面，故不需要帶各種引數，不涉及傳值問題，還有一個致命體驗問題，就是點選頁面圖片時候會顯示兩個背景底色，一個是導航，一個是小宮格的底色，效果不好，為此，筆者做了優化處理；
1、頁面小宮格點選效果
顯示頁面相關程式碼：
<navigator url="{{item.url+'?name='+item.name+'&code='+item.code}}">
<view class='weui-grid__bg'>
<view class="weui-grid__icon">
<image src=" {{item.icon}}" mode="scaleToFill" />
</view>
<text class="weui-grid__label">{{item.name}}</text>
</view>
</navigator>紅色部分是筆者加的，讓導航包裹此檢視，達到只有一個底色的效果，wxss程式碼如下：
.weui-grid__bg {
position: relative;
float: left;
padding: 0px 0px;
width: 100%;
box-sizing: border-box;
}2、頁面傳值問題
顯示頁面相關程式碼：
<navigator url="{{item.url+'?name='+item.name+'&code='+item.code}}">
<view class='weui-grid__bg'>
<view class="weui-grid__icon">
<image src=" {{item.icon}}" mode="scaleToFill" />
</view>
<text class="weui-grid__label">{{item.name}}</text>
</view>
</navigator>注意看紅色部分，方式同普通頁面傳值一樣，可參考寫法如上；
詳情頁面顯示如何取得上個頁面傳的資料，方式如下：
A： js程式碼
const app = getApp()
Page({
data: {
title:"課程名稱"
},
onLoad: function (options) {
this.setData({
title: options.name
})
wx.setNavigationBarTitle({
title: options.name + ' ' + '課程',
})
}
}) <view style="text-align:center"> {{title}} </view>
五、後記
此小程式目前還處於開發階段，想體驗的朋友，需要等等了，估計年後了吧，到時候會在此文補充二維碼地址或微信搜尋：IT面試寶典官方版 即可找到；
另外，如果想完整體驗APP版本，可直接到官網下載體驗了 IT面試寶典官網，為還奮鬥在一線的開發者們，致以最真摯的問候，我們不一樣，我們辛苦了，祝大家新春愉快，闔家幸福。