详解使用mpvue开发github小程序总结

前言

最近有点闲，想起关注已久的mpvue写小程序，所以稍微肝了半个多月写了个github版的微信小程序，已上线。现在总结一下遇到的坑。

扫码体验、

项目地址：https://github.com/cheesekun/wx-github

mina坑

scroll-view 高度

可滚动视图区域。

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

小程序提供的scroll-view组件，想让他能滚动，就要给他提供一个固定的高度。

我们一般需求是，上一块区域固定，下一块区域可滚动，我的处理方法是，拿到机型的可视高度，减去上一块固定区域的高度，动态赋值scroll-view最终高度。

// 以 search 页为例
// 滚动区域高度 = 总高度 - 搜索框高度 - tabs 高度
onLoad () {
 wx.getSystemInfo({
 success: (res) => {
  this.height = res.windowHeight // 获取机型可视高度
 }
 })

 let query = wx.createSelectorQuery()
 // 选择id
 query.select('#search').boundingClientRect()

 query.exec(res => {
 let searchH = res[0].height // 获取search框高度
 this.height = this.height - searchH - this.tabsH
 })
}

坑点：wx.createSelectorQuery()获取不了display: none的元素高度。

我的解决方法是：在trending页获取到tabs组件的高度，再存放到vuex中，给search页使用

生命周期（同一page携带不同参数）

小程序生命周期

当我们从一个页面①进入页面②时，我们一般在onLoad进行初始数据的获取，

从页面②返回到页面①时，若两个页面是不同的page，如①为page/info，

②为page/repo，那没问题，①页面unOnLoad，②页面onShow。

但是若①为page/info?user=a，②为page/info?user=b，那gg了，从页面②返回到页面①，页面①的数据会变成页面②的数据

为了避免这种情况，我一开始使用onShow代替onLoad，也就是在onShow的时候获取页面的初始数据。但是这个情况就有点可怕了，我们知道onShow很多情况都会触发到，切换前后台，从一个页面返回到另一个，都会触发onShow，这就导致会触发很多不必要的请求，而且用户体验极差。

可我很多需求就是类似从①为page/info?user=a到②为page/info?user=b，因此曲线救国想出用vuex维护有相关需求页面的路由栈。

页面onLoad的时候，推入query参数到栈中，onShow时，若当前页面的参数和栈中最后一个元素相同，则不重新加载数据。当页面被销毁，则在onUnload中把相应的页面栈推出。这样就可以避免很多无谓的onShow请求。

onLoad () {
 this.reset()
 const options = getQuery()
 user = options.login
 // vuex
 this.reposStack.push(options)

 this.getRepos()
 },
 onShow () {
 const options = getQuery()
 // vuex
 let reposStack = JSON.parse(JSON.stringify(this.reposStack))
 let len = reposStack.length
 let endStack = reposStack[len - 1]
 if (JSON.stringify(endStack) === JSON.stringify(options)) {
  return
 }
 this.reset()
 user = options.login
 this.getRepos()
 },
 onUnload () {
 // vuex
 this.reposStack.slice(0, -1)
 }

mpvue坑

query参数

mpvue可以通过 this.$root.$mp.query 在所有页面的组件内获取路径参数。

如果以mina来说的话，我们是通过在生命周期onLoad(options)，拿到options上携带的路径参数，mpvue提供了this.$root.$mp.query ,我们可以所有生命周期上使用。

但是我们知道，当我们从当前页返回到上一页时，上一页并不会执行onLoad(),

假设当前页和上一页是同个page，只是携带参数不同的话，此时回退到上一页，

上一页的this.$root.$mp.query不会变成自己的query，还是会变成当前页的query

举例：①page/info?a=1 => ②page/info?b=2

当我从②返回到①时，①的this.$root.$mp.query会变成{b:2}

我猜mpvue的this.$root.$mp.query是通过onLoad(options)获取到options，再赋值。但是遇到小程序页面返回不会执行onLoad

为了避免麻烦，我直接使用了小程序的api getCurrentPages()，获取路由栈中最后一个路由的参数

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

/**
 * 获取当前路径参数
 * 不用mpvue提供的this.$root.$mp.query
 * 因为其进入同一页面，参数不会变化
*/
export function getQuery () {
 /* 获取当前路由栈数组 */
 const pages = getCurrentPages()
 const currentPage = pages[pages.length - 1]
 const options = currentPage.options

 return options
}

