小程序开发总结一:mpvue框架及与小程序原生的混搭开发

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

问题描述

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

解决思路

  1. mpvue的入口文件导入旧版路由配置文件
  2. 公共样式 字体图标迁移 app.wxss -> app.vue中less(mpvue的公共样式)
  3. 旧项目导入 旧项目(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)

原文地址:https://www.cnblogs.com/net-xiejun/p/9752692.html

时间: 10-07

小程序开发总结一:mpvue框架及与小程序原生的混搭开发的相关文章

使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)

对于一些较小的项目,具备一定经验的开发人员应该能够设计和构建出便于进行维护和扩展的应用程序.但是,随着功能模块数量(以及开发维护这些部件的人员)的不断增加,对项目实施控制的难度开始呈指数级增长. SailingEase WinForm 框架为您提供了针对此问题提出的解决方案.在本文中,将对基于SailingEase WinForm 框架的复合应用程序的定义进行解释,并简要说明如何才能构建一个基于 SailingEase WinForm 框架功能的复合应用程序. 传统的单一应用程序 传统的单一应用

Android &amp;Swift iOS开发:语言与框架对比

转载自:http://www.infoq.com/cn/articles/from-android-to-swift-ios?utm_campaign=rightbar_v2&utm_source=infoq&utm_medium=articles_link&utm_content=link_text 从Android到Swift iOS开发:语言与框架对比 我从2009年开始做Android开发,开始接触Swift是在2014年底,当时组里曾经做过一个Demo App,感觉技术还

【小程序】mpvue框架

前置开发环境 node.js,vue-cli,微信开发者工具 创建项目 vue init mpvue/mpvue-quickstart firstapp 进入目录npm install安装依赖后npm run dev,再打开微信开发者工具导入 文件目录结构 1)build目录 build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件.一般情况下不需要修改这些文件. 2)config目录 config目录下包含了用于开发和生产环境下的不同配置,dev.env.js用于开发

程序开发为什么要使用框架

什么是框架 在的J2EE开发中,经常会提到"框架"这个词汇,例如Spring,Struts,Webx等等都称之为J2EE开发框架.那么什么是框架呢? 框架的英文为Framework,带有骨骼,支架的含义. 在软件工程中,框架被定义为整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架. 一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以

微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助

微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序资源大多是整理自github,如果可以,希望大家能够给github上的原作者一颗star,感谢原作者的无私奉献. 这里整理的是资源的原帖子,下载链接也在帖子里,当然本人也只体验了部分demo,有兴趣的同学可以都下载试试. 下载地址: 仿微信聊天,朋友圈小程序源码wepy框架开发的小程序商城源码,功能

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)

很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现的是基础功能.但是,可以给学习者很便捷的体验和很好的启发. 不过,随着微信平台和云服务的发展,真担心,程序猿会失业! 目录 一.微信小程序申请 二.服务器设置(申请.部署.域名) 1.申请服务器 2.部署服务器 3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参

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

小公司开发自己的微信小程序是非常有必要的,下面上海微信小程序开发公司天玑[一号旺铺]就给大家说说开发自己的微信小程序会给大家带来什么好处.天玑金华.兰溪.义乌.永康.东阳微信小程序开发公司 天玑一号旺铺微信小程序开发报价咨询:http://www.wangpu1.com/全国免费热线:15058525901(微信同号) 小程序一定是基于 Html5+微信原生能力 的产品形态无需下载安装说明跟 App Store 的 APP 是不一样的,小程序是嵌在微信 APP 内的,微信提供标准化入口,当用户订

程序员必看:移动开发中几个全新的开源小工具。

移动优先的开发理念已经成为前瞻性应用开发机构的首要标志.有鉴于此,移动应用开发工具的阵营不断扩张.成员日益丰富自然不足为奇.爱加密小编收集了一部分开发人员的意见,整理了他们对于新型移动开发工具的看法.在本文中,我们就一起来了解这几款不容错过的杰出移动开发工具 AppGyver AppGyver包含多种快速开发工具,其中包括用于原型开发的Prototyper.用于开发PhoneGap应用的Steroids等. "AppGyver为应用程序开发与概念设计提供多种出色工具.我们利用AppGyver P

【LC3开源峰会网络技术系列之二】阿里云开发智能网卡的动机、功能框架和软转发程序

摘要: 摘要 这篇文章介绍了阿里云开发智能网卡的动机.功能框架和软转发程序以及在软转发过程中发现的问题和优化方法. 主讲人陈静 阿里云高级技术专家 主题Zero-copy Optimization for DPDK vhost-user Receiving 分论坛Network & Orchestration 项目背景 在VPC产品部署中虚拟交换Virtual Switch承担着overlay层和underlay层进行网络协议的加解密encap/decap功能在多租户虚拟机或者容器的主机上也需要