018年了，時間過的真快，最近想擴展一下知識面，也順便學習一下比較成熟的微信小程序開發平台，於是乎就操刀微信，抽空花了幾天看完微信小程序的開放平台(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>
<view class='weui-grid__bg'>xxxx</view>部分是筆者加的，讓導航包裹此視圖，達到只有一個底色的效果，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>
注意看 url="{{item.url+'?name='+item.name+'&code='+item.code}}"> 部分，方式同普通頁面傳值一樣，可參考寫法如上；
詳情頁面顯示如何取得上個頁面傳的數據，方式如下：
A： js代碼
const app = getApp()
Page({
data: {
title:"課程名稱"
},
onLoad: function (options) {
this.setData({
title: options.name
})
wx.setNavigationBarTitle({
title: options.name + ' ' + '課程',
})
}
})
B：wxml代碼
<view style="text-align:center"> {{title}} </view>
五、后記
此小程序目前還處於開發階段，想體驗的朋友，需要等等了，估計年后了吧，到時候會在此文補充二維碼地址或微信搜索：IT面試寶典官方版 即可找到；
另外，如果想完整體驗APP版本，可直接到官網下載體驗了 IT面試寶典官網，為還奮斗在一線的開發者們，致以最真摯的問候，我們不一樣，我們辛苦了，祝大家新春愉快，闔家幸福
————————————————
版權聲明：本文為CSDN博主「mapboo」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/mapboo/java/article/details/79303524