正文

小程序开发总结一：mpvue框架及与小程序原生的混搭开发(代码片段)

net-xiejun  net-xiejun  2023-01-06  279

关键词：

mpvue-native:小程序原生和mpvue代码共存

问题描述

mpvue和wepy等框架是在小程序出来一段时间之后才开始有的，所以会出现的问题有：需要兼容已有的老项目，有些场景对小程序的兼容要求特别高的时候需要用原生的方式开发

解决思路

mpvue的入口文件导入旧版路由配置文件
公共样式字体图标迁移 app.wxss -> app.vue中less（mpvue的公共样式）
旧项目导入旧项目(native)拷贝到dist打包的根目录

这个要注意的就是拷贝的旧项目不能覆盖mpvue打包文件，只要避免文件夹名字冲突即可

mpvue-native使用

yarn dev xiejun // 本地启动
yarn build xiejun // 打包

开发者工具指向目录
/dist/xiejun

github地址： https://github.com/xiejun-net/mpvue-native

mpvue-native目录结构

|----build
|----config
|----dist 打包后项目目录
    |----<projetc1>
    |----<projetc2>
|----src 源码
    |----assets 通用资源目录
    |----components 组件
    |----pages 公共页面页面
    |----utils 常用库
    |----<project> 对应单个项目的文件
        |----home mpvue页面
            |----assets
            |----App.vue
            |----main.js
        |----native 原生目录
            |----test 小程序原生页面
                |---web.js
                |---web.wxml
                |---web.wxss
                |---web.json
        |----app.json 路径、分包
        |----App.vue
        |----main.js mpvue项目入口文件
|----static 静态文件
|----package.json

拷贝旧项目到根目录下

 new CopyWebpackPlugin([
    
    from: path.resolve(__dirname, `../src/$config.projectName/native`),
    to: "",
    ignore: [".*"]
    
]),

入口及页面

const appEntry =  app: resolve(`./src/$config.projectName/main.js`)  // 各个项目入口文件
const pagesEntry = getEntry(resolve(‘./src‘), ‘pages/**/main.js‘) // 各个项目的公共页面
const projectEntry = getEntry(resolve(‘./src‘), `$config.projectName/**/main.js`) // 某个项目的mpvue页面
const entry = Object.assign(, appEntry, pagesEntry, projectEntry)

多项目共用页面

参考web中一个项目可以有多个spa，我们也可以一个项目里包含多个小程序，多个小程序之间可以共用组件和公用页面，在某些场景下可以节省很多开发时间和维护时间。

打包的时候跟进项目入口打包（npm run dev

分包

旧项目作为主包
其他根据文件夹 pages xiejun 分包作为两个包加载
具体根据实际情况来分

// app.json文件配置 pages 为主包
  "pages": [
    "test/web"
  ],
  "subPackages": [
    
      "root": "pages",
      "pages": [
        "about/main"
      ]
    ,
     
      "root": "xiejun", 
      "pages": [
          "home/main"
        ]
    
  ],

其他有关小程序开发坑和技巧

字体图标的使用

网页我们直接引用css就好//at.alicdn.com/t/font_263892_1oe6c1cnjiofxbt9.css

小程序只需要新建一个css文件把在线的css代码拷贝过来放置全局即可

技术分享图片

关于小程序和mpvue生命周期

点此查看mpvue的生命周期

从官方文档上生命周期的图示上可以看到created是在onLaunch之前，也就是说每个页面的created 出发时机都是整个应用开启的时机，所以一般页面里面都是用mouted 来请求数据的。

如何判断小程序当前环境

问题描述

发布小程序的时候经常担心配置错误的服务器环境
而小程序官方没有提供任何关于判断小程序是体验版还是开发版本的api

解决方案

熟悉小程序开发的不难发现小程序https请求的时候的referer是有规律的：https://servicewechat.com/$appId/$env/page-frame.html

即链接中包含了当前小程序的appId

开发工具中 appId紧接着的dev是 devtools
设备上 开发或者体验版 appId紧接着的env是 0
设备上 正式发布版本 appId紧接着的env是数字如： 20 发现是小程序的发布版本次数，20代表发布了20次

由此我们可以通过env 这个参数来判断当前是什么环境，

前端是无法获取到referer的，所以需要后端提供一个接口,返回得到referer

代码

// https://servicewechat.com/$appId/$env/page-frame.html
// 默认是正式环境，微信官方并没有说referer规则一定如此，保险起见 try catch
async getEnv() 
    try 
        let referer = await userService.getReferer() // 接口获取referer
        let flag = referer.match(/wx2312312312/(S*)/page-frame/)[1]
        if (flag === ‘devtools‘)  // 开发工具
            // setHostDev()
         else if (parseInt(flag) > 0)  // 正式版本
            // setHostPro()
         else  // 开发版本和体验版本
            // setHostTest()
        
     catch (e) 
        console.log(e)

Promise

官方文档上说Promise 都支持

实际测试发现其实在ios8上是有问题的

所以request.js

import Es6Promise from ‘es6-promise‘
Es6Promise.polyfill()

wx.navigateto返回层级问题

官方文档是说目前可以返回10层

实际情况是在某些机型上只能返回5层和原来一样

所以最好使用wx.navigateto跳转不超过5层

压缩兼容问题

在微信开发者工具上传代码的时候

