小程序 插件

(1)创建插件项目通过开发者工具新建,开发模式选择插件,appid可以使用小程序的appidplugin目录:插件代码目录。miniprogram目录:用来编写小程序插件的使用Demo,上传插件代码时这个Demo会一起上传,并作为小程序插件的发布的审核依据.。doc目录:用于放置插件开发文档。doc/README.md,在README.md中引用的图片必须是doc目录下的本地图片。文档中的链接只能链接到：微信开发者社区（developers.weixin.qq.com）微信公众平台（mp.weixin.qq.com）GitHub（github.com）在开发者工具中编辑README.md后,在该文件上右键,弹出的菜单中可以选择“上传文档”project.config.json:需要关注compileType字段,compileType == 'plugin'时才能正常的使用插件项目(2)发布插件https://developers.weixin.qq.com/miniprogram/introduction/plugin.html#%E5%BC%80%E6%94%BE%E8%8C%83%E5%9B%B4%E5%8F%8A%E6%9C%8D%E5%8A%A1%E7%B1%BB%E7%9B%AE开通插件功能填写开发信息并开发完善基本信息提交审核、发布管理插件使用申请(3)开发插件1.插件开发可以创建components和pages2.在插件的plugin.json中设置向小程序开发的页面、组件和接口内容{"publicComponents": {"hello-component": "/components/hello-component"},"pages": {"hello-page": "/pages/hello-page"},"main": "index.js"}接口格式:module.exports = {sayHello() {console.log('Hello plugin!')},answer: 42}3.插件中获取小程序导出的内容使用插件的页面{"myPlugin": {"version": "1.0.0","provider": "wxidxxxxxxxxxxxxxxxx","export": "index.js" 指定导出的文件当插件在分包中时,指定的文件的路径是相对于分包的,例如在root:packageA的分包中指定了export:exports/plugin.js,那么路径应该是/packageA/exports/plugin.js。}}使用者小程序导出的文件module.exports = {greeting() {return 'Greetings from Weixin MiniProgram!';}}插件中const miniProgramExports = requireMiniProgram();(3.5)插件中登录wx.pluginLogin({successcode 用于换取openpid的凭证(有效期五分钟)插件开发者可以用此code在开发者服务器后台调用auth.getPluginOpenPId 换取openpid。POST https://api.weixin.qq.com/wxa/getpluginopenpid?access_token=ACCESS_TOKEN...})(4)使用插件1.在小程序管理后台->设置->第三方设置中添加插件2.在小程序项目的app.json的plugins字段中可以声明使用插件。3.只有在project.config.json的compileType == 'plugin'时,插件的版本号才能为'dev'"plugins": {"自定义插件名称": {"version": "dev","provider": "插件的appid"}},在分包内使用:{"subpackages": [{"root": "packageA","pages": ["pages/cat",],"plugins": {"myPlugin": {"version": "1.0.0","provider": "wxidxxxxxxxxxxxxxxxx"}}}]}.仅能在这个分包内使用该插件；.同一个插件不能被多个分包同时引用；.如果基础库版本低于2.9.0,不能从分包外的页面直接跳入分包内的插件页面,需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。(1)跳转到插件页<navigator url="plugin://(若跳转失败,此处添加插件appid/)插件名称/插件页"> 首先得在插件的plugin.json中暴露该页面Go to Plugin page</navigator>或者wx.navigateTo进行跳转(2)使用插件中的组件在使用插件组件的页面的.json文件中{"usingComponents": {"名称": "plugin://插件名称/插件中声明导出的组件"}}(3)使用插件index.js暴露的内容const plugin = requirePlugin('插件名称|插件appid') plugin即为暴露的内容(4)插件中使用小程序的组件进行抽象节点1、使用小程序组件的插件的页面或自定义组件.json文件中{ "componentGenerics": { "mp-view": true } }2、插件的wxml中<mp-view />3、在小程序使用插件中的自定义组件或页面时<plugin-view generic:mp-view="comp-from-miniprogram" />4、若在插件页中,插件页本身就是一个页面顶层组件,小程序不会引用它,无法通过generic:xxx=""的方式来指定抽象节点实现在小程序的app.json中{"pages": [...],"plugins": {"hello-plugin": {"version": "dev","provider": "wxe347ebcfd87eeb00","genericsImplementation": {"plugin-index": { 插件页面名"mp-view": "components/comp-from-miniprogram"}}}},"sitemapLocation": "sitemap.json"}(5)插件间互相调用插件不能直接引用其他插件,但如果小程序引用了多个插件,插件之间是可以互相调用的。使用plugin-private://APPID访问插件的自定义组件、页面(暂不能使用plugin://)对于js接口,可使用requirePlugin,但目前尚不能在文件一开头就使用requirePlugin因为被依赖的插件可能还没有初始化,请考虑在更晚的时机调用requirePlugin,如接口被实际调用时、组件attached时。（未来会修复这个问题。）(6)插件使用限制在插件开发中，以下组件不能在插件页面中使用：开放能力(open-type)为以下之一的button:contact(打开客服会话)getPhoneNumber(获取用户手机号)getUserInfo(获取用户信息)open-dataweb-view以下组件的使用对基础库版本有要求：navigator需要基础库版本 2.1.0live-player和live-pusher需要基础库版本 2.3.0(5)插件功能页1、小程序的app.json文件中添加,然后发布小程序{"functionalPages": {"independent": true使得插件功能页的代码独立于其他代码,这意味着插件功能页可以被独立下载、加载，具有更好的性能表现。 但也同时使得插件功能页目录functional-pages/(支付功能页会使用其中的文件)不能require这个目录以外的文件(反之亦然：这个目录以外的文件也不能调用这个目录内的)注意，新增或改变这个字段时，需要这个小程序发布新版本，才能在正式环境中使用插件功能页。}}2、插件中跳转到插件功能页2.4.0开始,支持插件所有者小程序跳转到自己的功能页。<functional-page-navigatorversion 跳转到的小程序版本,线上版本必须设置为releasedevelop 开发版 trial 体验版 release 正式版name 要跳转到的功能页 loginAndGetUserInfo 用户信息功能页 requestPayment 支付功能页 chooseAddress 收货地址功能页 chooseInvoice 获取发票功能页 chooseInvoiceTitle 获取发票抬头功能页 args 功能页参数,参数格式与具体功能页相关 bindsuccess 功能页返回,且操作成功时触发,detail格式与具体功能页相关 bindfail 功能页返回,且操作失败时触发,detail格式与具体功能页相关 bindcancel 因用户操作从功能页返回时触发 ></functional-page-navigator>3、用户信息功能页用户信息功能页用于帮助插件获取用户信息,包括openid和昵称等,相当于wx.login和wx.getUserInfo的功能。用户在这个功能页中授权之后,插件就可以直接调用wx.login和wx.getUserInfo,无需再次进入功能页获取用户信息自基础库版本2.6.3起,可以使用wx.getSetting来查询用户是否授权过<functional-page-navigatorname="loginAndGetUserInfo"args="{{withCredentials 是否带上登录态信息lang 指定返回用户信息的语言,zh_CN简体中文,zh_TW繁体中文,en英文。默认为en。timeout 超时时间,单位ms}}"...><button class="login">登录到插件</button></functional-page-navigator>4、支付功能页插件使用支付功能,需要进行额外的权限申请,申请位置位于管理后台的“小程序插件 -> 基本设置 -> 支付能力”设置项中。(1)插件中通过functional-page-navigator进行跳转<functional-page-navigatorname="requestPayment"args="{{fee 需要显示在页面中的金额,单位为分paymentArgs 任意数据,传递给功能页中的响应函数currencyType 需要显示在页面中的货币符号的代码,默认为CNYCNY 货币符号 ¥ USD 货币符号 US$ JPY 货币符号 J¥ EUR 货币符号 € HKD 货币符号 HK$ GBP 货币符号 ￡ AUD 货币符号 A$ MOP 货币符号 MOP$ KRW 货币符号 ₩}}"bind:success="paymentSuccess"bind:fail="paymentFailed"...><button class="login">登录到插件</button></functional-page-navigator>(2)在小程序中,配置功能页函数这个函数就会在合适的时机被调用,来帮助完成支付,如果不提供功能页函数,功能页调用将通过fail事件返回失败 支付功能页函数应以导出函数的形式提供在插件所有者小程序的根目录下的functional-pages/request-payment.js文件中,名为beforeRequestPayment,该函数应接收两个参数paymentArgs:在functional-page-navigator中传递的参数callback函数:callbacl(错误信息,支付参数用于调用wx.requestPayment)支付参数:timeStamp 时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间nonceStr 随机字符串,长度为32个字符以下。package 统一下单接口返回的prepay_id参数值,提交格式如:prepay_id=***signType 签名算法,暂支持MD5paySign 签名,具体签名方案参见小程序支付接口文档;extraData 由开发者决定的自定义数据段,该字段将被无修改地透传到支付成功的回调参数中 exports.beforeRequestPayment = function (paymentArgs, callback) {功能页函数不应require其他非functional-pages目录中的文件,其他非functional-pages目录中的文件也不应 require 这个目录中的文件，var getOpenIdURL = require('./URL').getOpenIdURL; 同在functional-pages中的文件可以 requirevar paymentURL = require('./URL').paymentURL;// 自定义的参数，此处应为从插件传递过来的var customArgument = paymentArgs.customArgument;// 第一步：调用 wx.login 方法获取 code，然后在服务端调用微信接口使用 code 换取下单用户的 openId// 具体文档参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161230#wxloginobjectwx.login({success: function (data) {wx.request({url: getOpenIdURL,data: { code: data.code },success: function (res) {// 拉取用户 openid 成功// 第二步：在服务端调用支付统一下单，返回支付参数。这里的开发和普通的 wx.requestPayment 相同// 文档可以参考 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3wx.request({url: paymentURL,data: { openid: res.data.openid },method: 'POST',success: function (res) {console.log('unified order success, response is:', res);var payargs = res.data.payargs;// 第三步：调用回调函数 callback 进行支付// 在 callback 中需要返回两个参数： err 和 requestPaymentArgs：// err 应为 null （或者一些失败信息）；// requestPaymentArgs 将被用于调用 wx.requestPayment，除了 success/fail/complete 不被支持外，// 应与 wx.requestPayment 参数相同。var error = null;var requestPaymentArgs = {timeStamp: payargs.timeStamp,nonceStr: payargs.nonceStr,package: payargs.package,signType: payargs.signType,paySign: payargs.paySign,extraData: { // 用 extraData 传递自定义数据timeStamp: payargs.timeStamp},};callback(error, requestPaymentArgs);}});},fail: function (res) {console.log('拉取用户 openid 失败，将无法正常使用开放接口等服务', res);// callback 第一个参数为错误信息，返回错误信息callback(res);}});},fail: function (err) {console.log('wx.login 接口调用失败，将无法正常使用开放接口等服务', err)// callback 第一个参数为错误信息，返回错误信息callback(err);}}); } (3)配置functional-page-navigator中成功回调paymentSuccess: function (e) {console.log(e);e.detail.extraData.timeStamp 功能页函数中,用extraData传递的数据}5、收货地址功能页、发票功能页、从基础库版本 2.16.1 起,该功能页已经废弃可以直接使用wx.chooseAddress实现对应的功能可以直接使用wx.chooseInvoice实现对应的功能可以直接使用wx.chooseInvoiceTitle实现对应的功能

总结

以上是生活随笔为你收集整理的小程序 插件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。