uni-app(二):本地插件使用(Android)

发布于:2024-05-11 ⋅ 阅读:(97) ⋅ 点赞:(0)

项目创建等参考

https://lprosper.blog.csdn.net/article/details/138655526

1.下载并引用本地插件

在这里插入图片描述

2.注意插件配置

在这里插入图片描述

3.制作自定义基座

在这里插入图片描述

4.编写调用代码

<template>
  <view>
    <button type="primary" @click="test()">本地插件调用</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    onLoad() {},
    methods: {
      // 本地插件调用
      test() {
        const dcRichAlert = uni.requireNativePlugin("DCloud-RichAlert");
        dcRichAlert.show(
          {
            position: "bottom",
            title: "提示信息",
            titleColor: "#FF0000",
            content:
              "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
            contentAlign: "left",
            checkBox: {
              title: "不再提示",
              isSelected: true,
            },
            buttons: [
              {
                title: "取消",
              },
              {
                title: "否",
              },
              {
                title: "确认",
                titleColor: "#3F51B5",
              },
            ],
          },
          (result) => {
            switch (result.type) {
              case "button":
                console.log("callback---button--" + result.index);
                break;
              case "checkBox":
                console.log("callback---checkBox--" + result.isSelected);
                break;
              case "a":
                console.log("callback---a--" + JSON.stringify(result));
                break;
              case "backCancel":
                console.log("callback---backCancel--");
                break;
            }
          }
        );
      },
    },
  };
</script>

5.运行

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到