uniapp 微信小程序插件开发流程，以及注意事项问题

外边世界
2,910 阅读3分钟

大家好，我是外边世界。最近我一直在使用uniapp进行微信插件开发，并且在这个过程中遇到了一些问题和挑战。在本文中，我将分享我在插件开发中遇到的一些关键问题，并总结了一套简洁的开发流程，希望能够为正在进行插件开发的开发者提供一些有用的指导和参考。

uni-app 进行插件开发必须使用cli的模式

vue create -p dcloudio/uni-preset-vue my-project

项目创建完成后需要在package.json插件配置才能打包成插件

1、在package.json scripts 添加打包小程序插件命令

{
    "scripts": {
        "dev:mp-wx-plugin": "yarn dev:custom mp-wx-plugin --plugin 插件包名",
        "build:mp-wx-plugin": "yarn build:custom mp-wx-plugin --plugin 插件包名"
    }
}

2、配置完成后还需要在配置package.json的里面添加插件mp-wx-plugin 相关来源

 {
    "scripts": "{...}",
    "uniapp": {
        "scripts": {
            "mp-wx-plugin": {
                "title": "微信小程序插件",
                "env": {
                    "UNI_PLATFORM": "mp-weixin"
                },
                "define": {
                    "MP-WX-PLUGIN": true
                }
            }
        }
    }
}

3、在项目的src 目录下创建plugin.json文件

{
    "publicComponents": {
        "movie": "components/movie/movie"
    },
    "pages": {
        "movie_index": "pages/movie/index"
    },
    "publicPages": {
        "movie_index": "pages/movie/index"
    },
    "main": "index.js"
}

publicComponents: 是对外暴露的组件

pages: 是小程序插件的所有页面，如果没有配置再进行跳转回提示插件不存在

publicPages: 插件对外开放的页面

main: 是插件可以通过这个js对外暴露接口的方法（也可以通过这个方法向插件传参）

4、在src 目录中创建配置 plugin.json 中main对应的js

module.exports = {
    //对外开放的接口
}

插件的基本配置就完成了

5、在微信小程序开发创建插件

image.png

运行package.json scripts打包命令，然后将dist里面dist\dev\mp-weixin\插件名\ 或者 dist\build\mp-weixin\插件名\下面的插件名下面文件复制到刚刚创建的小程序的plugin目录里面

image.png

6、在app.json 配置插件appid，version是插件版本dev是开发版，如果有正式版本也可以改成正式版，调试线上

image.png

如果还有组件的话

需要在需要添加的页面json中配置

{
  "usingComponents": {
    "自定义组件名": "plugin://插件名/plugin.json下面的publicComponents"
  }
}

页面跳转修改

 const package = ' package.json scripts 插件打包命令 --plugin 后面跟的名称'
 const page = 'plugin.json 的pages下json对象的key'   
uni.navigateTo({
    url:'plugin://'+package + '/'+ page
})

插件获取用户openid方法

1、宿主小程序appid和插件appid不相同

<functional-page-navigator
        name="loginAndGetUserInfo"
        @success="getUserInfo"
        @fail="hideLogin"
        :version="envVersion">
    点击登录
</functional-page-navigator>


export default {
    data(){
      return {
          envVersion:'release' // develop 开发版 trial 体验版 release	正式版
      }  
    },
    getUserInfo(e){
        //e.detail.code
    }
}

2、宿主小程序appid和插件appid相同

wx.login({
    success(res){
        //res.code
    }
})

插件支付

// 申请支付能力
wx.requestPluginPayment({
    version: 'release', //打开的插件主小程序functional-pages/request-payment.js
    fee: 1, // 支付金额展示页面
    paymentArgs: {}, // 跳转支付参数beforeRequestPayment的第一个参数
    currencyType: 'CNY', //展示金额符合
    success (res) { },
    fail (res) { }
})
// 插件所有者小程序配置functional-pages/request-payment.js 与pages同级
exports.beforeRequestPayment = function (paymentArgs, callback) {
    let error = null;
    const requestPaymentArgs = {
        timeStamp: paymentArgs.timeStamp,
        nonceStr: paymentArgs.nonceStr,
        package: paymentArgs.package,
        signType: paymentArgs.signType,
        paySign: paymentArgs.paySign,
        extraData: { // 用 extraData 传递自定义数据
            timeStamp: paymentArgs.timeStamp
        },
    };
    callback(error,requestPaymentArgs) //相当于wx.requestPayment
}

在app.json 或者mainifest.json 的mp-weixin对象下配置

{
    "functionalPages": true    
}

! 建议使用

{
    "functionalPages": {
        "independent": true
    }
}

注意事项

1、使用ref获取popup下面的方法进行组件显示会导致popup组件在页面渲染,建议使用v-if进行展示

    <popup v-if="show" ref="order"></popup>

2、v-model 再真机调试模式不生效

3、如果组件需要使用ref，再使用了v-if 可能会在this.$refs中找不到这个ref


<template>
    <popup v-if="bool" ref="pop"></popup>
</template>
<script>
export default {
    data: () => ({
        bool:true
    }),
    mounted() {
        // this.$refs.pop 可能找不到 
        this.$nextTick(()=>{
            // this.$refs.pop 可能找不到 
        })
    }
}
</script>

4、使用者小程序app.wxss会覆盖插件的样式，建议使用特殊前缀去命名class名去避免

5、如果修改某些配置文件报错了，确认文件配置是正确的话，可能重启一下就好了(比如修改了appid或者version)

avatar
文章
阅读
粉丝