JZTXT

微信小程序 案例练手 第二部分

发布时间 2023-06-14 12:35:29作者: id_shiguang

中国石油大学华东新生指南

效果展示

点击首页的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,
      },
    onLoad(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,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(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的内容了。都是些基础活了，我就不更新了。
等彻底做完，我会在这里放上小程序的链接