不得不说,目前这个项目做的真是够久,在开发过程中遇到了一些坑,解决了分享出来给大家。 在各方面综合考虑之下,鄙人抛弃了各大多端开发框架,使用了 原生
的小程序框架进行开发。
前人掘坑、后人遭殃,祝各位早日成为大牛!!👻👻👻
👻自定义动态Tabbar导航栏
在默认的小程序开发中,定义tabbar
,需要在app.json
中配置如下json:
"tabBar": {
...
"list": [
{
"text": "首页",
"iconPath": "/public/images/index.png",
"selectedIconPath": "/public/images/index-act.png",
"pagePath": "pages/job/index"
}
...
]
}
一经配置,无法修改。你可以调用setTabBarItem
设置按钮文字、图片路径;就是无法动态设置跳转地址、tabbar个数。
解决方案
我们需要新建一个中间页面
,用来控制所有tabbar,把tabbar要关联的页面,都用组件
的方式来写,这样,我们只要在这一个页面里,写个fix在底部的tabbar样式,点击不同tab,显示不同组件。
json文件
{
"usingComponents": {
"home" : "/pages/job/index", // 首页
"company" : "/pages/company/company", // 公司
"message" : "/pages/chat/index", // 消息
"mine" : "/pages/mine/index", // 我的
"tabbar" : "/milfun/widget/custom-tab-bar", //自定义tabbar组件
}
}
wxml文件
<!-- wxml中,把页面设置成组件 -->
<home wx:if="{{activeTab == 'home'}}">首页</home>
<company wx:if="{{activeTab == 'company'}}">公司</company>
<message wx:if="{{activeTab == 'message'}}">消息</message>
<mine wx:if="{{activeTab == 'mine'}}">我的</mine>
<!-- wxml中,自定义tabbar组件 -->
<tabbar list="{{tabList}}" bindmytab="tabChange"></tabbar>
js文件
Page({
data: {
activeTab:'home' // company 、message、mine
},
onLoad: function (options) {
let tmp = 1; // 用来控制显示不同方案的tabbar
if( tmp === 1 ){ // 显示第一套tabbar
this.setData({
tabList:[
{
"name": "...",
"text": "...",
"iconPath": "...",
"selectedIconPath": "...",
"pagePath": "..."
},
...
]
})
}else{ // 显示第二套tabbar
this.setData({
tabList:[{},...]
})
}
}
})
上面展示的是中间页面的写法,那正常页面如何改成组件页面呢?
页面改成组件写法
其不同主要是在于js文件里面的写法不同,所以我们只看js部分:
正常写法
Page({
data: {
},
onLoad: function (options) {
},
onShow: function (options) {
},
func1:function(e){
console.log(e)
},
func2:function(e){
console.log(e)
},
})
组件写法
Component({
options: { // 为了使用全局css样式
addGlobalClass: true,
},
data: {},
/*
* 组件被创建时调用,等同于上方的 onLoad
*/
attached: function (options) {
},
/*
* 组件内部方法,等同于上方的自定义方法
*/
methods: {
func1:function(e){
console.log(e)
},
func2:function(e){
console.log(e)
},
}
})
这样,我们就实现了动态tabbar功能,tablist数据我们随时都可修改,怎么跳转,我们自己说了算!
👻输入框弹起页面上滑
遇见上面这个问题,我们的解决方案是:手动设置输入框位置。
js文件
// 输入框获取焦点
foucus:function (e) {
this.setData({typerHeight: e.detail.height})
},
// 输入框失去焦点
blur:function () {
this.setData({typerHeight: 0})
},
wxml文件
<view class="tc-board" style="bottom:{{typerHeight}}px" >
......
</view>
这样,当输入框获取焦点时,会获取到键盘的高度,然后把输入框这个view的bottom样式,设置成你获取的高度,就完美的贴在输入框上方。当输入框失去焦点时,高度设置成0,输入框view又回到了页面的底部。
👻异步请求回调 + Token验证
为了避免在业务中书写繁杂的if else语句嵌套,或者回调函数
// 方法一
onLoad:function (e) {
// if嵌套
if(){
if(){
if(){ // do something }
}
}
// 回调陷阱
func1(data,func(){
func2(data,func(){
func3(data,func(){
// do something
})
})
})
},
我的做法是,为方法添加promise,举个栗子🥗:
公共功能js文件
/**
* 统一post请求接口
* @param {*} e “url,data,contentType,noOuth”
*/
function post(e){
// token 保存在缓存中,有需要时调取
let header = { 'Content-Type': contentType, 'Authorization':'Bearer ' + getCache('accessToken') }
// 封装在promise中
return new Promise(function (resolve, reject) {
wx.request({
url: config.domain + e.url , // domain统一放在config中
data:e.data,
method: 'POST',
header: header,
success: res => {
// console.log(res)
if(res.data.code == 200 ){
resolve(res.data) // 请求成功,返回数据
}
else{
wx.showToast({
title: res.msg,
icon: 'none',
duration: 1500,
});
reject(res.data.msg) // 请求出错,显示错误
}
},
fail: res => { // 请求失败
wx.showToast({
title: '请求发送失败',
icon: 'none',
duration: 1500,
});
}
})
})
}
页面js文件
// 方法一
onLoad:function (e) {
fun.post({ url:'...',data:{...} })
.then( res => console.log(res) ) // 步骤一
.then( res => console.log(res) ) // 步骤二
.then( res => console.log(res) ) // 步骤三
.catch( res => console.log(res) ) // 捕捉异常
},
这样写起来思路清晰,优雅,感觉棒棒哒!
👻接口统一管理
有了上述的post接口,我们在开发中会有很多的请求接口,如果都写在页面中,难以管理,如有修改,要一个个页面找过去,比较麻烦,我的做法是:
在模块目录下新建一个js,用来保存所有接口信息。为什么在模块下呢?因为考虑到可能有不同的分包、如果都写在一起会太多,分太细又带来管理的不便,具体如何,请根据具体项目来操作。
api接口统一管理文件
/**
* 该模块下所有接口
* 接口参数:
* url: just url
* contentType: default:false( use urlencoded ) or true( use json )
* noOuth: default:false( hase Authorization ) or true( no Authorization )
*/
const constApi = {
// 获取用户信息
getUserInfo : { // 定义接口调用的名字
url: 'api/v1/userinfo'
},
// 获取用户设置
getUserSetting: {
url: 'api/v1/usersetting',
outh:true // 需要鉴权
}
}
/**
* 对外接口统一调用
* @param {*} name 在api文件中的key
* @param {*} data 要post的数据
*/
const http = async function(key,data){
let api = constApi[key];
let response = await fun.post({
url:api.url,
data:data,
contentType:api.contentType,
outh:api.noOuth
})
return response
}
export default http
使用方法
// 导入api文件
import Api from './api-index.js'
onLoad:async function (e) {
// 用法一
Api('getUserInfo ',{
userId:1,
userPwd:123456,
...
})
.then( res => console.log(res) )
...
// 用法二
let tmp = await Api('getUserInfo',{...})
this.setData({ list: tmp })
},
到时候如果接口修改了,或者地址更换了,就不用满大街去找那些页面用到了接口,一个个修改。只需要在api-index.js中,统一修改和管理了。
这次先分享这些给大家,后续会继续给大家分享有用的开发经验,已经爬过的坑就不要再爬了。
谢谢大家!👻👻👻
本文转自 https://juejin.cn/post/6865920270218035214,如有侵权,请联系删除。