小程序开发不得不爬的坑,我替你爬过了!

马丁路德 等级 875 1 0
标签: 输入框前端

不得不说,目前这个项目做的真是够久,在开发过程中遇到了一些坑,解决了分享出来给大家。 在各方面综合考虑之下,鄙人抛弃了各大多端开发框架,使用了 原生 的小程序框架进行开发。

前人掘坑、后人遭殃,祝各位早日成为大牛!!👻👻👻

👻自定义动态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,如有侵权,请联系删除。

收藏
评论区

相关推荐

一个爬虫的故事:这是人干的事儿?
本文转载自 轩辕之风的文章,链接 https://mp.weixin.qq.com/s/YygbUWpa2mbPZPuPNhdt2w 爬虫原理 我是一个爬虫,每天穿行于互联网之上,爬取我需要的一切。 image.png(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/656d
Node.js爬虫实战 - 爬你喜欢的
前言 今天没有什么前言,就是想分享些关于爬虫的技术,任性。来吧,各位客官,里边请... 开篇第一问:爬虫是什么嘞? 首先咱们说哈,爬虫不是“虫子”,姑凉们不要害怕。 爬虫 一种通过一定方式按照一定规则抓取数据的操作或方法。 开篇第二问:爬虫能做什么嘞? 来来来,谈谈需求 产品MM: 1. 爱豆的新电影上架了,整体电影评价如何呢? 2. 暗
Flask开发 经验技巧总结
Flask作为一个主流的Python Web框架之一,有比较广泛的应用,但是有经验的小伙伴可能知道,这里边其实也有很多坑,让你不得不防,在使用的过程中可以积累一些经验。 1.Flask中的Referer不是referer 做过爬虫的小伙伴都知道,referer是指页面的跳转,即从哪一个页面跳转到当前页,很多网站也通过该属性对爬虫采取了一定的限制。在Flas
Flask开发 经验技巧总结
Flask作为一个主流的Python Web框架之一,有比较广泛的应用,但是有经验的小伙伴可能知道,这里边其实也有很多坑,让你不得不防,在使用的过程中可以积累一些经验。 1.Flask中的Referer不是referer做过爬虫的小伙伴都知道,referer是指页面的跳转,即从哪一个页面跳转到当前页,很多网站也通过该属性对爬虫采取了一定的限制。在Flas
小程序开发不得不爬的坑,我替你爬过了!
不得不说,目前这个项目做的真是够久,在开发过程中遇到了一些坑,解决了分享出来给大家。 在各方面综合考虑之下,鄙人抛弃了各大多端开发框架,使用了 原生 的小程序框架进行开发。前人掘坑、后人遭殃,祝各位早日成为大牛!!👻👻👻👻自定义动态Tabbar导航栏在默认的小程序开发中,定义tabbar,需要在app.json中配
爬取千万条基金数据是怎样的体验?
大家好,我是朱小五 昨天的文章中就提了一嘴,最近爬了一些股票和基金数据。再加上我们之前也做过,那就简单跟大家说一下如何爬取tiantian基金的数据。基金代码爬取基金的数据有个必要条件就是要知道基金代码,如何获取呢,打开官网找吧。点了一圈,发现了基金代码的主页,寻思翻页爬取就完事了http://fund.eastmoney.com/allfund.html
多人说Python简单,但是如何入门Python并精通?
一般而言,Python几个月就可以开始使用了。假如你几个月没入门,那肯定是方法不对,或者是偷懒.我在公众号里有一篇文章详细写了“初学者别上爬虫”,爬虫虽然很有趣,但不适合于小白用户。以下是2点:多人说Python简单,但是如何入门Python并精通?Python再简单再通俗,它也是一门语言,掌握一门语言绝非一朝一夕,我个人不推荐初学者上岸学习爬虫,我举一个很
3000字 “婴儿级” 爬虫图文教学 | 手把手教你用Python爬取 “实习网”!
1\. 为"你"而写 这篇文章,是专门为那些 "刚学习" Python爬虫的朋友,而专门准备的文章。希望你看过这篇文章后,能够清晰的知道整个 "爬虫流程"。从而能够 "独立自主" 的去完成,某个简单网站的数据爬取。好了,咱们就开始整个 “爬虫教学” 之旅吧!2\. 页面分析 ① 你要爬取的网站是什么?首先,我们应该清楚你要爬去的网站是什么?由于这里我们想要
小伙Python爬虫并自制新闻网站,太好玩了
大家好,我又来了,我是银牌厨师豆腐! 我们总是在爬啊爬,爬到了数据难道只是为了做一个词云吗?当然不!这次我就利用flask为大家呈现一道小菜。Flask是python中一个轻量级web框架,相对于其他web框架来说简单,适合小白练手。使用Flask+爬虫,教大家如何实时展示自己爬下来的数据到网页上。先给大家展示一下这个丑丑的网页 ↓(给个面子,别笑)演示三
手把手教你使用XPath爬取免费代理IP
大家好,我是霖hero。前言 可能有人说,初学者Python爬虫爬数据太难啦,构造正则表达式的时候,太烦琐了,眼睛都看花了,而且前一秒还可以愉快地爬取,下一秒IP就被封了,这还爬个屁啊,不爬了。哎,不要着急,这篇文章我们教你如何使用XPath来爬取快代理中的免费代理IP,告别眼花,告别IP被封的烦恼。XPath首先我们来简单了解一下XPath,想要了解更多
实战|手把手教你用Python爬取存储数据,还能自动在Excel中可视化!
大家好,在之前我们讲过如何用Python构建一个带有GUI的爬虫小程序,很多本文将迎合热点,延续上次的NBA爬虫GUI,探讨如何爬取虎扑NBA官网数据。 并且将数据写入Excel中同时自动生成折线图,主要有以下几个步骤。本文将分为以下两个部分进行讲解 在虎扑NBA官网球员页面中进行爬虫,获取球员数据。 清洗整理爬取的球员数据,对其进行可视化。
Java爬坑
redis序列化选择方式 1 public CacheManager cacheManager(RedisTemplate redisTemplate) { 2 //设置序列化Key的实例化对象 3 redisTemplate.setKeySerializer(new StringRedisS
Python 爬虫:把廖雪峰的教程转换成 PDF 电子书
写爬虫似乎没有比用 Python 更合适了,Python 社区提供的爬虫工具多得让你眼花缭乱,各种拿来就可以直接用的 library 分分钟就可以写出一个爬虫出来,今天就琢磨着写一个爬虫,将廖雪峰的 Python 教程 爬下来做成 PDF 电子书方便大家离线阅读。 开始写爬虫前,我们先来分析一下该网站[1](https://www.oschina.net/
Python爬虫入门教程 2
妹子图网站爬取---前言 ------------ 从今天开始就要撸起袖子,直接写Python爬虫了,学习语言最好的办法就是有目的的进行,所以,接下来我将用10+篇的博客,写`爬图片`这一件事情。希望可以做好。 为了写好爬虫,我们需要准备一个火狐浏览器,还需要准备抓包工具,抓包工具,我使用的是CentOS自带的tcpdump,加上wireshark ,这
Python爬虫知识点全面梳理
学任何一门技术,都应该带着目标去学习,目标就像一座灯塔,指引你前进,很多人学着学着就学放弃了,很大部分原因是没有明确目标,所以,在你准备学爬虫前,先问问自己为什么要学习爬虫。有些人是为了一份工作,有些人是为了好玩,也有些人是为了实现某个黑科技功能。不过 肯定的是,学会了爬虫,能给你的工作提供很多便利。 作为零基础小白,大体上可分为三个阶段去实现,第一阶段是