小程序开发总结一：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地址： github.com/xiejun-net/…

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，咱们也能够一个项目里包含多个小程序，多个小程序之间能够共用组件和公用页面，在某些场景下能够节省不少开发时间和维护时间。

打包的时候根据项目入口打包 yarn dev <project>

分包

旧项目做为主包 其余根据文件夹 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）