后记

前面几个问题是我初次使用mpvue开发小程序遇到的最大的坑了吧。（好久没有写东西了，写得好烂。）不过确实使用mpvue开发小程序，能组件化，支持npm，比原生开发舒服很多。体验还是很好的。

小程序现在是真的太火了。感觉是个前端都要去玩一下。

再次推一下项目地址，有兴趣的朋友可以参考一下。https://github.com/cheesekun/wx-github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    前言 最近博主正在用微信小程序开发一款网上商城系统.恰好赶上了美团开源的小程序开发框架mpvue.该框架继承了vue.js的特性,用起来还是蛮爽的.然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState.mapGetters.mapMutations.mapActions等怎么就不能用呢.苦恼之际打开D盘,一番愉悦之后,终于想通啦- 问题分析 •vuex辅助函数 首先简单说一下vuex的辅助函数mapState.mapGetters.mapMutations.mapActi

  • 详解mpvue中小程序自定义导航组件开发指南

    这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用.分享出来抛砖引玉,如有谬误或优化空间,欢迎交流. 小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色.标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等. 小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可.mpvue的配置方式如下: 由于不同操作系统.不同机型的导航栏高度是

  • mpvue开发音频类小程序踩坑和建议详解

    这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了 mpvue ,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时遇到的一些问题和给出一些建议. 在 Linux 上开发小程序 在公司电脑装了双系统,日常用的是 Ubuntu 系统,Linux或Mac的开发环境对前端相对来说会友好一些.微信小程序官方的开发者工具只有 Windows 和 Mac 版本,所以这就尴尬了. 不过还好,发现已经有大神在Git

  • 详解使用mpvue开发github小程序总结

    前言 最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址:https://github.com/cheesekun/wx-github mina坑 scroll-view 高度 可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是

  • 详解Linux 下开发微信小程序安装开发工具

    详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

  • 详解使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

  • 详解ES6 CLASS在微信小程序中的应用实例

    ES6 CLASS基本用法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 1.1 constructor方法 constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加.

  • 详解mpvue开发微信小程序基础知识

    一.mpvue简介 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验.mp 即 mini program 的缩写. 二.mpvue快速入门 ① 通过脚手架引入mpvue模板 vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤

  • 一文详解如何清除手机上小程序缓存

    一文详解如何清除手机上小程序缓存

    目录 前言 一.提出问题: 二.分析问题: 三.解决问题: 总结 前言 原来真的有人,删掉手机里所有的娱乐软件,不管不顾任何东西,没日没夜的学习,就只是为了回到原来那个眼里有光被赋予希望的自己. 你要坚信每一个你想学习的念头,都是未来在向你求救! 懒惰是一个特别奇怪的东西, 它使你以为安逸是休息,是福气,它实际上给你带来了是无聊,是倦怠,是消沉,它剥夺你对前途的希望,隔断你和别人之间的友情,使你的心胸日益狭窄,对人生也越来越怀疑! 一.提出问题: 当小程序发布了新的版本后,用户如果之前访问过该小

  • 详解性能更优越的小程序图片懒加载方式

    意义 懒加载或者可以说是延迟加载,针对非首屏或者用户"看不到"的地方延迟加载,有利于页面首屏加载速度快.节约了流量,用户体验好 实现方式 传统H5的懒加载方式都是通过监听页面的scroll事件来实现的,结合viewport的高度来判断. 小程序也类似,通过监听页面onPageScroll事件获取当前滚动的数据,结合getSystemInfo获取设备信息来判断.由于scroll事件密集发生,计算量很大,经常会造成FPS降低.页面卡顿等问题. 这里说的是通过另外一种方式来实现 create

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • 使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

  • 如何使用uniapp开发微信小程序获取当前位置详解

    目录 前言 一.配置 1.进入mainfest.json文件配置permission块 2.进入微信公众平台添加合法域名 3.高德SDK文件下载 二.使用步骤 (直接封装组件) 1.在组件中引入amap-wx.130.js文件 2.在data中定义 3.在created中定义 4.在methods中定义 5.在你需要使用的vue页面调用改组件 总结 前言 使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息(比如:xxx省xxx市),uniapp提供了一个名为uni.getLo

随机推荐