uniapp miniapp plugin

1、安装 cli 最新的 alpha 版或最新的稳定版(uniapp vue2)

2、添加plugin.json, 与pages.json同级

{
    "publicComponents": {
        "hello-component": "components/hello"
    },
    /* #ifdef MP-WEIXIN */
    "pages": {
        "hello": "pages/index/index"
    },
    /* #endif */
    /* #ifdef MP-ALIPAY */
    "publicPages": {
        "hello": "pages/index/index"
    },
    "pages": [
        "pages/index/index"
    ],
    /* #endif */
    "main": "index.js"
}

3、所需要对外提供的组件在main.js注入(防止没有用到的组件编译遗漏)

import helloComponent from "./components/hello.vue";
Vue.component('hello-component', helloComponent)

4、添加测试插件小程序页面

参考https://github.com/fw6/uniapp-vue3-miniapp-plugin/tree/master/src/susceptor

或者自己在小程序创建插件基础代码复制到susceptor下面

 

5、赋值测试插件小程序页面vue.config.js

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([{
                from: resolve(`src/susceptor/${process.env.UNI_PLATFORM}`),
                to: path.join(__dirname, 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '')
            }])
        ],
    },
    chainWebpack: config => {
        config
            .plugin('define')
    }
}

6、npm install

npm run dev:mp-weixin -- --plugin plugin

7、插件条件编译package.json

"uni-app": {
    "scripts": {
      "mp-wx-plugin": {
        "title": "微信小程序插件",
        "env": {
          "UNI_PLATFORM": "mp-weixin"
        },
        "define": {
          "MP-WX-PLUGIN": true
        }
      },
      "mp-ali-plugin": {
        "title": "支付宝小程序插件",
        "env": {
          "UNI_PLATFORM": "mp-alipay"
        },
        "define": {
          "MP-ALI-PLUGIN": true
        }
      }
    }
  }

<!-- #ifdef MP-ALI-PLUGIN -->
        <view>我是支付宝插件代码</view>
        <!-- #endif -->
        <!-- #ifdef MP-WX-PLUGIN -->
        <view>我是微信插件代码</view>
        <!-- #endif -->

8、添加自定义编译命令

"dev:mp-wx-plugin": "npm run dev:custom mp-wx-plugin -- --plugin plugin",

"dev:mp-ali-plugin": "npm run dev:custom mp-ali-plugin -- --plugin plugin"

 支付宝插件联调: 

https://opendocs.alipay.com/mini/plugin/test