务必把项目ES6转ES5否则会出现兼问题

个人公众号:程序员很忙（xiejun_asp）

技术分享图片

个人技术总结(代码片段)

1、技术概述基于mpvue搭建小程序项目框架2、技术详述mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说，无疑是目前最好的选择。mpvue从底层支持Vue.js语法和构建工具体系，同时再结合相关UI组件库，便可以高效... 查看详情

小程序开发：原生与三方框架对比分析

前言自2017-1-9微信小程序诞生以来，小程序生态蓬勃发展，支付宝、百度、京东等也都推出了自己的小程序生态。小程序开发也从最初的微信原生开发，到现在uni-app、taro、mpvue、wepy等框架依次出现，生态越来越丰... 查看详情

小程序开发：原生与三方框架对比分析

mpvue小程序开发爬坑汇总

1微信小程序之动态获取元素宽高varobj=wx.createSelectorQuery();2微信小程序图片自适应<imageclass="themeImg":src="themeImg"mode="widthFix"/>mode设置为widthFix宽度100%3.小程序上拉加载下拉刷新4.通过this.$root.$mp.query进... 查看详情

mpvue最佳实践,美团出的一个小程序框架(代码片段)

看手机微信，看到说美团出了1个小程序框架， mpvue搜下来试试，看了网上的一个对比 -----------------以下为引用我们对微信小程序、mpvue、WePY这三个开发框架的主要能力和特点做了横向对比，帮助大家了解不同框架的... 查看详情

小程序开发点滴积累

现在想把已经用vuejs开发的前端web页面搬迁到微信小程序，研究了许久，前端界一如既往变化迅猛，目前国内有很多比较优秀的框架可以借用。其中mpvue是美团开源的一款适合vue开发者胃口的小程序开发框架。它支持完全的vue开... 查看详情

微信小程序开发总结（附源代码）(代码片段)

最近公司项目不是很忙，有时间研究研究微信小程序。参考了目前市场上各类答题类的app、小程序等等，做了一款自己的微信答题小程序，包括前端和后端，后端是用node做的。现在已经上线了，名字叫【你问我猜猜猜】，大家... 查看详情

微信小程序开发02：项目开发总结(代码片段)

1.bilibili项目介绍通过原生的微信小程序来实现一个bilibili应用，来体验原生小程序魅力。2.技术铺垫html和css和JavaScript基本功部分es6微信小程序基础3.关键技术名称链接备注微信小程序开发文档官方文档4.成果5.接口地址公共路... 查看详情

mpvue小程序开发之实现一个弹幕评论(代码片段)

先上图就是一个简单的弹幕发送功能弹幕区的页面：<divclass="content"v-show="doommData.length"><divclass="textLeft"></div><divclass="textItem"><pclass="textaon"v-if="item.display"v-for="(i 查看详情

mpvue项目中使用第三方ui组件库的方法

简介微信小程序上线已有一年多时间啦，自美团的mpvue(基于Vue.js的小程序开发框架，从底层支持Vue.js语法和构建工具体系)问世也过去了好几个月。前端技术日新月异，小程序的UI框架也层出不穷。例如： WeUI:一套同微信原生... 查看详情

小程序开发框架推荐

小程序开发可以提供一个崭新的开发平台，同时还能降低公司的开发成本。这也是为什么小程序开发火热的原因。对于小程序开发者而言，好的开发框架很重要。现在来推荐几个好用的开发框架1、Tina.js轻盈小巧极易上... 查看详情

微信小程序开发基础「配置」与「逻辑层」(代码片段)

微信小程序作为微信生态重要的一环，在实际生活、工作、商业中的应用越来越广泛。想学习微信小程序开发的朋友也越来越多，本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结... 查看详情

小程序开发和app开发有啥区别，哪个好学一些？

小程序有很多种，微信小程序、钉钉小程序等等。而App也分分了好几个阵营。我们现在说的小程序一般都是基于H5的，或者说语法非常的类似，配合js和css样式达到相应的显示效果。开发时涉及的技术栈主要是h5、css、js相关的。A... 查看详情

金华兰溪义乌永康东阳微信小程序开发公司天玑一号旺铺微信小程序

　　小公司开发自己的微信小程序是非常有必要的，下面上海微信小程序开发公司天玑【一号旺铺】就给大家说说开发自己的微信小程序会给大家带来什么好处。天玑金华、兰溪、义乌、永康、东阳微信小程序开发公司天玑一号... 查看详情

3分钟带你了解微信小程序开发

什么是微信小程序微信小程序是腾讯2017年1月9日正式上线的一种基于微信的无需安装的应用程序什么是基于微信?简单粗暴的理解就是运行在微信中的应用程序,如果没有安装微信则不能运行什么是无需安装?无需安装只是宣传噱头... 查看详情

微信小程序开发手记之七：一个小程序上线后的总结（上）

...时间，磕磕绊绊地提交审核了，一个移动猿开发小程序，也算有了些心得，也遇到了些坑，这里和大家一起分享下。怎么样调布局先说一个题外话，最后引入正题。如果翻看过一些资料，大家肯定很容... 查看详情

微信小程序开发技巧总结(持续更新...)(代码片段)

小程序开发技巧总结结合自己在平时的开发中遇到的各种问题，和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。数据的生命周期1.短生命周期数据存储以小程序启动到彻底关闭为周... 查看详情