中国石油大学华东新生指南
效果展示
点击首页的gird
点击外出页的gird
地图页(还没做完),话说微信的破导航，偏的也太多了，根本不准啊
点击首页gird跳转
建新的页面
（为我真的懒得分包了，外加多弄页面增加我的工作量了）那就把那堆grid跳转到同一个页面吧。
不过和上次的处理不一样。我是加了个标签页，点击标签出现内容。
新建两个，一个是首页gird跳转，一个是外出页面的gird跳转
其实这两个页面的逻辑是一样的。
app.json
"pages":[
"pages/home/home",
"pages/map/map",
"pages/outside/outside",
"pages/square/square",
"pages/innerTab/innerTab",
"pages/outerTab/outerTab"
],
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index",
"van-icon": "@vant/weapp/icon/index",
"van-grid": "@vant/weapp/grid/index",
"van-grid-item": "@vant/weapp/grid-item/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
},
innerTab
innerTab.wxml
<van-tabs active="{{ active }}"
swipeable
>
<van-tab title="商店">内容 1</van-tab>
<van-tab title="餐厅">内容 2</van-tab>
<van-tab title="校医院">内容 3</van-tab>
<van-tab title="运动">内容 4</van-tab>
<van-tab title="社团">内容 1</van-tab>
<van-tab title="图书馆">内容 2</van-tab>
<van-tab title="自习">内容 3</van-tab>
<van-tab title="机房">内容 4</van-tab>
<van-tab title="通行">内容 2</van-tab>
<van-tab title="快递">内容 3</van-tab>
<van-tab title="校历">内容 4</van-tab>
<van-tab title="校园卡">内容 4</van-tab>
</van-tabs>
innerTab.wxss
终于掌握怎么覆盖vant的样式了，你先去调试，看调试出来的css代码，把相关选择器抄过来，然后把相关的属性也抄过来，加上你自己的设定，然后加上!important,这样就能生效了。
/* pages/innerTab/innerTab.wxss */
html{
--tabs-bottom-bar-color:#113b75;
}
.van-tabs__line {
background-color:#113b75!important;
}
.van-tab--active {
color: var(--tab-active-text-color)!important;
font-weight: var(--font-weight-bold,600)!important;
}
.van-tab {
font-size: 16px !important;
}
innerTab.js。在js里我们需要把Gird-item和van-tab绑定，不过因为顺序是一样的，所以传过来的参数就是序号，所以就把active的对应数字改一下就行。
// pages/innerTab/innerTab.js
Page({
/**
* 页面的初始数据
*/
data: {
active: 0,
},
onl oad(options) {
this.setData({
active:Number(options.index)
})
}
})
outerTab
wxml
<!--pages/outerTab/outerTab.wxml-->
<van-tabs active="{{ active }}"
swipeable
>
<van-tab title="商城">内容 1</van-tab>
<van-tab title="美食">内容 2</van-tab>
<van-tab title="旅游">内容 3</van-tab>
<van-tab title="出行">内容 4</van-tab>
<van-tab title="医院">内容 1</van-tab>
</van-tabs>
wxss
/* pages/outerTab/outerTab.wxss */
html{
--tabs-bottom-bar-color:#113b75;
}
.van-tabs__line {
background-color:#113b75!important;
}
.van-tab--active {
color: var(--tab-active-text-color)!important;
font-weight: var(--font-weight-bold,600)!important;
}
.van-tab {
font-size: 16px !important;
}
js
// pages/outerTab/outerTab.js
Page({
/**
* 页面的初始数据
*/
data: {
active: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onl oad(options) {
this.setData({
active:Number(options.index)
})
}
})
给gird-item 加上url。
home.wxml
home.wxml
<van-grid border="{{ false }}" class="homeGrid">
<van-grid-item icon="cart" text="商店" icon-color="#113b75" url="/pages/innerTab/innerTab?index=0"/>
<van-grid-item icon="shop" text="餐厅" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=1"
/>
<van-grid-item icon="add-square" text="医院" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=2"
/>
<van-grid-item icon="star" text="运动" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=3"
/>
<van-grid-item icon="friends" text="社团" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=4"
/>
<van-grid-item icon="todo-list" text="图书馆" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=5"
/>
<van-grid-item icon="manager" text="自习" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=6"
/>
<van-grid-item icon="graphic" text="机房" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=7"
/>
<van-grid-item icon="map-marked"
text="校内通行" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=8"
/>
<van-grid-item icon="send-gift" text="快递" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=9"
/>
<van-grid-item icon="underway" text="校历" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=10"
/>
<van-grid-item icon="card"
text="校园卡" icon-color="#113b75"
url="/pages/innerTab/innerTab?index=11"
/>
</van-grid>
outside.html
<van-grid border="{{ false }}" class="homeGrid">
<van-grid-item icon="cart" text="商城" icon-color="#113b75"
url="/pages/outerTab/outerTab?index=0"/>
<van-grid-item icon="shop" text="美食" icon-color="#113b75"
url="/pages/outerTab/outerTab?index=1"
/>
<van-grid-item icon="smile-comment"
text="旅游" icon-color="#113b75"
url="/pages/outerTab/outerTab?index=2"
/>
<van-grid-item icon="setting"
text="出行" icon-color="#113b75"
url="/pages/outerTab/outerTab?index=3"
/>
<van-grid-item icon="add-square" text="医院" icon-color="#113b75"
url="/pages/outerTab/outerTab?index=4"
/>
</van-grid>
map部分
太坑了，我找了好几个视频，太坑了。
开启定位权限
app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于校园地图导航"
}
去腾讯地图整个钥匙
微信小程序申请腾讯地图key（腾讯位置服务API）简要流程
http://t.csdn.cn/G1Lj0
如果你的小程序要发布那么还需要在开发者工具里设置分类，开通权限。
然后在APP.JSON里
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"chooseAddress"
]
------after one day--------
很好我放弃了，腾讯地图有退不出去的Bug，百度地图没有路径规划
最后我放弃了地图这个功能，换成天气吧。就是直接抄的下面这个，太累心了。
http://www.manongjc.com/detail/50-gyjqyprpjztbrtt.html
效果就是这么个效果。
记得添加白名单
分包
虽然我懒得干，但是万一无法打包就不好了。还记得吗，主包不可以大于2M。
目录底下新建一个packageB,packageB底下新建一个pages页。
把innerTab和OuterTab挪进去。
然后去修改app.json,从pages配置里把innerTab和OuterTab删除，
添加分包，注意不要是独立分包，我们这里还要使用vant的组件呢。
我们的gird的url还要修改路径
结束
剩下的东西大概就是慢慢填innerTab和OuterTab的内容了。都是些基础活了，我就不更新了。
等彻底做完，我会在这里放上小程序的链接