Giter VIP home page Giter VIP logo

uni-project-to-plugin's Introduction

使用uniapp2wxpack,基于uni-app开发微信小程序插件

此项目是uni-app开发微信小程序插件的示例项目,主要展示如何使用uniapp2wxpack的插件开发模式

注意

项目中涉及appid的部分需要自己修改成项目的实际appid,否则无法开发插件

快速起步

第一步

准备一个纯净的uni-app项目

第二步

运行uniapp2wxpack-cli(uniapp2wxpack 3.0以上版本)

npx uniapp2wxpack --create 

cli命令运行完之后,项目同时具备uni-app解耦模式的开发和插件开发能力
在package.json中分别会生成以下命令
build:mp-weixin-pack
dev:mp-weixin-pack
build:mp-weixin-pack-plugin
dev:mp-weixin-pack-plugin
并且会自动创建文件projectToSubPackageConfig.js
自动创建目录mainWeixinMp(此目录打包后会成为miniprogram目录,也就是插件开发模式的预览小程序)

第三步

手动在项目根目录创建插件开发需要的project.config.json,并且内容miniprogramRoot和pluginRoot属性按以下填写
并且自行填写真实的appid

{
	"miniprogramRoot": "miniprogram/",
	"pluginRoot": "uniSubpackage/",
	"compileType": "plugin",
	"setting": {},
	"appid": "xxxxxxxxx",
	"projectname": "uniapp2wxpack开发微信小程序插件",
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {}
}

第四步

在src目录下手动创建plugin.json
并且main属性必须按以下内容填写,也就意味着插件的接口文件指向src/main.js(因为打包后路径会变成common/main.js)

{
	"publicComponents": {
		"hello-component": "components/test"
	},
	"pages": {
		"hello-page": "pages/index/index"
	},
	"main": "common/main.js"
}

第五步

对src/main.js进行js接口的设置(非必须)
在main.js的最底部填写相关需要的内容
其中如果需要对第三方小程序公开自定义组件的使用,需要定义vue的全局组件,见如下范例
插件的接口使用特殊的API __uniPluginExports进行暴露

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()


/**
 * 要输出给第三方小程序使用的自定义组件,必须声明全局组件
 * 如果只是单纯的引入,不声明全局组件,build模式会无法正常输出组件
 */
import test from './components/test'
Vue.component('test',test)


// 插件接口输出使用特殊的API
__uniPluginExports = {
    hello: function() {
        console.log('Hello plugin!')
    }
}

第六步

运行命令

npm run dev:mp-weixin-pack-plugin (开发模式)
npm run build:mp-weixin-pack-plugin (生产模式)

第七步

使用微信开发者工具预览dist目录下相关环境的mp-weixin-pack-plugin目录

uni-project-to-plugin's People

Contributors

dependabot[bot] avatar devilwjp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

uni-project-to-plugin's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.