小程序插件踩坑记录

1,832 阅读2分钟

微信小程序插件开发文档

插件项目目录结构

  • plugin 目录:插件代码目录。
  • miniprogram目录:放置一个小程序,用于调试插件。
  • doc目录:用于放置插件开发文档。

miniprogram 目录内容可以当成普通小程序来编写,用于插件调试、预览和审核。 插件需要 appid 才能工作,miniprogram/app.json配置如下:

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  // 配置插件名和插件对应的版本号和appId
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "wxxxxxxxxxxxxx"//主体小程序的appId
    }
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  //使用插件功能函数时需要配置!
  "functionalPages": {
    "independent": true
  },
  "sitemapLocation": "sitemap.json"
}
  • "myPlugin" 对应于你将要跳转的url里的插件名
<navigator url="plugin://lcbPlugin/index?openId=15000499260&encryType=md5&provider=wechat_little_app_car_networking&userId=FA&mobile=15000499260&timestamp=1592032721501&sign=e4e4ada9f35e1bd07d132b7798718a1c">打开绑定的小程序插件</navigator>
  • 开发中version的配置方式
1. "version": "dev"//本地开发环境
2. "version": "dev-abcdef0123456789abcdef0123456789" //引用最新上传的开发版插件,每次上传dev-后面的id会变
3. "version": "1.0.0"//生产版本号

来自官网截图

插件调用API的限制

插件功能页

  • 支付功能页踩坑

1.插件主体小程序的app.json中需要声明 "functionalPages": true

2.注意:功能页函数不应 require 其他非 functional-pages 目录中的文件,其他非 functional-pages 目录中的文件也不应 require 这个目录中的文件。

3.如果需要新增或更改这段功能函数代码,需要发布插件所有者小程序,才能在正式版中生效;需要重新预览插件所有者小程序,才能在开发版中生效。

4.支付报错:callminiprogramfuntion:fail file not found (原因是我们的主体小程序在打包时会在每一个js文件的头部添加一行require代码)

var regeneratorRuntime =require('../../lizard/polyfill/regenerator'); `

这里要注意version的配置

functional-page-navigator

跳转示例

 <functional-page-navigator version="{{env.functionalVersion}}" name="requestPayment" args="{{ args }}" bind:success="paymentSuccess" bind:fail="paymentFailed">
    <button class="btn btn-block btn-primary od-btn-confirm payment-button">立即支付</button>
 </functional-page-navigator>