网站建设国风网络公司,网页设计与制作教程杨选辉第四版,网络教学,中国建筑网络教育平台最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作。网上查找了一番#xff0c;觉得mpvue还不错#xff08;之前也没玩过#xff09;#xff0c;索性拿来用吧#xff01;01 前言小程序的做法也是比较简单的#xff0c;假如你是老手…最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作。网上查找了一番觉得mpvue还不错之前也没玩过索性拿来用吧01 前言小程序的做法也是比较简单的假如你是老手的话基本上开箱即用但是奈何自己技术不够那就手把手教你踩坑吧。之前也做过几个小程序我用过官方的、uni-app开发效果还行。然后现在是想尝试一下mpvue生态还可以组件库也多。拿到设计图的时候觉得还可以但是一看好像还是有点东西的。02 自定义tabbar我看到了页面是有一个自定义tabbar的自己之前没有做做过这种都是直接在app.json文件里面配置的简单高效不带坑。虽然说官方支持自定义tabbar的功能但是我和官方的意思就不是同一个频道的。这是我拿到的原型图一开始好像是有点蒙但是谷歌了一下其实还有救。思想就是把原生的tabbar隐藏然后把你自定义的tabbar放上去即可。在app.json配置tabbar因为后面要跳转不配置报错新建一个mytabbar.vue文件写自己的tabbar在app.vue的onShow的时候隐藏原生的tabbar,wx.hideTabBar();这样其实就好了但是需要tabbar的页面都要引入自己的组件talk is cheap接下来就开始实现自己的组件吧。自定义组件模板部分templatesection classtabBar-wraparticle classtabBar-boxul classtabBar-nav v-ifnavList.length 0liclassitemv-for(item, index) in navListclickselectNavItem(index,item.pagePath):keyindexp classitem-imagesimg:srcselectNavIndex index ? item.selectedIconPath : item.iconPathalticonPath//pp:classselectNavIndex index ? item-text item-text-active : item-text {{item.text}}/p/lili v-ifneedButton styleflex: 2div classsubmit-boxbuttonv-ifbtnText抽大礼:disabled!handButtonclickbindNavigateTo(../game/main):classhandButton ? submit-box-btn submit-box-btn-active : submit-box-btn {{ btnText }}/button/div/li/ul/article/section
/template逻辑部分script
export default {props: [selectNavIndex, needButton, handButton, btnText],data() {return {navList: [{pagePath: ../index/main,iconPath: ../../static/tabs/home.png,selectedIconPath: ../../static/tabs/home-active.png,text: 首页},{pagePath: ../share/main,iconPath: ../../static/tabs/home.png,selectedIconPath: ../../static/tabs/home-active.png,text: 分享},{pagePath: ../center/main,iconPath: ../../static/tabs/home.png,selectedIconPath: ../../static/tabs/home-active.png,text: 我的}]};},methods: {selectNavItem(index, pagePath) {if (index this.selectNavIndex) {return false;}this.bindViewTap(pagePath);},bindNavigateTo(url) {//不是tabbar的页面跳转方式wx.navigateTo({url});},bindViewTap(url) {//tabbar页面的跳转方式wx.switchTab({url});}}
};
/script
样式部分.tabBar-box {position: fixed;bottom: 0;width: 100%;height: 50px;padding: 10rpx 0;border-top: 1px solid #eee;background-color: #eb8c2b;
}
.tabBar-nav {width: 100%;display: flex;justify-content: center;align-items: baseline;
}
.item {flex: 1;text-align: center;
}
.item-text {color: #666;font-size: 14px;font-weight: bold;transition: 0.24s linear;
}
.item-text-active {color: #fec754;
}
.item-images {margin: 0 auto;text-align: center;transition: 0.24s linear;
}
img {width: 60rpx;height: 60rpx;
}
.submit-box-btn {position: relative;z-index: 999;width: 70%;height: 80rpx;line-height: 80rpx;border-radius: 50rpx;color: #404040;font-size: 20px;font-weight: bold;border: none;background-color: #eee;text-align: center;border: 1px solid #eee;
}
.submit-box-btn-active {color: #fff;border: none;border: 1px solid #fca542;background-color: #fca542;
}
button {border: none;outline: none;
}使用方式使用方式也很简单直接把它引入进来然后注册一下就可以了。import mytabbar from /components/mytabbar;components: {mytabbar},
在你的页面里面放上组件mytabbar:needButtonneedButton :btnTextbtnText:handButtonhandButton:selectNavIndexselectNavIndex
/mytabbarneedButton:是否需要一个button就像我这里就需要了btnTextbutton里面的文字显示因为可能另一个页面显示不一样handButton点击button的逻辑selectNavIndex需要高亮的下标每个页面的高亮不一样03 组合使用Vant自己造轮子很麻烦就用别人的组件库好了。看了一下Vant还不错而且别人也尝试过使用vantmpvue的开发模式坑还是自己踩一边的好。首先我遇到的第一个问题就是如何引入组件库虽然官方的做法是直接安装但是我安装之后发现老是找不到路径没办法只好放弃。我现在采用的是直接引入本地的方式进行虽然每一次编译都要一点时间但是还好。以后上线的时候把没用的组件删除就好保留你需要使用的组件按需引入下载整个仓库之后把里面的dist文件夹下面的所有文件复制到你的项目static/vant当中以后使用就从这里引入好了使用的时候还是在app.json里面配置(与pages同级)usingComponents: {van-button: /static/vant/button/index,van-tab: /static/vant/tab/index,van-tabs: /static/vant/tabs/index,van-nav-bar: /static/vant/nav-bar/index,van-icon: /static/vant/icon/index,van-row: /static/vant/row/index,van-col: /static/vant/col/index,van-dialog: /static/vant/dialog/index,van-field: /static/vant/field/index,van-area: /static/vant/area/index,van-popup: /static/vant/popup/index,van-picker: /static/vant/picker/index},这样其实就可以了写页面的时候直接按照它的文档写就好了。04 遇到的小坑自定义NavBar因为UI图上面的导航有自定义的样式没办法只好使用vant的van-nav-bar但是我使用slot的时候发现左边的图标点击不了。文档上面是使用bind:click-left的方式但是没用其实正确的写法应该是van-nav-bar title我的van-icon namewap-home slotleft clicktoHome/
/van-nav-bar图片背景使用图片背景的时候发现报错说不可以引用本地的图片使用base64或者网络图片。但是我使用网络图片发现报了403错误没有权限。索性就使用了base64的方式。虽然不太接受这种方式因为转出来的字符串很长。获取定位首页需要有一个获取定位的功能。但是看了一下小程序的官方文档只能获取到经纬度。这里我就使用了第三方的接口去腾讯位置服务平台注册一下可以使用经纬度逆向解析地址的功能。然后里面有一个逆地址解析的功能使用经纬度作为参数就可以获取了。但是开始你要去app.json配置//在app.json中配置权限
permission: {scope.userLocation: {desc: 您的位置信息将用于搜索银行信息,以帮助您填写正确的支行信息}},
实例代码wx.getLocation({type: wgs84, // 默认为 wgs84 返回 gps 坐标gcj02 返回可用于 wx.openLocation 的坐标success: function(res) {console.log(定位成功,res);var locationString res.latitude , res.longitude;wx.request({url: http://apis.map.qq.com/ws/geocoder/v1/?lget_poi1,data: {key: xxxxx-xxxxx-xxxxx-xxxx-xxxxx-xxxxx,//你自己的key,页面上有location: locationString},method: GET,success: function(res) {console.log(请求成功,res);//这里就可以获取你的地址了},fail: function() {console.log(请求失败);},complete: function() {console.log(请求完成);}});},fail: function() {console.log(定位失败);},complete: function() {console.log(定位完成);}});
但是你会发现也有一些小问题比如一开始说你的合法域名问题。 然后你就可以去你的项目配置那里勾上不检验合法域名。 然后重新试一下发现还是不行。这里其实就要你去微信小程序的后台加入请求源了因为我现在是测试号没有后台弄不了。注意的是微信小程序使用的时候WebServiceAPI 域名白名单不能配置否则会报错request合法域名要配置05 小结一顿操作下来发现自己还是可以接受但是应该说还有很多坑没有亲自踩都是在前人的路上走谷歌一搜mpvue的为什么一堆都是踩坑记录其实还好mpvue对vue的语法支持还不错因为现在自己对vue的语法比较熟悉写起来是没有毛病的但是主要是一些细节上可能会难以把控。特此记录一下也是对自己的记录。发现其实学会了vue真的是很好不仅可以开发web界面还可以把小程序也一起搞了。参考文章mpvue 小程序如何自定义tabBar不使用navigateTo跳转模拟redirectTo跳转
